How can we add animation to the bottom tab icon in react native version .61

Question

How can i customise the bottomTab in react-native Navigation and add custom animation to it.I am currently using react native version .61 and i want to put animation in only in middle tab icon. Icon should jump and rotate.I need it for ios apps.

Answer 1

import React, { useEffect, usetst } from "react";
import { Animated, Easing } from "react-native";
import { Ionicons } from "@expo/vector-icons";

function RefreshSpinner() {
  const spinValue = new Animated.Value(0);

  useEffect(() => {
    spin();

    return spinValue.stopAnimation();
  }, [spin]);

  function spin() {
    spinValue.setValue(0);
    Animated.timing(spinValue, {
      toValue: 1,
      duration: 2000,
      easing: Easing.linear,
      useNativeDriver: true
    }).start(() => spin());
  }

  const rotate = spinValue.interpolate({
    inputRange: [0, 1],
    outputRange: ["0deg", "360deg"]
  });

  return (
    <Animated.View style={{ transform: [{ rotate }] }}>
      <Ionicons color="red" name="md-refresh-circle" size={30}></Ionicons>
    </Animated.View>
    //<Ionicons color="red" name="md-refresh-circle" size={30}></Ionicons>
  );`enter code here`
}

export default RefreshSpinner;