'TabNavigator extra padding

How to style the TabNavigator Tab's height and padding? Im doing the following:

import Icon from "react-native-vector-icons/MaterialIcons";
const tabNav = TabNavigator({
  TabItem1: {
      screen: MainScreen,
      navigationOptions: {
          tabBarLabel:"Home",
          tabBarIcon: ({ tintColor }) => <Icon name={"home"} size={20} color={tintColor} />
      }
    },
    TabItem2: {
      screen: MainScreen,
      navigationOptions: {
        tabBarLabel:"Home",
        tabBarIcon: ({ tintColor }) => <Icon name={"home"} size={30} color={tintColor}  />
      }
    },
    TabItem3: {
      screen: MainScreen,
      navigationOptions: {
        tabBarLabel:"Browse",
        tabBarIcon: ({ tintColor }) => <Icon name={"home"} color={tintColor} />
      }
    }
}, {
    tabBarPosition: 'bottom',
    tabBarOptions: {
        activeTintColor: '#222',
        activeBackgroundColor :'yellow',  //Doesn't work
        showIcon: true,
        tabStyle: {
            padding: 0, margin:0,   //Padding 0 here
        },
    iconStyle: {
        width: 30,
        height: 30,
        padding:0       //Padding 0 here
    },
    }
});

How do I get rid of the padding between the icon and the label? I did padding:0 in iconStyle and also in tabStyle but no luck. I want no padding below the label too. How do I do that? Thanks.

Found the extra padding is caused by View:

How do i get rid of that?

Solution 1:^[1]

Solved by setting:

tabBarOptions: {
  labelStyle: {
    margin: 0
  },
}

Solution 2:^[2]

Try just style under tabBarOptions

  tabBarOptions: {
    style: {
      height: 45
    }
  }

Solution 3:^[3]

Unfortunately plenty of layout settings are hardcoded in this lib (like padding: 12 for tab which comes by default from elsewhere).

The only option is to look in node_modules\react-navigation\lib\views\TabView\ files and adjust as needed to your requirements.

Right now I'm hacking those sourses to find a quick-n-dirty way to allow rectangular (x>y), not only square (x=y, as defaulted) tab icons.

Other option is to create your custom tabBar component as maintainers suggest

Solution 4:^[4]

I just did it by looking at this page https://reactnavigation.org/docs/en/material-top-tab-navigator.html

my TabStack looks like this:

const tabBarOptions = {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,
  },
  style: {
    paddingTop: 50,
    backgroundColor: 'red',
  },
}

export const TabStack = createMaterialTopTabNavigator({
  History: History,
  Current: Current,
  Settings: Settings,
}, {
    tabBarOptions: tabBarOptions
});

Solution 5:^[5]

If you are using SafeAreaView inside your screen, remove it from root and you will be fine

Solution 6:^[6]

Ran into a similar problem today and came across this post. My issue however had a - paddingBottom: 30 - being applied to the tabBarStyle.

I did not want to overwrite the package files since it could either lead to unforeseen issues elsewhere or it will be overwritten in future updates.

I simply set the value to it's negative to bring the overall padding being applied to 0 - ie. paddingBottom: -30

Not sure if it'll help someone but it helped me.

Solution 7:^[7]

This is the actual way how you style your tab navigator

 const screenOptions = {
    tabBarStyle:{
      height:50,
    },
    tabBarItemStyle:{
      margin:5,
    }
  };

  <Tab.Navigator {...{ screenOptions }}>
  //Tabs Here
  </Tab.Navigator >

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Denis
Solution 2	Rami Enbashi
Solution 3	Alex Green
Solution 4	Joey Gough
Solution 5	Guvanch
Solution 6	BrandonWMA
Solution 7	Badal S

'TabNavigator extra padding

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]