CODEWITHSUNDEEP
react-nativereact-native-tabnavigatorreact-native-tab-view
Sajad
Sajad

Reputation: 1

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

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

Upvotes: 0

Views: 2642

Answers (1)

danw0001
danw0001

Reputation: 93

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.

Upvotes: 0

Related Questions