Adding margin/padding to react navigation tabs causes contents to overflow

Question

labelStyle applied as below causes a gap at the top:

const tabNavigator = createBottomTabNavigator(
  {
    HomeStack,
    RecipesStack,
    FavoriteStack,
    ProductsStack,
  },
  {
    tabBarOptions: {
      activeBackgroundColor: '#8BC540',
      inactiveBackgroundColor: '#349746',
      activeTintColor: '#F5F4F4', // tab text color
      inactiveTintColor: '#F5F4F4',
      // This messes up the bottom bar
      labelStyle: {
        marginTop: 15,
        marginBottom: 4,
      },
    },
  }
);

Here's how it looks:

I'd like to add padding above icons, between the label and icons and below label.

Answer 1

As far as I can tell this was being caused by fact that I wrapped my app with SafeAreaView.

Once I removed SafeAreaView, the style below worked:

tabBarOptions: {
      activeBackgroundColor: '#8BC540',
      inactiveBackgroundColor: '#349746',
      activeTintColor: '#F5F4F4', // tab text color
      inactiveTintColor: '#F5F4F4',
      tabStyle: {
        paddingTop: 10,
      },
      style: {
        height: 58,
      },
      labelPosition: 'below-icon',
      labelStyle: {
        marginTop: 5,
        marginBottom: 4,
      },
    }