CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Arnaud P
Arnaud P

Reputation: 117

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

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

The navbar in red should disappear when the keyboard appears.

Upvotes: 2

Views: 1585

Answers (2)

maXX
maXX

Reputation: 166

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>

Upvotes: 2

Shivam
Shivam

Reputation: 2359

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

Upvotes: 1

Related Questions