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>
);
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} /> );
}