React-native-vector-icons: Color of the icon doesn't work well with react-navigation

[jszcl]

static navigationOptions = {
        tabBar: {
            label: 'Home',
            icon: ({tintcolor}) => (

                <Icon name="rocket" size={30}  color={tintcolor} />
            )
        },

label get the tintcolor ,but Icon still shows with its initial color,why?

[oblador]

I think you should post this issue in the react-navigation repo.

[anhtuank7c]

It's still works.

Let create TabIcon component.

\\ TabIcon.js

import React, { PropTypes } from 'react';
import Icon from 'react-native-vector-icons/Ionicons';

const TabIcon = ({ focused, iconDefault, iconFocused, tintColor, size }) => {
    return (
        <Icon
            name={focused ? iconFocused : iconDefault}
            size={size}
            style={{ color: tintColor }}
        />
    );
};
TabIcon.propTypes = {
    focused: PropTypes.bool,
    iconDefault: PropTypes.string.isRequired,
    iconFocused: PropTypes.string.isRequired,
    tintColor: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.string
    ]),
    size: PropTypes.number
};
TabIcon.defaultProps = {
    focused: false,
    tintColor: 'orange',
    size: 28
};

export default TabIcon;

Then import to your TabNavigator

import React from 'react';
import { TabNavigator, TabBarBottom } from 'react-navigation';
import TabIcon from '../path_to_tab_icon/TabIcon';
import TabHome from '../screens/TabHome';
import TabProfile from '../screens/TabProfile';

const RootNavigator = TabNavigator({
    TabHome: {
        screen: TabHome,
        navigationOptions: {
            title: 'Home',
            tabBarIcon: ({ focused, tintColor }) => (
                <TabIcon
                    iconDefault='ios-compass-outline'
                    iconFocused='ios-compass'
                    focused={focused}
                    tintColor={tintColor}
                />
            )
        }
    },
    TabProfile: {
        screen: TabProfile,
        navigationOptions: {
            title: 'Home',
            tabBarIcon: ({ focused, tintColor }) => (
                <TabIcon
                    iconDefault='ios-compass-outline'
                    iconFocused='ios-compass'
                    focused={focused}
                    tintColor={tintColor}
                />
            )
        }
    },
}, {
        tabBarOptions: {
            activeTintColor: 'black',
            inactiveTintColor: 'grey',
            activeBackgroundColor: 'white',
            inactiveBackgroundColor: 'yellow',
        },
    });

export default RootNavigator;

[steven89]

@jszcl just made a typo it's tintColor not tintcolor.

This can be closed, there is no issue with react-navigation.