how to change tint colour of an icon in tab bar with react native

Question

I am new to react native and have a tab bar with icons and text. I want each icon to change colour when it is active but can't seem to get it to work.

Here is my code.

const TabNavigator = createBottomTabNavigator({
  Home: { 
    screen: HomeScreen,
    navigationOptions: ({tintColor}) => ({
      title:  'Home',
      tabBarIcon: <Icon name={Platform.OS === 'ios' ? 'ios-home' : 'md-home'} size={25}
      color={tintColor} />,
    }),
  },
  Listen: { 
    screen: MainScreen,
    navigationOptions: ({tintColor}) => ({
      title:  'Listen',
      tabBarIcon: <FontAwesome name="microphone" size={25} 
      color={tintColor} />,
    }),
  },
  Events: { 
    screen: EventScreen,
    navigationOptions: ({tintColor}) => ({
      title:  'Events',
      tabBarIcon: <Icon name={Platform.OS === 'ios' ? 'ios-calendar' : 'md-calendar'} size={25}
      color={tintColor} />,
    }),
  },
  About: { 
    screen: AboutScreen,
    navigationOptions: ({tintColor}) => ({
      title:  'About',
      tabBarIcon: <Icon name={Platform.OS === 'ios' ? 'ios-information-circle-outline' : 'md-information-circle-outline'} size={25} color={tintColor}  />,
    }),
  }
},
{
  initialRouteName: 'Home',
  tabBarOptions: {
      labelPosition: 'below-icon',
      activeTintColor: '#E8AA65',
      inactiveTintColor: '#58585A',
      fontSize: 50,
      style: {
        height: 50,
        backgroundColor: '#3B3B3B',
        
       }
    },
  });

I have tried to pass the tint colour to the icon like this color={tintColor} but my icon appear black and do not change colour. The text colour changes fine but not the icon.

Answer 1

You can try this: Using tabInfo.tintColor

 Events: { 
    screen: EventScreen,
    navigationOptions: ({tabInfo}) => ({
      title:  'Events',
      tabBarIcon: <Icon name={Platform.OS === 'ios' ? 'ios-calendar' : 'md-calendar'} size={25}
      color={tabInfo.tintColor} />,
    }),
  },

Answer 2

You can change your code with below

const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title:  'Home',
      tabBarIcon: ({ focused }) => (
        <Icon
          name={Platform.OS === 'ios' ? 'ios-home' : 'md-home'}
          size={25}
          color={focused ? 'white' : 'black'}
        />
      ),
    },
  },
  Listen: {
    screen: MainScreen,
    navigationOptions: {
      title:  'Listen',
      tabBarIcon: ({ focused }) => (
        <FontAwesome
          name="microphone"
          size={25}
          color={focused ? 'white' : 'black'}
        />
      ),
    },
  },
  Events: {
    screen: EventScreen,
    navigationOptions: {
      title:  'Events',
      tabBarIcon: ({ focused }) => (
        <Icon
          name={Platform.OS === 'ios' ? 'ios-calendar' : 'md-calendar'}
          size={25}
          color={focused ? 'white' : 'black'}
        />
      ),
    },
  },
  About: {
    screen: AboutScreen,
    navigationOptions: {
      title:  'About',
      tabBarIcon: ({ focused }) => (
        <Icon
          name={Platform.OS === 'ios' ? 'ios-information-circle-outline' : 'md-information-circle-outline'}
          size={25}
          color={focused ? 'white' : 'black'}
        />
      ),
    },
  }
},
{
  initialRouteName: 'Home',
  tabBarOptions: {
      labelPosition: 'below-icon',
      activeTintColor: '#E8AA65',
      inactiveTintColor: '#58585A',
      fontSize: 50,
      style: {
        height: 50,
        backgroundColor: '#3B3B3B',
       }
    },
  });

Answer 3

You can just pass color prop to the Icon component.