React Navigation 5 conditional rendering with redux not working

user_11237144 0
Viewed 2345

So hello guys im trying to understand the new react navigation 5 im working with redux but i will make a small example to make you understand my problem so...

i created a

Stack.js files where to put all my Stack for the moment i just using 2 like LoginStack and TabNavStack (that redirect to HomeScreen), now for the example i just made one stack navigator and passing the component function so here is the code:

Stack.js 

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

export function TestStackNav() {
    const isAuth = useSelector(state => state.loginReducer); // i will explain why i need this thing here :)

    return <Stack.Navigator>
                <Stack.Screen
                        name="LoginScreen"
                        component={LoginContainer}/>
                <Stack.Screen 
                    name="TabNav"
                    component={TabNav}/>
            </Stack.Navigator>
}

 export function TabNav() {
    return (
        <Tab.Navigator>
            <Tab.Screen name="AnimeScreen" component={AnimeContainer} />
            <Tab.Screen name="HomeScreen" component={HomeScreen} />
            <Tab.Screen name="SettingsScreen" component={SettingsScreen} />
        </Tab.Navigator>

    );
}

Now in my loginContainer i made redux working and just dispatching props and other things but the container CONNECT to the LoginScreen and this works fine because at the start of the application we see the login screen now in the login screen i have my BIG AND OLD login button where check data dispatch the action and other things and at the end will just navigate to this.props.navigation.navigate("TabNav",{screen:'HomeScreen'}) and this works fine because he redirect me on the homescreen....BUT the problem is if i use a conditional render based on what i have in my reduxStore in the Stack.js like this

export function TestStackNav() {
    const isAuth = useSelector(state => state.loginReducer);
    return <Stack.Navigator>
        {isAuth.logged ?
            <Stack.Screen
                name="TabNav"
                component={TabNav} />
            :
            <Stack.Screen
                name="LoginScreen"
                component={LoginContainer}
            />}
    </Stack.Navigator>
}

so now with the same logic but just putting a conditional render from the reduxStore i get enter image description here

i literally changed anything the loginScreen is the same all the other screen are the same but just adding a conditional render to the Stack Navigator i got this error...can someone please help me...i tryed to make the code simple...i already saw the context used from the react navigation docs but for the moment i dont want to use it because i have to delve more into it. Thanks for your help :)

react-navigation react-redux react-native reactjs
2 Answers

When you are conditionally defining screens/navigators, React Navigation will take care of rendering correct screens automatically after you change the condition. You don't do navigate in this case.

From the auth flow docs:

It's important to note that when using such a setup, you don't need to navigate to the Home screen manually by calling navigation.navigate('Home'). React Navigation will automatically navigate to the Home screen when isSignedIn becomes true.

https://reactnavigation.org/docs/auth-flow#how-it-will-work

So you need to remove the navigation.navigate after successful login, since it'll happen automatically after you update your state in redux.

user_16650260

Did you define the stack navigtor and tab navigator? i.e. 

const Stack = createStackNavigator(); ?
user_17495100
Related