react-nativereact-native-router-fluxvector-icons

react-native-router-flux tabs how to change icon of the selected tab?


I'm using the navigation tabs from react-native-router-flux ^4.0.0-beta.21 and react-native-vector-icons. How do I change the icon or change the color of the icon of the selected scene when the scene is selected?

<Scene
        key='navigationTab'
        tabs
        tabBarStyle={styles.tabBarStyle}
        showLabel={false}
>
        <Scene
                key='home'
                hideNavBar
                icon={SimpleLineIcon}
                name='home'
                size={25}
                component={PostList}
                initial
        />
        <Scene
                key='profile'
                hideNavBar
                icon={FontAwesomeIcon}
                name='user-o'
                size={25}
                component={Register}
        />
</Scene>

Now Ive defined an icon like below, but how do I pass in something like a focus prop?

const iconBack = () => (
        <TouchableHightLight onPress={console.log('home')} >
                <MaterialIcon
                        name='keyboard-arrow-left'
                        size={28}
                />
        </TouchableHightLight>
);

Solution

  • You can receive focused as a parameter for the icon render function, then check if current icon is focused.

    For example:

    const SimpleLineIcon= ({ title, focused }) => {
        let image;
    
        switch (title) {
            case 'firstTab':
                image = focused ? require('firstTabSelected.gif') : require('firstTab.gif');
                break;
    
            case 'secondTab':
                image = focused ? require('secondTabSelected.gif') : require('secondTab.gif');
                break;
        }
    
        return ( <Image source={image} /> );
    }