Reputation: 7398
I'm using "@react-navigation/material-top-tabs": "^5.1.7"
in my React Native app, and have the following top tab navigator:
The individual tabs are equal width, but each word is a different length, which means that there's unequal space between each word. I want to make it so that there is equal spacing around each word. Here is my code that I'm using for the navigator. The style
property in tabBarOptions
is the parent container with the red border, and the tabStyle
property is the child containers with the yellow borders:
const CallsRequestsNavigatorOuter = () => createMaterialTopTabNavigator(
{
'Waiting': {screen: Waiting},
'Active': {screen: Active},
'Cleared': {screen: Cleared},
'All': {screen: All},
},
{
initialRouteName: "All",
tabBarOptions: {
style: {
backgroundColor: 'transparent',
borderTopWidth: 0,
width: Math.round(Dimensions.get('window').width) - 100,
left: 50,
right: 0,
shadowOpacity: 0,
elevation: 0,
borderWidth: 1,
borderColor: 'red'
},
upperCaseLabel: false,
tabStyle: {
padding: 0,
justifyContent: 'center',
height: 0.45*topSwooshAspectRatio*Math.round(Dimensions.get('window').width),
borderWidth: 1,
borderColor: 'yellow',
},
labelStyle: {
fontSize: normalizeFontSize(13)
},
indicatorStyle: {
backgroundColor: 'transparent',
},
activeTintColor: Color.lightBlueOpaque,
inactiveTintColor: 'white'
}
}
)
SOLVED: add contentContainerStyle: {alignItems: 'center', justifyContent: 'space-around'}
to tabBarOptions
, and add width: 'auto'
to tabStyle
. The key is that contentContainerStyle
rather than style
is the direct parent of tabStyle
. So now I have this:
Upvotes: 2
Views: 1285