React Native Component moves up with keyboard

Question

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.

Answer 1

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

1. hide the bottom TabBar when keyboard is opening

• To hide TabBar when keyboard apprears there is one property that is provided by the react navigation itself is tabBarHideOnKeyboard.
• With this you can manage the visibility of TabBar when keyboard state changes.

eg.

<Tab.Navigator
  screenOptions={{
    tabBarHideOnKeyboard: true,
  }}
>
  {/** TabBar screens here */}
</Tab.Navigator>

2. manage the windowSoftInputMode in your AndroidManifest file.

• This will be the change in Native Code in the AndroidManifest.xml file
• This will require to reinstall the android app

eg.

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