title: How to vertically centre tabs inside tab bar in react native
body: <p>I've created a navigator in react native using <code>createBottomTabNavigator</code> from <a href="https://reactnavigation.org/docs/en/bottom-tab-navigator.html" rel="nofollow noreferrer">https://reactnavigation.org/docs/en/bottom-tab-navigator.html</a></p>
  
  <p>The problem I'm having is that I can't find a way to vertically centre the tabs inside the tab bar.</p>
  
  <p>As you can see in the <a href="https://i.stack.imgur.com/ejiSJ.png" rel="nofollow noreferrer">screenshot</a> 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 <code>flex:1</code> for the tab bar, it takes half of the screen, but the blue area still exists.</p>
  
  <pre><code>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,
  },
  </code></pre>
  
  <p>and this is how I create the nav bar (I removed the icons for simplicity):</p>
  
  <pre><code>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 () =&gt; { 
    return (
      &lt;SafeAreaView style={{ flex: 1, backgroundColor: 'red' }}&gt;
        &lt;App /&gt;
      &lt;/SafeAreaView&gt;
    );
  };
  </code></pre>