Hide bottom bar without resize lag

Question

I want to hide the bottom navigation bar in when a specified action is triggered by code. Everything seems to work as expected except with the version I am currently having the UI lags a bit and after a second the screen is expanding and taking the space of the bottom navigation bar. I think the best approach would be to be able to dynamically set the height of the bottom navigation bar while hiding and between for instance 0 to 60 height. But it doesn't let me animate the height of the bottom bar with the reason:

Error: Style property 'height' is not supported by native animated module

Do you have any ideas how I can smoothly hide and show the bottom navigation bar while being on the screen? I want to include a webview into the screen and if a subdomain is opened the bottom nav bar should hide. Here is my current code to handle this problem that is not working:

    const App = () => {
  const [tabBarHeight] = useState(new Animated.Value(60)); // Initial height of the tab bar

  const hideBottomBar = () => {
    console.log('hideBottomBar');
    Animated.timing(tabBarHeight, {
      toValue: 0,
      duration: 300,
      useNativeDriver: false
    }).start();
  };

  const showBottomBar = () => {
    console.log('showBottomBar');
    Animated.timing(tabBarHeight, {
      toValue: 60, // Adjust this value to the height you need
      duration: 300,
      useNativeDriver: false,
    }).start();
  };

  return (
    <NavigationContainer>
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
        <Animated.View style={{ flex: 1 }}>
            <Tab.Navigator
              screenOptions={{
                headerShown: false,
                tabBarStyle: { backgroundColor: "green", height: tabBarHeight},
              }}
            >
            <Tab.Screen name="Home" component={HomeScreen} />
            <Tab.Screen name="Business" component={BusinessScreen} />
            <Tab.Screen name="School">
              {() => <SchoolScreen hide={hideBottomBar} show={showBottomBar} />}
            </Tab.Screen>
          </Tab.Navigator>
          </Animated.View>
        </View>
      </SafeAreaView>
    </NavigationContainer>
  );
};

I am running on React Native 0.74.2

Answer 1

Instead of using height of Tab.navigator you can also use a custom

 const renderTabBar = (props: React.JSX.IntrinsicAttributes & BottomTabBarProps & { style?: false | RegisteredStyle<ViewStyle> | Animated.Value | Animated.WithAnimatedObject<ViewStyle> | Animated.AnimatedInterpolation<string | number> | Animated.WithAnimatedArray<ViewStyle | Falsy | RegisteredStyle<ViewStyle> | RecursiveArray<ViewStyle | Falsy | RegisteredStyle<ViewStyle>> | readonly (ViewStyle | Falsy | RegisteredStyle<ViewStyle>)[]> | null | undefined; }) => (
<Animated.View style={[styles.tabBar, { transform: [{ translateY }] }]}>
  <BottomTabBar {...props} />
</Animated.View>);

This tab bar you can use in your tab.navigator with

tabBar={(props) => renderTabBar(props)}

And by using the transform property of the Animated.View you can easily animate the tab bar hiding or showing it with those two methods:

const hideBottomBar = () => {
Animated.timing(translateY, {
  toValue: 100, // adjust this value to the height of the tab bar
  duration: 300,
  useNativeDriver: true,
}).start();}; 

and

const showBottomBar = () => {
Animated.timing(translateY, {
  toValue: 0,
  duration: 300,
  useNativeDriver: true,
}).start();};