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?

Before adding an answer I wanna ask: You're not trying to rerender Router right? Because that is not the way react-native-router-flux works. Instead of **connecting** Navigator class (where you render scenes and routes), simply **connect** TabBarScene to redux directly. You can then update its style in runtime. — eden, Jun 04 '17 at 06:36
@EnieJakiro Do you perhaps have any documentation links for this? I have a component that renders my router that receives updates from Redux. However when the `tabBarStyle` receives a new value, it is not re-rendered. — Hobbyist, Jun 04 '17 at 17:52
I only have experience and unfortunately no documentation to show you. Did you insert `componentWillReceiveProps(newProps)` function into you class? This way you can catch the updated styles. For this case, before update comes, keep your style object in state. Then, when the `componentWillReceiveProps` gets triggered, simply set new states to **rerender** your component. — eden, Jun 04 '17 at 18:26
@Enie I'm not doing any of this, because I can adjust the values directly from props, setting the state on the component hosting the Router (which is what your method would do) does not update the style either, I just tried that method. If you could provide an example, I'd greatly appreciate it. — Hobbyist, Jun 04 '17 at 20:15
I'm telling again, that is not the way routerflux works. You can't change the props of a mounted scene, because that will re render the whole router which shouldn't update ever. It's a static navigation tree. Change the way you work about styles, forget about props for now, and connect tabbar class directly to redux with connect method. Use Action dispatch to change your style and catch the change with componentWillReceiveProps. This way you can re render your tabbar without re rendering navigation tree. Im on a vacation and I don't have my mac with me, I cant share my code until 12 June sadly — eden, Jun 04 '17 at 21:44
Forget about navigation class too. Im not talking about states of navigation class. Its just tabbar class and redux. — eden, Jun 04 '17 at 21:46

score 1 · Answer 1 · answered Jun 04 '17 at 09:50

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

This unfortunately does not work, you're supposed to use `tabBarStyle` to apply a style to a TabBar, also the `style` applies the style to the entire scene, which makes a huge difference, also changeing either the `style` or `tabBarStyle` does not cause a re-render. We want to change the `backgroundColor` of our TabBar, so basically change the state of the container component to change the color of the entire background. — Hobbyist, Jun 04 '17 at 17:51
Don't know what you are doing as no code where posted. But my example can be seen in reality here: https://itunes.apple.com/us/app/nachtplan/id1241634791 / https://play.google.com/store/apps/details?id=com.nachtplan — itinance, Jun 05 '17 at 08:10

Dynamic style on react-native-router-flux TabBar

1 Answers1