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

Issue

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.

Solution

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>

Answered By – maXX

Answer Checked By – Candace Johnson (BugsFixing Volunteer)