'React Native Tabnavigation Animation

I've implemented the tabnavigator with animation enabled with the following codes (ommitted icons codes for readability).

As you can see the navigation, as I click on each tab (e.g, first tab then 5th tab), the icons in the middle all changed color. Is there a way I can "jump" to the tab, while enabling animation?

const FirstStack = createTabNavigator(
  {
    Home: { screen: Home },
    List: { screen: List },
    Check: { screen: Check },
    Open: { screen: Open },
    Settings: { screen: Settings }
  },
  {

    tabBarOptions: {
      activeTintColor: "#00af9d",
      inactiveTintColor: "grey",
      style: {
        backgroundColor: "white",
        paddingTop: 10
      },
      showLabel: false
    },
    animationEnabled: true
  }
)

enter image description here



Solution 1:[1]

As the docs says for react-navigation, to enable animation in bottom tabs you need the material design tabs , you can learn about them and how to install them here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ValdaXD