CODEWITHSUNDEEP
react-nativereact-navigationreact-native-reanimated-v2
Idan
Idan

Reputation: 5450

Animate bottom navigation bar with Animated.View

Attempting to hide/show the bottom navigation bar on React-Native app

When wrapping the navigation tab With <Animated.view> the navigation styling collapses and the bottom tab bar jumps to the top of the screen and requires much styling to put it back to to place.

Using React-Native-Reanimated is there a way to animate the bottom tab appearance?

Working example:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
...
const Tab = createBottomTabNavigator();
...
<Tab.Navigator tabBarStyle: {
      display: tabBarVisability,> 
      ... 
</Tab.Navigator>

Desired:

<Animated.View>
  <Tab.Navigator>    
  </Tab.Navigator>    
</Animated.View>

Upvotes: 1

Views: 6754

Answers (1)

Idan
Idan

Reputation: 5450

As suggested by Abe, the solution was to add the tabBar prop, wrapping the BottomTabBar with Animated.View

This is a working example:

import Animated, { FadeInUp, FadeOutDown, Layout } from 'react-native-reanimated';

import { BottomTabBar, createBottomTabNavigator } from '@react-navigation/bottom-tabs';

...

<Tab.Navigator
  ...props
  tabBar={(props) => (
    <Animated.View
      entering={FadeInUp}
      exiting={FadeOutDown}
      layout={Layout.duration(100)}
      style={{
        height: tabBarVisible ? 80 : 0,
      }}
    >
      <BottomTabBar {...props} />
    </Animated.View>
  )}
...Screens
</Tab.Navigator>

Upvotes: 2

Related Questions