CODEWITHSUNDEEP
reactjsreact-nativereact-navigationreact-navigation-stack
Keselme
Keselme

Reputation: 4249

How to navigate between different stacks

In my App.tsx file I have 3 stacks as follows:

const AuthStack = createStackNavigator()
const AuthStackScreen = () => (
  <AuthStack.Navigator>
    <AuthStack.Screen name="Login" component={Login} options={{headerShown:false}}/>
  </AuthStack.Navigator>
)

export const HomeStack = createStackNavigator()
export const HomeStackScreen = () => (
  <HomeStack.Navigator>
    <HomeStack.Screen name="Home" component={Home} options={{headerShown:false}}/>
    <HomeStack.Screen name="TestScreen" component={TestScreen} />
  </HomeStack.Navigator>
)

const RootStack = createStackNavigator()
const RootStackScreen = ({ isTokenValid }) => (
  <RootStack.Navigator headerMode="none">
    { isTokenValid 
    ? ( <RootStack.Screen name="App" component={HomeStackScreen} options={{headerShown:false}}/> ) 
    : ( <RootStack.Screen name="Auth" component={AuthStackScreen} options={{headerShown:false}}/> ) 
    }
  </RootStack.Navigator>
)

Then I return the following:

  return (
    <NavigationContainer>
      <RootStackScreen isTokenValid={props.isTokenValid}/>
  </NavigationContainer>
  );

In my Login.tsx after successful login I want to navigate to HomeScreen that's under HomeStackScreen so I call for navigation.navigate as such:

const doLogin = ()=>{
    issueToken(phoneNumber,otp).then(res => { 
        navigation.navigate('HomeStackScreen', { screen: 'Root' });
    }).catch(err => alert(err));
}

However the navigation fails with this message:

The action 'NAVIGATE' with payload {"name":"HomeStackScreen","params":{"screen":"Root"}} was not handled by any navigator.

How can I navigate correctly between the two stacks?

Upvotes: 2

Views: 654

Answers (1)

gie3d
gie3d

Reputation: 809

Your RootStack returns only a single stack, HomeStackScreen or AuthStackScreen, just one of them at a time. In your case, you are on AuthStackScreen, which means HomeStackScreen doesn't render. That's why you cannot navigate to HomeStackScreen.

In order to switch to HomeStackScreen, I think you need to update isTokenValid which I don't know how do you config it but you can use either redux or context.

This may help: https://stackoverflow.com/a/61861273/1451753

Upvotes: 2

Related Questions