React native bottom tab bar pushing itself up when opening keyboard

Question

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.

Do you want the bottom tab bar to remain visible, but below the keyboard, or for the keyboard slide over the top of the tab bar and hide it (i.e. a modal view)? — SJT, Aug 19 '19 at 09:57
Thanks fo the reply. Any of the solutions is accepted. Yeah I can say, I need to hide the bottom tab bar when keyboard opens. — Dhevendhiran M, Aug 19 '19 at 10:01
createMaterialBottomTabNavigator from 'react-navigation-material-bottom-tabs' works perfectly. For more info: https://reactnavigation.org/docs/en/material-bottom-tab-navigator.html — hamza erguder, Jan 11 '20 at 22:57

score 45 · Answer 1 · answered Jun 16 '20 at 07:13

45

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

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

The document to read here.

answered Jun 16 '20 at 07:13

Chanrithisak Phok

1,590
1
19
29

8

It works with the default `tabBar` but when I provide my own `tabBar` (i.e.do something like this: `tabBar={(props) => `), it does not work. Any solutions for that? – Amin Dannak Aug 25 '20 at 06:14
@AminDannak can you give more details about your own customization tab bar? – Chanrithisak Phok Sep 08 '20 at 07:21
@Pok something like this: https://dev.to/baptistearnaud/animated-sliding-tab-bar-in-react-native-58pb – Amin Dannak Sep 08 '20 at 19:15
@AminDannak can you share a snippet of your source code, I can't debug your code just by knowing a few pieces of your code lines. – Chanrithisak Phok Dec 18 '20 at 03:06

score 18 · Answer 2 · edited Nov 22 '21 at 14:09

18

Please use this on

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

I am sure it will work perfectly

edited Nov 22 '21 at 14:09

Suraj Rao

29,388
11
94
103

answered Nov 22 '21 at 14:07

Mian Muhammad Ramzan

223
2
8

tabBarHideOnKeyboard: true use this in – Mian Muhammad Ramzan Nov 22 '21 at 14:09
1

You can use [edit] link below your post to change or update your answer – Suraj Rao Nov 22 '21 at 14:09
This is the correct option for React Navigation v6.x – Liam Clark Gutiérrez Jan 27 '23 at 10:04
That was useful to avoid the double tapping! – Andrés López Ferro Feb 14 '23 at 23:19

score 8 · Answer 3 · answered Aug 19 '19 at 10:01

8

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

android:windowSoftInputMode="adjustPan"

answered Aug 19 '19 at 10:01

Idan

3,604
1
28
33

2

We have tried. It is working fine. But we have to use "adjustResize", because we are using chat layout in another tab. If I use "adjustPan", In the chat layout page, the whole view pushing up even with the header. So we have to use "adjustResize". Is there any other solutions? If we can contact you privately please provide your contact on any social media – Dhevendhiran M Aug 19 '19 at 10:06
what about `android:windowSoftInputMode="adjustPan|adjustResize"` in your case? – Idan Aug 19 '19 at 10:15
In this case, it is taking the behaviour of "adjustPan" only. Only with "adjustPan" and "adjustPan|adjustResize" both are giving "adjustPan" behaviour only. – Dhevendhiran M Aug 19 '19 at 10:20

score 6 · Answer 4 · answered Nov 04 '21 at 17:48

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>
    )
}

Why is this working perfectly? i have no idea but it is working like magic — prince david, Nov 01 '22 at 09:47
Waaaooow! You saved me. It works but I do not know why. This problem took my hours — suyuti, Dec 17 '22 at 15:11

Suraj Ingle · Answer 5 · 2021-03-29T19:15:22.200

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.

I understand that it has been 1 year+ since this question was asked, but I'm answering for future devs having similar issue — Suraj Ingle, Mar 29 '21 at 19:13

score 3 · Answer 6 · edited Aug 18 '22 at 11:24

screenOptions={{
          headerShown: false,
          tabBarActiveTintColor: '#1a3c43',
          tabBarInactiveTintColor: '#1a3c43',
          tabBarActiveBackgroundColor: 'white',
          tabBarInactiveBackgroundColor: '#1a3c43',
         
          tabBarHideOnKeyboard: true,
   
          tabBarstyle: {
              backgroundColor: '#1a3c43',
              paddingBottom: 3
          }
      }}

Shraddha Muley · Answer 7 · 2023-03-13T07:09:19.440

Add below code in AndroidManifest.xml

android\app\src\main\AndroidManifest.xml

<application
      <!--//......-->
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
         <!-- android:windowSoftInputMode="adjustResize" Change to the following -->       
        android:windowSoftInputMode="stateAlwaysHidden|adjustPan">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

