How to vertically centre tabs inside tab bar in react native

react-native-tab-view custom tab bar
react-navigation custom tab bar
react-navigation tab bar height
react-native tab bar color
react native animated-tabs
bubble-tab bar react-native
react-navigation-tabs - npm

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

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 />

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

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

Center the tabs of a TabBar · Issue #380 · react-native-community , Hi, I use your TabBar component with react-navigation and I am trying to center my tabs in the tab bar. Expected behaviour Actual behaviour  However, the List component is not vertically aligned: The List has a yellow background that doesn't appear in the screenshot. That shows that it's totally covered by the image and the text. However, these are not centered vertically.

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!

createBottomTabNavigator, A simple tab bar on the bottom of the screen that lets you switch between To use this navigator, ensure that you have @react-navigation/native and its import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; If false , tab icons and labels align vertically all the time ( labelPosition: 'below-icon' ). This is an example of Tab View inside Navigation Drawer / Sidebar with React Navigation in React Native. We will use react-navigation to make a navigation drawer and Tab in this example. I hope you have already seen our post on React Native Navigation Drawer because in this post we are just extending the last post to show the Tab View inside

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

Tab navigation, This can be tabs on the bottom of the screen or on the top below the header (or even instead of a header). import { NavigationContainer } from '@react-​navigation/native'; The size is the size of the icon expected by the tab bar. can tap on a tweet and it brings you to a new screen within that tab with all of the replies. Well, you can vertically center objects in a simple manner with the help of default Bootstrap and simple HTML. Animated sliding tab bar in React Native using react-navigation and Animated API. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.

20 React Native Tabs Component Example, An extension to react-native-tab-view which provides a vertical tab bar . To show scrollable tabs .this component is a custom component of the And what's more,solved the problem overflow parent hidden on the android,also it can be defined center All the children inside Tabbar component will be rendered inside of it. One of the best use cases for the vertical tabs is when the device is used in landscape mode, you shift the tabs from the bottom to the left. Check out react-native-orientation for help getting the orientation setup, then look at an implementation like this:

How to Combine Bottom Tabs, Top Tabs and a Hamburger Menu in , This will give you the hamburger menu and the bottom tabs and as the name might <Text style={styles.welcome}>Welcome to React Native! justifyContent: 'center', from the swipe gesture we will allow the user to access it from the nav bar later. Within each tab we have added a couple components. React Native Top Tab Navigator Example. Let's create a top tab navigator with custom status bar and header section. In this example, we will create three different screens for "Home", "Profile" and "Settings" router. Each router screens are created in separate files. The directory structure of the application. Create a src directory in your

React Native: Tab bar is customizable, In the gif located at the top, we can see smooth animation with special effect, I don't know yet, how to reproduce effect but, don't accent mind now  With this ‘non-native’ scroll established, we can begin to define color animations. Tab Colors. Animating the actual color of the tabs is a slight challenge, since the UI code for the tabs is located in the Native Base module. Fortunately, they expose a prop called renderTab that allows you to customize how tabs are rendered:

  • Thanks for the reply. I was thinking about it, but the question is how? All I have is const App = createAppContainer(TabNavigator);