TabNavigator extra padding
Solution 1
Solved by setting:
tabBarOptions: {
labelStyle: {
margin: 0
},
}
Solution 2
Try just style
under tabBarOptions
tabBarOptions: {
style: {
height: 45
}
}
Solution 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
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
});
Somename
Interested in building responsive database driven websites and application. Beginner level but quick learner.
Updated on July 21, 2022Comments
-
Somename almost 2 years
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
iniconStyle
and also intabStyle
but no luck. I want no padding below thelabel
too. How do I do that? Thanks.Found the extra padding is caused by
View
:How do i get rid of that?
-
Somename over 6 yearsThat reduced the height and shifted the TabBar to the bottom. The tabbar is now cut. The extra padding is still there. I also tried:
paddingHorizontal:0, paddingVertical:0
but doesn't work. -
BrandonWMA about 2 yearsNOTE - Setting paddingBottom to 0 does not remove the problem for me. I had to set it to a negative value.