Dynamic style on react-native-router-flux TabBar

Question

I have a Scene in react-native-router-flux that is acting as a TabBar in my application, however we need to change the color scheme of the entire tab bar based on some state inside of the application. We are using redux for state management and I had tried to adjust the tabBarStyle property in the <Scene> component, but making changes to the style does not have any affect. The TabBar seems to only be rendered when the component is mounted, and doesn't seem to care if any of the props passed to it are changed.

We are trying to implement different themes into our application, and this has worked great up until we got to the components used by react-native-router-flux.

Does anyone know of a way to make these components update their style in real time?

Answer 1

You should use the "style"-Property on the Scene for that. This is how i do a black TabBar with white Icons and white font:

            <Scene key='mainScenes'
                hideNavBar={false}
                navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND}}
                leftButtonIconStyle = {{ tintColor:'white'}}
                titleStyle={{color: 'white', fontSize: normalize(14), fontWeight: 'bold'}}
                tabs={true}
                translucent={false}
                style={s.tabbar}
            >
                <Scene icon={TabIcon} key='events' hideNavBar={false} title='Events' titleStyle={{color:'white'}}
                    navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND}}
                    component={EventsViewScene} sceneStyle={getScreenContainerStyle()} >

                </Scene>
                <Scene icon={TabIcon} key='locations' hideNavBar={false} title='Locations' titleStyle={{color:'white'}}
                    navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND}}
                    component={LocationsViewScene} sceneStyle={getScreenContainerStyle()}
                />
                <Scene icon={TabIcon} key='search' hideNavBar={false} title='Search' titleStyle={{color:'white'}}
                    navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND}}
                    component={SearchViewScene} sceneStyle={getScreenContainerStyle()}
                    initial={false}
                />
                <Scene icon={TabIcon} key='more' hideNavBar={false} title='More' titleStyle={{color:'white'}}
                    navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND}}
                    component={InfoViewScene} sceneStyle={getScreenContainerStyle()}
                    initial={false}
                />
            </Scene>

The StyleSheet:

const s = StyleSheet.create({
    tabIcon: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    rightButton: {
        justifyContent: 'center',
        alignItems: 'center',
        width: normalize(23),
        height: normalize(23),
    },
    tabbar: {
        backgroundColor: 'black',
        borderTopColor: 'white',
        borderTopWidth: 2,
    },

TabIcon:

const icons = {
    'search': 'search',
    'events': 'calendar',
    'locations': 'map-marker',
    'more': 'info-circle'
}

// Application
class TabIcon extends React.Component {

    render(){
        const {name, title} = this.props;
        const iconName = icons[name] || 'info-circle'

        return (
            <View style={s.tabIcon}>
                <Icon name={iconName} size={TAB_ICON_SIZE} color="white" />
                <Text style={{color: this.props.selected ? 'yellow' :'white'}}>{title}</Text>
            </View>
        );
    }
}