React Native Component moves up with keyboard

Issue

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

• 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
>

Answered By - Vicky Ahuja