'React native bottom tab bar pushing itself up when opening keyboard

We are using createBottomTabNavigator. In one of the tab contains search bar at the top. While clicking on that search bar, we are opening the keyboard. But the keyboard pushing up the bottom tab bar also. We need the bottom tab bar remains at the bottom when opening keyboard.

One of the solution I have tried is, in android manifest, I have changed android:windowSoftInputMode="adjustPan" or "adjustNothing". It is working fine as expected. But we are using chat layout in another tab which needs "adjustResize". So I have to keep "adjustResize" for windowSoftInputMode.
As another solution, I tried to change windowSoftInputMode inside component itself. SO I have tried with this - https://www.npmjs.com/package/react-native-android-keyboard-adjust. But no use.
As another one, I tried to create a TabBarComponent like mentioned here https://github.com/react-navigation/react-navigation/issues/618. But not working as expected.

const SignedIn = createBottomTabNavigator(
  {
    Followers: {
      screen: FollowerStack,
      ...
    },
    Search: {
      screen: SearchStack,
    },
    Home: {
      screen: HomeStack,
    },
    Bookmarks: {
      screen: BookmarkStack,
    },
    Profile: {
      screen: ProfileStack,
    }
  },
  {
    initialRouteName: "Home",
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    tabBarOptions: {
      keyboardHidesTabBar: true,
      showIcon: true,
      showLabel: false,
      activeTintColor: "red",
      inactiveTintColor: "gray",
      adaptive: true,
      safeAreaInset: {
        bottom: "always"
      },
      style: {
        position: 'relative',
        backgroundColor: "#F9F8FB",
        height: TAB_NAVIGATOR_DYNAMIC_HEIGHT,
        paddingTop: DeviceInfo.hasNotch() ? "5%" : "0%",
        minHeight: TAB_NAVIGATOR_DYNAMIC_HEIGHT,
        width: '100%',
        bottom: 0
      }
    }
  }
);

Is there any other properties existed for making the bottom tab bar sticky at the bottom? or
Is it possible to change the android manifest windowSoftInputMode from inside component? Please comment below if you required any other code part for reference. Thanks for any help.

Solution 1:^[1]

I used React navigation 5, is this what you want?

<SignedIn.Navigator 
   tabBarOptions={{
      keyboardHidesTabBar: true
   }}         
}>
</SignedIn.Navigator>

The document to read here.

Solution 2:^[2]

Just go to AndroidManifest.xml file and change/add inside activity tag:

android:windowSoftInputMode="adjustPan"

Solution 3:^[3]

Please use this on

<Tab.Navigator
screenOptions={{
    tabBarHideOnKeyboard: true
 }}
/>

I am sure it will work perfectly

Solution 4:^[4]

I was having the exact same issue. Following are the two ways I successfully tackled it.

adding "softwareKeyboardLayoutMode":"pan" to the app.json like below

"android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "softwareKeyboardLayoutMode":"pan"
    }

by doing this, the bottom navigator was staying hidden behind the keyboard. however, the ScrollView containing TextInputs was not working the way I wanted it to. the whole app screen was getting translated by the height of the keyboard, hiding half of my ScrollView and everything above it (Header and stuff).

The second workaround I used is using useKeyboard hook. step 1: remove "softwareKeyboardLayoutMode" so that it defaults to height (this causes the CustomBottomTabNav to rise above the keyboard as the whole screen gets squeezed in the remaining height) step 2: dynamically reset the position of CustomBottomTabNav when the keyboard is active.

In the screen containing TextInputs

<ScrollView style={{ height: keyboard.keyboardShown? 510 - keyboard.keyboardHeight: 510}}>
/* lots of text inputs*/
</ScrollView>

In the CustomBottomTabNav

tabBarOptions={{
    ...otherStuff,
    style={{ bottom: keyboard.keyboardShown? -100: -10, ...otherStuff}}
}}

This second method is working much more reliably. I tried keyboardAvoidingView but was unable to wrap my head around its unpredictable behavior.

Solution 5:^[5]

I got solution for this problem. Previously, I have done a minor mistake while configuring 'react-native-android-keyboard-adjust'. Now it is working fine. So we can change the 'windowSoftInputMode' for a particular component using this library - https://www.npmjs.com/package/react-native-android-keyboard-adjust

Solution 6:^[6]

Found it, just add your bottom navigation into a view making that view of dimensions of the screen, this way:

import React from 'react'
import { StyleSheet, Text, View, Dimensions } from 'react-native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const { width, height } = Dimensions.get("window")
const Tab = createBottomTabNavigator()

export default function () {
    return (
        <View style={{
            width,
            height,
        }}>
            <Tab.Navigator>
                <Tab.Screen
                    name="Screen1"
                    component={Component}
                />
                <Tab.Screen
                    name="Screen2"
                    component={Component}
                />
                <Tab.Screen
                    name="Screen3"
                    component={Component}
                />
            </Tab.Navigator>
        </View>
    )
}

Solution 7:^[7]

If you are using a TextInput in the search bar you could hide the bottom tab when TextInput is focused (and the keyboard shows) like so:

const [searchBarFocused, setSearchBarFocused] = useState(false)

In the markup:

<TextInput
onFocus = {()=> setSearchBarFocused(true)}
onBlur = {()=> setSearchBarFocused(false)}
 /> 

//Other code

{!searchBarFocused && <CustomBottomTab/>}

For finegrained control put a ref on the textInput to blur/focus and what not programmatically.

Also, you can check out RN:s KeyboardAvoidingView

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Chanrithisak PHOK
Solution 2	Idan
Solution 3	Suraj Rao
Solution 4
Solution 5	Dhevendhiran M
Solution 6	mateo delat
Solution 7

'React native bottom tab bar pushing itself up when opening keyboard

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]