When clicked tab icon, i want to change tab icon color in react-native-router-flux Scene

Question

I want to change the color of the icon when I click on the tab icon, but the scene moves but the color doesn't change. If the code doesn't solve it, it's a good idea to show you a new way. here is my code...

import React, { Component } from 'react';

import { Router, Scene, Tabs } from 'react-native-router-flux';
import { Text, View } from 'react-native';

import LoginScreen from './screens/LoginScreen';
import Home from './screens/second/Home';
import Market from './screens/second/Market';
import Promotion from './screens/second/Promotion';
import Setting from './screens/second/Setting';

import Icon from 'react-native-vector-icons/FontAwesome'

class TabIcon extends React.Component {
    render() {
        return (
                <Icon
                    name={this.props.iconName}
                    color={this.props.selected ? '#000000' : '#808080'}
                    size={40}
                />
        )
    }
}

export default class Main extends React.Component {
    render() {
        return (
            <Router>
                <Scene key="root">
                    <Scene key="loginScreen" component={LoginScreen} animation='fade' hideNavBar={true} initial={true} />
                    <Tabs key="tabbar" showLabel={false} lazy={true} showIcon={true} tabBarPosition='bottom'>
                        <Scene key="tab1" title="tab1" iconName={'home'} icon={TabIcon} >
                            <Scene key="Home" component={Home} hideNavBar={true} initial />
                        </Scene>
                        <Scene key="tab2" title="tab2" iconName={'bullhorn'} icon={TabIcon} >
                            <Scene key="Market" component={Market} hideNavBar={true} initial />
                        </Scene>
                        <Scene key="tab3" title="tab3" iconName={'shopping-cart'} icon={TabIcon} >
                            <Scene key="Promotion" component={Promotion} hideNavBar={true} initial />
                        </Scene>
                        <Scene key="tab4" title="tab3" iconName={'cog'} icon={TabIcon} >
                            <Scene key="Setting" component={Setting} hideNavBar={true} initial />
                        </Scene>
                    </Tabs>
                </Scene>
            </Router>
        );
    }
}

help me!

Answer 1

Change this.props.selected to this.props.focused

Refer from this project

TabIcon Component

const TabIcon = ({ icon, focused }) => (
  <Icon
    name={icon}
    size={26}
    color={focused ? AppColors.tabbar.iconSelected : AppColors.tabbar.iconDefault}
  />
);

Tab Route

  <Tabs hideNavBar>
    <Stack title="Recipes" icon={TabIcon('search')} headerMode="float">
      <Scene component={ListingView} />
      <Scene key="recipeView" component={RecipeView} back />
    </Stack>
    <Scene title="Coming Soon" component={Placeholder} icon={TabIcon('timeline')} />
    <Scene title="Example Error" component={Error} icon={TabIcon('error')} />
    <Scene title="Style Guide" component={StyleGuide} icon={TabIcon('speaker-notes')} />
  </Tabs>