ActiveTintColor and InActiveTintColor Not Working [React Native Router Flux]

Question

I have tried playing with activeTintColor, inActiveTintColor, tintColor inside the icon, tabs and also on the tab as a prop and even inside the style but the color of the active/inactive tab doesn't change.

I am working with react-native-router-flux 4.0.0-beta.21

<Scene key={'tabBar'} tabs={true}
        tabBarStyle={AppStyles.tabBarStyle}
        tabStyle={AppStyles.tabStyle}
        tabBarPosition={'bottom'}
        activeTintColor={'#e91e63'}
        showLabel={false}>
        <Scene
            {...AppConfig.navbarProps}
            key={'map'}
            component={MapScreen}
            icon={props => TabIcon({icon: 'map-marker'})}
            analyticsDesc={'Map'}
        ></Scene>
        <Scene
            {...navbarPropsTabs}
            key={'home'}
            component={FeedScreen}
            icon={props => TabIcon({ ...props, icon: 'view-list'})}
            analyticsDesc={'Home'}
        ></Scene>
    </Scene>

Answer 1

If you look into the source code for react-native-router-flux and search where activeTintColor is used, you'll see that it's only passed as props to a user-defined TabIcon component. So in order to make it work you have to specify the behaviour in your TabIcon class.

I checked it and indeed my TabIcon component recieved activeTintColor prop as well as focused (selected) prop. You can use these props to set the desired Icon color. To specify icon you can use just icon={TabIcon} without using implicit props passing.

class TabIcon extends React.Component {

    render () {

        var color = this.props.focused
            ? this.props.activeTintColor //'#3b5998'
            : this.props.inactiveTintColor//'#93a8d5'

        let componentBody =
            <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', alignSelf: 'center'}}>
                <Icon style={{color: color}} name={this.props.iconName} size={30} />
                <Text style={{color: color}}>{this.props.title}</Text>
            </View>

        return componentBody;
    }
}

My Scene definition looks like

<Scene  key='Tabbar'
        tabs
        hideNavBar
        activeTintColor='#93a8d5'
        inactiveTintColor='#3b5998'
        tabBarStyle={styles.tabBar}
        default='Main'>

    <Scene  key='Main'
            title="Home"
            iconName={'file-text'}
            icon={TabIcon}
            hideNavBar
            component={Main}
            initial 
            />
    ...