javascriptreact-nativeandroid-softkeyboardreact-navigation-bottom-tabreact-native-component

React Native Component moves up with keyboard


I create a custom bottom tab bar and fix it at end of screen using position: 'absolute', and bottom: 0,.



I also have a textinput for search. When I try to type something in search, keyboard appears and with keyboard my bottom tab bar moves up.



Now, I want that the bottom tab bar not move with keyboard, it will stay on its place at bottom of screen.


Solution

  • Basically, There are two ways to handle this kind of situation.

    1. hide the bottom TabBar when keyboard is opening

    eg.

    <Tab.Navigator
      screenOptions={{
        tabBarHideOnKeyboard: true,
      }}
    >
      {/** TabBar screens here */}
    </Tab.Navigator>
    
    1. manage the windowSoftInputMode in your AndroidManifest file.

    eg.

    <activity
        android:name=".MainActivity"
        ...other_props
        android:windowSoftInputMode="adjustPan" // make changes accordingly
    >