CODEWITHSUNDEEP
react-nativeanimation
Fatima Siddique
Fatima Siddique

Reputation: 362

React Native - Animate bottom tab bar with scroll

In my react native project, I want bottom tabBar to be shown on screen, as you scroll upwards with your finger, say 200 offset y, the tabBar hides with animation, and when you scroll down, again, say 200 offset y, it shows the tabBar again.

I am using createBottomTabNavigator. I am able to show/hide bottom bar without animation.

I have tried

https://github.com/react-navigation/react-navigation/issues/888#issuecomment-299600368

https://github.com/react-navigation/react-navigation/issues/958

Below is my code

navigationOptions: ({ navigation }) => {
        const params = navigation.state.params;
        return {
          tabBarVisible: params && params.tabBarVisible,
          animationEnabled: true,
        }
      },

How can I animate the bottom bar as user scrolls the list?

Thanks in advance.

Upvotes: 2

Views: 3134

Answers (1)

Kubilay Kiymaci
Kubilay Kiymaci

Reputation: 472

If you want a bottom navigation with animation, you can use the createMaterialTopTabNavigator and simply set the tabBarPosition.

For detail information about createMaterialTopTabNavigator

Upvotes: 1

Related Questions