How to vertically centre tabs inside tab bar in react native

I've created a navigator in react native using createBottomTabNavigator from https://reactnavigation.org/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>  );};