Material Top Tab Navigator missing tabBarButton option

[nelsonchen5]

There is currently no tabBarButton under the options prop for createMaterialTopTabNavigator, is there any other way to customize or style the individual tabs on the tab bar (besides label and icon) without recreating an entirely customized TabBar?

[DnEgorWeb]

Hello, @nelsonchen5! If you want to customise appearance of your tabs you can pass tabBarLabel to the options of your screens as a function returning JSX instead of a string. Like that:

{TABS.map(tab => (
  <Tab.Screen
    key={tab.name}
    name={tab.name}
    component={YourComponent}
    options={{
       title: tab.name,
       tabBarLabel: () => (
         <View style={styles.tabBarLabelContainer}>
          <Text>{tab.name}</Text>
          <Text>{/* Some additional info goes here */}</Text>
          {/* Pass any other components here */}
         </View>
       )
    }}
  />
))}

And after that you can additionally customise bottom indicator via tabBarOptions --> indicatorStyle

[seantimm]

tabBarButton on the bottom tabs can be configured to dynamically hide a tab. Without exposing tabBarButton here, I haven't found a good way to do it with material top tabs.

[nelsonchen5]

@seantimm that's the exact issue that I'm currently running into

[ggchicote]

could you find any solution? I can't hide a specific tab using Material Top Tab Navigator.