CODEWITHSUNDEEP
typescriptreact-nativereact-navigationreact-navigation-stack
Hernâni Pereira
Hernâni Pereira

Reputation: 324

Navigation between screens in 2 different Stacks

I have 2 stacks, RootNavigator and AuthNavigator. Inside a <NavigationContainer>.

<NavigationContainer>
  {token ? <RootNavigator /> : <AuthNavigator />}
</NavigationContainer>

The RootNavigator.js returns:

return (
  <Stack.Navigator>
    <Stack.Screen name="Members">
  </Stack.Navigator>
)

The AuthNavigator returns:

return (
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="Login" component={Login} />
  </Stack.Navigator>
);

My question is how can I go from the login screen to the members screen?

I've tried this: navigation.navigate('Members'); and navigation.navigate('RootNavigator', {screens: 'Members'});

Versions:

"@react-navigation/drawer": "^6.1.8",
"@react-navigation/native": "^6.0.6",
"@react-navigation/stack": "^6.0.11",

Upvotes: 0

Views: 134

Answers (1)

Chefk5
Chefk5

Reputation: 469

You need to use redux or any other kind of state management for changing the token value. As soon as you change the token to TRUE, for example, the navigation container will have rootNavigator instead of authNavigator and the screen will change.

Upvotes: 1

Related Questions