How to make my bottom navbar disappear when the keyboard is appearing React Native Navigation

Question

When I click on a text input and the keyboard pops up, how do I make the navbar disappear/hide?

The navbar in red should disappear when the keyboard appears.

Answer 1

Use keyboardHidesTabBar: true inside tabBarOptions it will hide bottom navigation bar when keyborad is open.

Answer 2

Just be careful, that if you are using React Navigation 6x whole tabBaroptions prop was removed and options were renamed.

see docs below:

https://reactnavigation.org/docs/upgrading-from-5.x/#the-tabbaroptions-prop-is-removed-in-favor-of-more-flexible-options-for-bottom-tabs

keyboardHidesTabBar -> tabBarHideOnKeyboard

You have two options in your tab Navigator:

screenOptions => works for all screens inside navigator, no need to define options

<Tab.Navigator screenOptions={{tabBarHideOnKeyboard: true}}>
<Tab.Screen name={"my first screen"} /> 
<Tab.Screen name={"my second screen"} /> 
</Tab.Navigator>

options => works only for current screen

<Tab.Navigator>
<Tab.Screen name={"my first screen"} options={{tabBarHideOnKeyboard: true}}/> 
<Tab.Screen name={"my second screen"} /> 
</Tab.Navigator>