How to hide react bottom navigation without showing animation?

Question

Bottom navigation tabs don't hide without animation. Whenever I use the text input in react native bottom navigation tab is pushed up by the keyboard. That was somewhat solved by using:

screenOptions={{

tabBarHideOnKeyboard: true,

}}

However, even after trying that bottom tab is seen for a moment. Is there a way to not see that bottom tab or turn off that bottom tab appearing and disappearing animation? I'm using react-navigation bottom tabs.

Answer 1

work for me

  import { useLayoutEffect } from 'react';
    import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
    
    function Screen({ navigation }) {
      const tabBarHeight = useBottomTabBarHeight();
    
      useLayoutEffect(() => {
        navigation.setOptions({
          tabBarStyle: { display: 'none', height: 0, overflow: 'hidden' },
          tabBarHideOnKeyboard: true,
        });
      }, [navigation]);
    
      // render your screen's content here .....................
    
      return null;
    }