I am making an app i have made a bottom navigation bar.I have used material-bottom-tabs. I added Lottie animation But when i click on tab the tab animate.it animates contentiously.

Here is the code

const Tab = createMaterialBottomTabNavigator();

export const Mytabs = () => {
  return (
    <Tab.Navigator
      activeColor="#B32626"
      sceneAnimationEnabled
      inactiveColor="#f0edf6"
      style={style.nav}
      barStyle={{
        backgroundColor: "black",
        position: "absolute",
        overflow: "hidden",
        margin: 20,
        borderRadius: 30,
      }}
    >
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: "Home",
          tabBarColor: "green",
          tabBarIcon: ({ focused, color, size }) => (
            <LottieView
              autoPlay={focused}
              source={require("../assets/lottieicons/Homeicon.json")}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Search"
        component={Search}
        options={{
          tabBarLabel: "Search",
          tabBarIcon: ({ focused, color, size }) => (
            // <Icon name="search" color={color} size={26} />
            <LottieView
              autoPlay={focused}
              source={require("../assets/lottieicons/searchicon.json")}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Favourite"
        component={Favourite}
        options={{
          tabBarLabel: "Favourite",
          tabBarIcon: ({ focused, color, size }) => (
            // <Icon name="bookmark" color={color} size={26} />
            <LottieView
              autoPlay={focused}
              source={require("../assets/lottieicons/Bookmarkicon.json")}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

I added loop={false} but then it is not animating even a single time it only animate when app starts. Here is the changed code:

const Tab = createMaterialBottomTabNavigator();

export const Mytabs = () => {
  return (
    <Tab.Navigator
      activeColor="#B32626"
      sceneAnimationEnabled
      inactiveColor="#f0edf6"
      style={style.nav}
      barStyle={{
        backgroundColor: "black",
        position: "absolute",
        overflow: "hidden",
        margin: 20,
        borderRadius: 30,
      }}
    >
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: "Home",
          tabBarColor: "green",
          tabBarIcon: ({ focused, color, size }) => (
            <LottieView
              autoPlay={focused}
              loop={false}
              source={require("../assets/lottieicons/Homeicon.json")}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Search"
        component={Search}
        options={{
          tabBarLabel: "Search",
          tabBarIcon: ({ focused, color, size }) => (
            // <Icon name="search" color={color} size={26} />
            <LottieView
              autoPlay={focused}
              loop={false}
              source={require("../assets/lottieicons/searchicon.json")}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Favourite"
        component={Favourite}
        options={{
          tabBarLabel: "Favourite",
          tabBarIcon: ({ focused, color, size }) => (
            // <Icon name="bookmark" color={color} size={26} />
            <LottieView
              autoPlay={focused}
              loop={false}
              source={require("../assets/lottieicons/Bookmarkicon.json")}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

Please help me solve this. I want the tab to animate only once when focused on it