Animate bottom navigation bar with Animated.View

Question

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>

you can pass the `tabBar` prop to the tab navigator, which allows you to pass in a custom component. Have you experimented with that at all? — Abe, Jun 01 '22 at 23:15
That's an option, but it means recreating the whole navigation component, seems excessive — Idan, Jun 09 '22 at 16:06

score 2 · Accepted Answer · answered Jun 10 '22 at 06:19

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>

Is there a way to accomplish this fading animation in React Native Navigation **v6**? — The Grindfather, Sep 01 '23 at 17:42

Animate bottom navigation bar with Animated.View

1 Answers1