2 years ago
#44248
gkeenley
React Native material top tab navigator: how to make text equally spaced?
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:
react-native
react-navigation
tabnavigator
react-native-tabnavigator
react-navigation-top-tabs
0 Answers
Your Answer