javascript - How to vertically centre tabs inside tab bar in react native - Stack Overflow

admin管理员组

文章数量:1340773

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

Share Improve this question Follow edited Jan 10, 2019 at 16:54 HTB asked Jan 9, 2019 at 17:58 HTBHTB 44311 gold badge99 silver badges2222 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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
        },
      }}
    >

本文标签： javascriptHow to vertically centre tabs inside tab bar in react nativeStack Overflow