Navigation between screens in 2 different Stacks-CodePudding

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",

CodePudding user response：

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.