CODEWITHSUNDEEP
react-nativereact-navigation
Nithin Srinivasan
Nithin Srinivasan

Reputation: 515

Icons not displaying for React Navigation Bottom Tab Bar in v3

I recently upgraded react-navigation to v3 and got my application running but there seems to be a rendering error with the bottom tab bar icons. The icons are not rendering at all even if the label renders. I am using react-native-vector-icons to render the icons out.

I have tried setting the showIcon property to true in the tab bar options but this doesn't solve the problem for me either. I also tried downgrading react-navigation back to v2.x but this doesn't help the problem

const TabNavigatorConfig = {
  navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused }) => {
      const { routeName } = navigation.state;
      let iconName;
      switch (routeName) {
        case 'Batches':
          iconName = 'home';
          break;
        case 'Settings':
          iconName = 'settings';
          break;
        default:
          iconName = 'home';
          break;
      }
      return (
        <Icon
          size={22}
          name={iconName}
          color={focused ? colors.secondary.normal : colors.other.bbIconNormal}
        />
      );
    },
  }),
  animationEnabled: false,
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  backBehavior: 'none',
  tabBarOptions: {
    showIcon: true,
    style: {
      backgroundColor: colors.other.bgNormal,
    },
  },
};

The expected result is to have an active icon with a certain tint and an inactive icon with a different tint. However, the actual results are that the icon is not rendered at all. I don't think this is a problem with the vector icons because they render perfectly everywhere else in the app. Is there a problem with the code? Or perhaps a different method for React Navigation v3.

Upvotes: 2

Views: 3379

Answers (1)

sdkcy
sdkcy

Reputation: 3548

I run your code with some little change and just you need to use defaultNavigationOptions instead of navigationOptions

Upvotes: 9

Related Questions