React TabBar Bottom Border
I am using React Navigation with React Native. It's on Android.
-
I am trying to add some spacing between the icon and the top of the tab bar and reduce the distance between the icon and the label.
-
I am trying to change the color of the bottom border i.e. yellow.
-
I am trying to decrease the spacing, fill left and right inside each cell.
Any idea how I can achieve this?
{
tabBarPosition: 'bottom',
animationEnabled: true,
swipeEnabled: true,
tabBarOptions: {
showIcon: true,
labelStyle: {
fontSize: 8
},
style: {
backgroundColor: 'grey',
},
tabStyle: {
height: 49
},
iconStyle: {
flexGrow: 0,
marginTop: 1.5
}
}
}
source to share
Regarding the first issue about the distance between the icon and the top of the tab bar, you can add an addition to the property tabStyle
in tabBarOptions
:
tabBarOptions: {
tabStyle: {
paddingVertical: 5
}
}
To reduce the space between the icon and the label, you can add some Icon
addition or markup to your object :
tabBarIcon: ({ tintColor }) => {
return <Icon containerStyle={{ marginTop: 6 }} name="map" size={25} color={tintColor} />;
},
About active yellow line issue on Android you can change background color property like transparent
or set 0
for height:
tabBarOptions: {
indicatorStyle: {
height: 0
}
}
And for the last problem about the space between cells, I don't think there is a solution at the moment.
You can try to make the navigation smaller (for example:) width: '80%'
... this will set the cells closer together ... but I've never tried this and I'm not sure if it's a good solution;)
source to share