CODEWITHSUNDEEP
javascriptreact-nativeandroid-softkeyboardreact-navigation-bottom-tabreact-native-component
MST intern 2
MST intern 2

Reputation: 83

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.

Upvotes: 0

Views: 353

Answers (1)

Vicky Ahuja
Vicky Ahuja

Reputation: 1214

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>
  1. 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
>

Upvotes: 2

Related Questions