I've created a navigator in react native using createBottomTabNavigator from .html

The problem I'm having is that I can't find a way to vertically centre the tabs inside the tab bar.

As you can see in the screenshot there is always that blue area at the bottom of the tabs. Even when I manually set the height for the tabs, they grow upward. If I set flex:1 for the tab bar, it takes half of the screen, but the blue area still exists.

tabBar: {
  backgroundColor: 'blue',
  borderWidth: 2,
  height: 32,
  justifyContent: 'center',
  alignItems: 'center',
  padding: 0
},
labelStyle: {
  backgroundColor: 'green',
},
tabStyle: {
  backgroundColor: 'yellow',
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  alignSelf: 'center',
  borderWidth: 1,
  borderColor: 'black',
  marginBottom: 0,
  paddingBottom: 0,
},

and this is how I create the nav bar (I removed the icons for simplicity):

const TabNavigator = createBottomTabNavigator(
  {
    screen1: { screen: screen1 },
    screen2: { screen: screen2 },
    screen3: { screen: screen3 },
    screen4: { screen: screen4 },
  },
  {
    tabBarOptions: {
      style: styles.tabBar,
      labelStyle: styles.labelStyle,
      tabStyle: styles.tabStyle
    },
  }
);

const App = createAppContainer(TabNavigator);

export default () => { 
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'red' }}>
      <App />
    </SafeAreaView>
  );
};

I've created a navigator in react native using createBottomTabNavigator from https://reactnavigation/docs/en/bottom-tab-navigator.html

The problem I'm having is that I can't find a way to vertically centre the tabs inside the tab bar.

As you can see in the screenshot there is always that blue area at the bottom of the tabs. Even when I manually set the height for the tabs, they grow upward. If I set flex:1 for the tab bar, it takes half of the screen, but the blue area still exists.

tabBar: {
  backgroundColor: 'blue',
  borderWidth: 2,
  height: 32,
  justifyContent: 'center',
  alignItems: 'center',
  padding: 0
},
labelStyle: {
  backgroundColor: 'green',
},
tabStyle: {
  backgroundColor: 'yellow',
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  alignSelf: 'center',
  borderWidth: 1,
  borderColor: 'black',
  marginBottom: 0,
  paddingBottom: 0,
},

and this is how I create the nav bar (I removed the icons for simplicity):

const TabNavigator = createBottomTabNavigator(
  {
    screen1: { screen: screen1 },
    screen2: { screen: screen2 },
    screen3: { screen: screen3 },
    screen4: { screen: screen4 },
  },
  {
    tabBarOptions: {
      style: styles.tabBar,
      labelStyle: styles.labelStyle,
      tabStyle: styles.tabStyle
    },
  }
);

const App = createAppContainer(TabNavigator);

export default () => { 
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'red' }}>
      <App />
    </SafeAreaView>
  );
};

• javascript
• react-native
• flexbox
• react-navigation
• tabnavigator

6 Answers 6

I found the solution myself and I'm sharing it for people who have the same problem. The reason the bottom spacing is always there is because of a prop called safeAreaInset and its default value is { bottom: 'always', top: 'never' }

All I had to do was to change the value for bottom to never and it won't add any spacing to the bottom!

This is due to icon ponent present above label. To hide icon ponent i added follow code.

tabBarOptions: {
  tabStyle: {
    justifyContent: 'center'
  },
  showIcon: false
} 

Try putting for v 6.x

tabBarStyle:{ paddingBottom: 0 }

If you not showing icon add {position: 'absolute', textAlignVertical: 'center'} in label style, example:

<Tab.Navigator
  screenOptions={{
      tabBarIconStyle: {display: 'none'},
      tabBarStyle: {
        height: 40,
      },
      tabBarLabelStyle: {
        fontSize: 20,
        position: 'absolute',
        textAlignVertical: 'center',
      },  
}}>

I think you should wrap the tab bar in a view and add justifyContent there

<Tab.Navigator
      initialRouteName="Dashboard"
      screenOptions={{
        tabBarShowLabel: true,
        tabBarStyle: styles.tabBar,
        tabBarLabelStyle: {
          fontSize: 12,
          position: "absolute",
          top: 42,//edit this relative to your icon
        },
      }}
    >