CODEWITHSUNDEEP
react-nativereduxreact-navigation
Alex
Alex

Reputation: 1046

React Navigation StackNavigator and TabNavigator title binding to Redux

I'm trying to bind StackNavigator and TabNavigator screen titles to Redux. The problem is it seems impossible to use a Redux-aware component for title with TabNavigator or StackNavigator.

I tried to use setParams with TabNavigator but it doesn't seem to work.

I am working on a multi language app that string resources are being loaded using Redux but because I can't load the initial state of a Reducer using AsyncStorage, I'm unable to assign the current string resource initially so I don't have to use setParams or anything.

Upvotes: 0

Views: 238

Answers (1)

Alex
Alex

Reputation: 1046

I managed to fix this issue by creating a ConnectedLabel component which is connected to Redux and then adding it to the TabNavigator screens in the following way:

static navigationOptions = {
    tabBarLabel: <ConnectedLabel textKey='search_tab2_title' />
}

And here is the ConnectedLabel component:

import { connect } from 'react-redux';

export const LABEL_TYPE_STACK = 'label_type_stack';
export const LABEL_TYPE_TAB = 'label_type_tab';

const ConnectedLabel = props => {
    const { culture, type } = props;
    return <Text style={type === LABEL_TYPE_STACK ? widgetStyles.headerTitle : widgetStyles.tabLabel} numberOfLines={1}>{culture.strings[props.textKey]}</Text>
}

const widgetStyles = StyleSheet.create({
    tabLabel: {
        fontSize: dimens.textSizeSemiMedium,
        paddingBottom: Platform.OS === 'ios' ? 12 : 0,
    },
    headerTitle: {
        color: 'white',
        fontSize: dimens.textSizeMedium
    }
})

const mapStateToProps = (state) => {
    return {
        culture: state.culture
    }
}

export default connect(mapStateToProps)(ConnectedLabel);

Upvotes: 1

Related Questions