How can I change the height of the tabs in MaterialTopTabNavigator?-CodePudding

Currently the tabs are set at a fixed size, leaving a lot of white space above them.

I'd like to be able to adjust the height of the tabs.

The only height setting I can find in the source code is for the size of the icon.

How can I change the height of the tabs?

CodePudding user response：

You can pass styles to the navigator as displayed in this example from their documentation.

    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: { fontSize: 12 },
        tabBarStyle: { backgroundColor: 'powderblue' },
      }}

CodePudding user response：

Option 1:

tabBarStyle= { backgroundColor: 'powderblue', height: <SPECIFY HEIGHT> }

I think this should work.

Option 2:

tabBarContentContainerStyle= {height: <SPECIFY HEIGHT>}

You can pass the style object for the view containing the tab items.

Option 3:

tabBar={() => return <></>}

You can also pass a completely different element for the tab bar using the param tabBar.