gkeenley
gkeenley

Reputation: 7398

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:

enter image description here

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:

enter image description here

Upvotes: 2

Views: 1285

Answers (0)

Related Questions