javascript - React native bottom tab bar pushing itself up when opening keyboard - Stack Overflow

admin管理员组

文章数量:1135885

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.

1. 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.
2. As another solution, I tried to change windowSoftInputMode inside component itself. SO I have tried with this - . But no use.
3. As another one, I tried to create a TabBarComponent like mentioned here . 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
      }
    }
  }
);

1. Is there any other properties existed for making the bottom tab bar sticky at the bottom? or
2. 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.

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.

1. 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.
2. 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.
3. 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
      }
    }
  }
);

1. Is there any other properties existed for making the bottom tab bar sticky at the bottom? or
2. 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.

• javascript
• android
• react-native
• bottomnavigationview

Share Improve this question Follow asked Aug 19, 2019 at 9:53 Dhevendhiran MDhevendhiran M 1,26333 gold badges1616 silver badges3232 bronze badges 3

• 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 Commented Aug 19, 2019 at 9: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 Commented Aug 19, 2019 at 10:01
• createMaterialBottomTabNavigator from 'react-navigation-material-bottom-tabs' works perfectly. For more info: reactnavigation.org/docs/en/material-bottom-tab-navigator.html – hamza erguder Commented Jan 11, 2020 at 22:57

Add a comment  | 

17 Answers 17

Sorted by: Reset to default 53

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

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

The document to read here.

Update: In navigation 6.x its now tabBarHideOnKeyboard

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

Please use this on

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

I am sure it will work perfectly

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

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

android:windowSoftInputMode="adjustPan"

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

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

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

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

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

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

</Tab.Navigator>

It will work perfectly for both platforms in react native

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

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

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

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);
}, []);

To expand on mateo delat's answer, you can prevent the keyboard from pushing up items by setting the height of the screen explicitly to the display height (e.g., by using height from React Native's useWindowDimensions() hook). The tab screens outermost view was probably using flex: 1, which fills the screen but shrinks to accommodate the keyboard. So it is not that the keyboard is pushing up the tab bar, it is that the keyboard is shrinking the container from the bottom up, and the tab bar is being pulled up with it.

Also, I may have this detail wrong, but it seems you need to set the height of the outermost View. So the outermost view of a drawer, of a tab view, of a screen, etc should be set to the windowHeight. It looks like you can set intervening views to flex without issue.

check that you didn't have added keyboardVerticalOffset for KeyboardAvoidingView

after this change, my problem get solve

<KeyboardAvoidingView
    // keyboardVerticalOffset={50}
    behavior={Platform.OS == "ios" ? "height": "height"}
    style={[styles.screenstyle, this.props.styles]}>
    {...}
</KeyboardAvoidingView>

This is the bottom tab overlap the keyboard

-- To resolve the issue of the bottom tab overlapping the keyboard in a React Native CLI project, follow these steps: ::-

1. In the AllStack file, where you define <Tab.Screen>, add the following options :{{ tabBarHideOnKeyboard: true, }}.

2. and you add this android:windowSoftInputMode="adjustPan"

After making these changes, clean your project by running ./gradlew clean, and then rerun the project. This should fix the issue.

Make sure to use tabBarHideOnKeyboard: true for any tab screen where the bottom tab overlaps with the keyboard

.

I also had the same problem I solved it like this

import {Dimensions} from 'react-native'
const {width, height} = Dimensions.get('window')

Remove safeAreaView and use View in its place

Then in styling of view use:

widht: width, height: height

It will use all the width and height of the screen and hides the tab navigation bar under the keyboard

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

本文标签： javascriptReact native bottom tab bar pushing itself up when opening keyboardStack Overflow