set tabbar icon color in react-native-navigation

Question

Is there any way to dynamically set a new tab bar icon AND color? In my app, I want the icon for the CHAT tab to be changed to red when a new message arrives.

Steps to Reproduce / Code Snippets / Screenshots

    this.props.navigator.setTabButton(
        {
                tabIndex: 2,
                screen: 'parkour.ChatListScreen',
                title: 'Chat',
                icon: iconsMap[2],
                style: { color: 'red' }
        },

the style property does not work at all, the resulting color is yellow.

I a using react native navigation v.1.

score 1 · Answer 1 · answered Jun 13 '19 at 14:28

Updating BottomTabs items isn't possible in v1, but should be possible in v2.

Even though you're using v1, figured I'll post the solution for v2:

Navigation.mergeOptions(this.props.componentId, {
  bottomTab: {
    color: 'red',
    icon: require('./someOtherIcon.png')
  }
});

Where this.props.compoenntId is the componentId of your root screen. You can give screens predefined id's when declaring the layout and use that predefined id.

score -1 · Answer 2 · answered May 31 '19 at 08:01

Add TabIcon component in navigationOption of createBottomTabNavigator use redux or context api to change state of TabIconComponent.

 navigationOptions: ({ navigation }) => ({
  tabBarIcon: ({ tintColor }) => {// eslint-disable-line

    const { routeName } = navigation.state;
    let iconName;
    if (routeName === 'Home') iconName = 'home';
    else if (routeName === 'Notifications') iconName = 'notifications';
    else if (routeName === 'Readout') iconName = 'readout';
    else if (routeName === 'Inbox') iconName = 'messages';
    else if (routeName === 'Profile') iconName = 'profile';

    return <TabIcons iconName={iconName} tintColor={tintColor} />;
  },
  tabBarVisible: true,
}),

thanks for trying to answer, but this is a question on the library react-native-navigation from Wix, and your solution seems to be in a different library: react-navigation. — Nicoara Talpes, Jun 13 '19 at 14:19

set tabbar icon color in react-native-navigation

2 Answers2