react native - How can we replace switch navigator of navigation 4 to navigation 5 in class based components (without using redux)?

Question

Assume we have a splash screen where we check is user logged in or not. If logged in then navigate to shop screen else navigate to auth screen. My question is how i will replace switch navigator of navigation 4 to navigation 5 where we have a splash screen, auth screen and shop screen? Please explain with example

Thanks you all. Please help

question from:https://stackoverflow.com/questions/66058647/how-can-we-replace-switch-navigator-of-navigation-4-to-navigation-5-in-class-bas

Answer 1

The react-navigation v5 has converted its usability to Component base, and there is no such a kind of SwitchNavigator feature available.

We can use the react-navigation v5 as a component rendering to declare our screens and create our navigators.

As we are able to use the conditions in component rendering so we can put the condition in navigator rendering to check whether a user is logged in or not, if yes then show the MainApp navigation otherwise show AuthNavigation.

For Ex.

isSignedIn ? (
 <>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
    <Stack.Screen name="Settings" component={SettingsScreen} />
 </>
) : (
 <>
    <Stack.Screen name="SignIn" component={SignInScreen} />
    <Stack.Screen name="SignUp" component={SignUpScreen} />
 </>
)

For more information check-out the official doc: https://reactnavigation.org/docs/auth-flow