Prevent Tab Bar from being pushed up by keyboard in react Native

Question

I have a problem similar to this in which the bottom Tab Bar is a custom component passed to React Navigation bottom Tab Navigator and I want to prevent it from being pushed up when the virtual keyboard pops up, which means the opposite to keyboardAvoidingView.

Tab Navigator

    <Tab.Navigator
      tabBar={(props) => <NavBar {...props} />}
      screenOptions={{
        tabBarHideOnKeyboard: true,
        headerShown: false,
      }}
     >
      <Tab.Screen name="Timeline" component={TimelineScreen} />
      <Tab.Screen name="Goals" component={GoalScreen} />
      <Tab.Screen name="Notes" component={NoteScreen} />
      <Tab.Screen name="Schedule" component={ScheduleScreen} />
    </Tab.Navigator>

The NavBar component just contains a simple view container with no keyboard avoiding view anywhere

Note: The tabBarHideOnKeyboard: false works for the default tab bar but not the custom one.

score 0 · Accepted Answer · answered Jun 15 '22 at 07:49

0

Got the answer.... Here
It just suggests wrapping the whole navigator in a fulll screen view.

answered Jun 15 '22 at 07:49

Someone

350
3
13

score -3 · Answer 2 · answered Jun 14 '22 at 18:57

-3

Use keyboard 'KeyboardAvoidingView'

For further detail -

https://reactnative.dev/docs/keyboardavoidingview

answered Jun 14 '22 at 18:57

Ram Sagar

5
3

I am asking for the view "Not to avoid" the keyboard I want to prevent it from moving up when the keyboard pops up. – Someone Jun 15 '22 at 07:40

Prevent Tab Bar from being pushed up by keyboard in react Native

2 Answers2