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

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.

CodePudding user response：

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

CodePudding user response：

Use keyboard 'KeyboardAvoidingView'

For further detail -

https://reactnative.dev/docs/keyboardavoidingview