Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

  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.
like image 708
Dhevendhiran M Avatar asked Aug 19 '19 09:08

Dhevendhiran M


People also ask

How do I stop keyboard pushing layout up in Android React Native?

Use android:windowSoftInputMode="adjustResize". KeyboardAvoidingView and other keyboard-related components don't work quite well if you have "adjustPan" set for your android:windowSoftInputMode in AndroidManifest. xml . Instead, you should use "adjustResize" and have a wonderful life.

How do you move a view up when keyboard appears React Native?

android:windowSoftInputMode="adjustPan" will make the Main activity view PAN move (i.e. be translated) outside of the screen! Use "adjustResize" if you want your components to resize (e.g. put one <View> with style={{flex:1}} and it will be the one that resizes when the keyboard is visible).


4 Answers

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

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

The document to read here.

like image 185
Phok Chanrithisak Avatar answered Oct 23 '22 01:10

Phok Chanrithisak


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

android:windowSoftInputMode="adjustPan"
like image 30
Idan Avatar answered Oct 23 '22 01:10

Idan


Please use this on

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

I am sure it will work perfectly

like image 10
Mian Muhammad Ramzan Avatar answered Oct 23 '22 02:10

Mian Muhammad Ramzan


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

like image 3
mateo delat Avatar answered Oct 23 '22 03:10

mateo delat