tabBarLabel as function doesn't set label when using createMaterialBottomTabNavigator

[sfreeman28]

I just upgraded from using createTabNavigator to createMaterialBottomTabNavigator and now my tab labels no longer display. The labels are all empty (no text under icons) with my existing tabBarLabel function.

Here it says I should still be able to use a function for tabBarLabel
https://reactnavigation.org/docs/en/material-bottom-tab-navigator.html#tabbarlabel

navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor }) => {
        console.log('tabBarIcon') // this log is seen
        const { routeName } = navigation.state
        let iconName = 'default'
        if (routeName === ROUTE_NAME_COLLECTIONS) {
            iconName = 'grid'
        } else if (routeName === ROUTE_NAME_INFORMATION) {
            iconName = 'info'
	}
        return <SimpleLineIcons name={iconName} size={25} color={tintColor} />
    },
    tabBarLabel: () => {
        console.log('tabBarLabel') // this log is never seen
        const { routeName } = navigation.state
        let title = null
        if (routeName === ROUTE_NAME_COLLECTIONS) {
            title = strings.collections
        } else if (routeName === ROUTE_NAME_INFORMATION) {
            title = strings.info
        }
        return title
    },
    // tabBarLabel: 'Title', // this works when just setting string - but is not practical
}),

With my tabBarLabel function above I just always get empty labels and the log inside my function is never called.
If I set tabBarLabel to a static string then it does display, however I want different labels for each tab.
For completeness, if I do not supply a tabBarLabel property then my RouteName is displayed as the label text.

I am not setting labeled: false.
It feels as if when using createMaterialBottomTabNavigator tabBarLabel cannot be a function.
Whereas my tabBarIcon function is still working correctly.

When using createTabNavigator or TabNavigator this was working perfectly. I would get my labels showing and the function would run every time I change tab.

Any advice on whats going on here? Thanks

"react": "16.3.1",
"react-native": "0.55.4",
"react-navigation": "^2.3.1",
"react-navigation-material-bottom-tabs": "^0.2.0",

[brentvatne]

please provide a mcve (https://stackoverflow.com/help/mcve) on https://snack.expo.io or in a standalone github repo

[sfreeman28]

@brentvatne please see my snack here https://snack.expo.io/@sfreeman/materialtabs thanks!

[brentvatne]

cc @satya164

[satya164]

Confirmed that this is not supported. But don't think there's any reason to support it. There are no arguments to be passed here unlike other tab navigators where you get focused and tintColor.

If I set tabBarLabel to a static string then it does display, however I want different labels for each tab.

Your navigationOptions is already a function. So you can return different labels for different routes already.

navigationOptions: ({ navigation }) => {
  const { routeName } = navigation.state;

  let tabBarLabel;

  if (routeName === ROUTE_NAME_COLLECTIONS) {
    tabBarLabel = strings.collections;
  } else if (routeName === ROUTE_NAME_INFORMATION) {
    tabBarLabel = strings.info;
  }

  return {
    tabBarIcon: ({ focused, tintColor }) => {
    },
    tabBarLabel,
  };
};

[sfreeman28]

Thank you @satya164 @brentvatne for the help. That is definitely a valid solution to my use case.

Could we update the documentation to not mention setting a function here
https://reactnavigation.org/docs/en/material-bottom-tab-navigator.html#tabbarlabel

Many thanks

[vonovak]

@sfreeman28 the updated docs are live

[sfreeman28]

awesome thanks @vonovak

[razvantodea14]

Is it possible to set a badge over a materialBottomNavigation tabIcon?