I am trying to fix the tab bar at the bottom of the Screen in react-native, At the time of inputting some text

Question

I am trying to fix the tab bar at the bottom of the Screen in react-native, when i am inputting some text or writing something, the tab bar appears at the top of the keyboard, it is no longer being fixed at the bottom. I tried position absolute also,

here i have attached the code of which i given to tabNavigator

<Tab.Navigator
    screenOptions={{
      headerShown: false,
      tabBarActiveTintColor: '#000',
      tabBarInactiveTintColor: '#fff',
      tabBarShowLabel: true,
      tabBarStyle: {
        backgroundColor: '#327B5B',
        position: 'absolute',
        bottom: 0,
        left: 0,
        elevation: 0,
        // flex: 1,
        height: 70,
        paddingBottom: 10,
      },
    }}>

maybe this can help https://stackoverflow.com/questions/57554335/react-native-bottom-tab-bar-pushing-itself-up-when-opening-keyboard — Syed SaeedulHassan Ali, Oct 28 '21 at 08:32

danw0001 · Answer 1 · 2021-10-28T08:45:38.323

Try adding keyboardHidesTabBar option to the tabBarOptions prop. This will tell the keyboard to hide that tabBar when the keyboard is active. Here is what it should look like:

<Tab.Navigator
tabBarOptions={{
  keyboardHidesTabBar: true
}}
screenOptions={{
  headerShown: false,
  tabBarActiveTintColor: '#000',
  tabBarInactiveTintColor: '#fff',
  tabBarShowLabel: true,
  tabBarStyle: {
    backgroundColor: '#327B5B',
    position: 'absolute',
    bottom: 0,
    left: 0,
    elevation: 0,
    // flex: 1,
    height: 70,
    paddingBottom: 10,
  }
}}>

This has been answered before, but I updated the code you submitted to give you a little guidance incase you get suck!

Edit: My mistake, tabBarOptions needed to be outside of screenOptions.

I am trying to fix the tab bar at the bottom of the Screen in react-native, At the time of inputting some text

1 Answers1