TabNavigator extra padding - react-native

Question

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?

Answer 1

Solved by setting:
tabBarOptions: {
labelStyle: {
margin: 0
},
}

Answer 2

Try just style under tabBarOptions
tabBarOptions: {
style: {
height: 45
}
}

Answer 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

Answer 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
});

Answer 5

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

Answer 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.

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