How to select conditional createStackNavigator screen?

Question

I'm trying to select conditional screen based on Redux data. I have two screens in a screen stack, and this screen stack is also a part of TabNavigator (Logged out screen should be shown with Tabs too). If user is logged in, I need to show CheckScreen, otherwise CheckScreenLoggedOut. I tried setting initialRouteName conditionally but it shows CheckScreenLoggedOut only after logging in.

How can I implement this logic?

Here is my createStackNavigator part:

const CheckScreenStack = createStackNavigator(
    {

        CheckSendLoggedOut: {
            screen: IntroScreen,
            navigationOptions: ({navigation}) => ({
                headerLeft: (
                    <View>
                        <TestModeIcon/>
                    </View>
                ),
            }),

        },

        CheckScreen: {
            screen: CheckScreen,
            navigationOptions: ({navigation}) => ({
                headerRight: (
                    <View>
                        <TouchableOpacity title='' onPress={() => { navigation.navigate('NotificationsScreen'); }}>
                            <NotificationTabBarIcon/>
                        </TouchableOpacity>
                    </View>
                )
            }),
        },



    },
    {
        initialRouteName: (typeof store.getState().userData !== "undefined") ? 'CheckScreen' : 'CheckSendLoggedOut'
    }
);

Answer 1

I have already achieved this by accessing the redux state with connect, you can do something like this:

const CheckScreenStack = ({ userData }) => {
   const Stack = createStackNavigator(
     {
       ...
     },
     {
        initialRouteName: (typeof userData !== "undefined") ? 'CheckScreen' : 'CheckSendLoggedOut'
     }
   );
   return Stack;
}

const mapStateToProps = ({ userData }) => {
  return { userData };
};

export default connect(
  mapStateToProps,
  {},
)(CheckScreenStack);