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.
How to make my bottom navbar disappear when the keyboard is appearing React Native Navigation
Viewed 388
2 Answers
Use keyboardHidesTabBar: true inside tabBarOptions it will hide bottom navigation bar when keyborad is open.
Just be careful, that if you are using React Navigation 6x whole tabBaroptions prop was removed and options were renamed.
see docs below:
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>
Related