Run this command inside android folder

cd android && ./gradlew clean

and make build again

npx react-native run-android

kiran mohanty · Answer 8 · 2022-08-24T04:35:41.740

1

<Tab.Navigator screenOptions={{ tabBarHideOnKeyboard: Platform.OS!== 'ios'}}>

</Tab.Navigator>

It will work perfectly for both platforms in react native

edited Aug 24 '22 at 04:35

answered Aug 24 '22 at 04:35

kiran mohanty

19
2

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – ethry Aug 28 '22 at 05:01

score 0 · Answer 9 · answered Aug 19 '19 at 11:45

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

Max · Answer 10 · 2022-03-15T11:22:16.637

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

score 0 · Answer 11 · answered Sep 01 '22 at 13:01

I doubt this question is ever going to be closed but in case someone stumbles over this problem and needs an answer, I'd recommend looking through the following thread:

https://github.com/react-navigation/react-navigation/issues/6700

Tl;Dr When supplying the framework with a custom navbar, you have to take care of the hiding of the said bar on keyboard opening. This is because it is the default android behaviour.

So either change the manifest configuration as the author already described as his first solution that didn't work.

OR modify your component to listen to the react-natives KEYBOARD. keyboardDidShow & keyboardDidHide Events and either move it down with bottomMargin: -XYZ or hide it completely with a flag.

following two responses on github helped me:

https://github.com/react-navigation/react-navigation/issues/6700#issuecomment-625985764

https://github.com/react-navigation/react-navigation/issues/618#issuecomment-303975621

In case someone wnats to use my code as a reference

interface BottomTabStateProps {
// unrelated Props
}

interface BottomTabDispatchProps {
// unrelated service dispatchers
}

interface BottomTabState {
    navVisible: boolean;
}

class BottomTabContainerClass extends React.Component<
    BottomTabStateProps & BottomTabDispatchProps & NavigationInjectedProps, BottomTabState
> {

    constructor(props: BottomTabStateProps & BottomTabDispatchProps & NavigationInjectedProps) {
        super(props);

        this.state = {
        navVisible: true
        };
    }

    componentDidMount() {
        Keyboard.addListener('keyboardDidShow', () => this.keyboardDidShow());
        Keyboard.addListener('keyboardDidHide', () => this.keyboardDidHide());
    }

    componentWillUnmount() {
        Keyboard.removeAllListeners('keyboardDidShow');
        Keyboard.removeAllListeners('keyboardDidHide');
    }


    keyboardDidShow() {
        this.setState({ navVisible: false });
    }

    keyboardDidHide() {
        this.setState({ navVisible: true });
    }

    render() {

        return (
            <View>
                {
                    this.state.navVisible &&
                    <View>
                          // add custom Navbar here
                    </View>
                }
            </View>
        );
    }
}

score 0 · Answer 12 · answered Mar 24 '23 at 19:37

0

For me this package was the solution, you can change the windowSoftInputMode as you need inside a react component.

https://www.npmjs.com/package/react-native-android-keyboard-adjust

answered Mar 24 '23 at 19:37

Amir

349
3
4

score 0 · Answer 13 · answered Aug 23 '23 at 16:31

My solution: I use android:windowSoftInputMode="adjustResize" (see AndroidManifest.xml) to bring expected behavior, but in some cases, I don't want the keyboard to push the view up when it appears. To avoid the keyboard pushing the whole tab bar and swiper up, I prevent view resizing by giving it a fixed height and width.

On TabBar navigator:

const { height, width } = useWindowDimensions();
const [isPreventResizing, setPreventResizing] = useState(false);

useEffect(() => {
   SharedEventEmitter.addListener(ON_PREVENT_ADJUST_RESIZING, (payload: boolean) => {
      const isPrevent = Platform.OS === 'android' && payload;
      setPreventAdjustResizing(isPrevent);
   });

return SharedEventEmitter.remove;
}, [])

return (
   <View style={isPreventResizing ? { height, width } : { flex: 1 }}>
    <Tab.Navigator>
      <Tab.Screen name={'Home'} component={HomeScreen} />
      <Tab.Screen name={'Chat'} component={ChatScreen} />
      <Tab.Screen name={'Profile'} component={ProfileScreen} />
    </Tab.Navigator>
   </View>
);

On Chat screen:

useLayoutEffect(() => {
    SharedEventEmitter.emit(ON_PREVENT_ADJUST_RESIZING, true);

    return () => SharedEventEmitter.emit(ON_PREVENT_ADJUST_RESIZING, false);
}, []);

React native bottom tab bar pushing itself up when opening keyboard

13 Answers13

Linked