Question 290984 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React Navigation always takes me to the first stack screen, not the intended screen

Code 1(https://phpout.com/wp-content/uploads/2023/11/d7Fkn.png)Code 2(https://phpout.com/wp-content/uploads/2023/11/uJBog.png)Code 3(https://phpout.com/wp-content/uploads/2023/11/8fjV5.png)

So I have this issue where when I press a button (Receipt history button on the profile page for example), instead of it taking me to the receipt history page, it takes me to the login page.

Any help would be greatly appreciated.

I believe no matter what link i set, whether it be "navigation.navigate(‘HomeScreen’)" or "navigation.navigate(‘ReceiptHistoryScreen’)" it always goes to the first item listed in the navigation. I have played around and changed what the first item is and it always goes to that.

For example:

<NavigationContainer>
    <Stack.Navigator>
    <Stack.Screen name="LoginScreen" component={LoginScreen} />
    <Stack.Screen name="ReceiptHistoryScreen" component={ReceiptHistoryScreen} />
    <Stack.Screen name="ProfileScreen" component={ProfileScreen} />
    <Stack.Screen name="HomeScreen" component={HomeScreen} />
    <Stack.Screen name="RegisterScreen" component={RegisterScreen} />
    <Stack.Screen name="LoginSuccess" component={LoginSuccess} />
    <Stack.Screen name="ReceiptDetailScreen" component={ReceiptDetailScreen} />
    </Stack.Navigator>
</NavigationContainer>

to

<NavigationContainer>
    <Stack.Navigator>
    <Stack.Screen name="LoginSuccess" component={LoginSuccess} />
    <Stack.Screen name="LoginScreen" component={LoginScreen} />
    <Stack.Screen name="ReceiptHistoryScreen" component={ReceiptHistoryScreen} />
    <Stack.Screen name="ProfileScreen" component={ProfileScreen} />
    <Stack.Screen name="HomeScreen" component={HomeScreen} />
    <Stack.Screen name="RegisterScreen" component={RegisterScreen} />
    <Stack.Screen name="ReceiptDetailScreen" component={ReceiptDetailScreen} />
    </Stack.Navigator>
</NavigationContainer>

the navigate that i set will now go to loginsuccess

Tags:

2

Answers


  1. 0

    try that with initialRouteName. Without giving initialRouteName the default behavior is often to display the first route defined in the navigation configuration. For example,

    <NavigationContainer>
       <Stack.Navigator initialRouteName={ loggedin===true?'Home':'Login'} >
         <Stack.Screen name="Login" component={LoginScreen}  />
         <Stack.Screen name="Home" component={HomeScreen} />
         <Stack.Screen name="Profile" component={ProfileScreen} />
       </Stack.Navigator>
      </NavigationContainer>
    Login or Signup to reply.
  2. 0

    According to me the issue you’re encountering is caused by the order of the screens within the Stack.Navigator. When you press a button that triggers navigation.navigate(‘ReceiptHistoryScreen’), React Navigation will look for the first screen in the stack named ReceiptHistoryScreen and navigate to it. Since LoginScreen is the first screen in the stack, React Navigation is navigating to that screen instead of ReceiptHistoryScreen.

    try this and let me know if this helps

    <NavigationContainer>
    <Stack.Navigator>
        <Stack.Screen name="ReceiptHistoryScreen" component={ReceiptHistoryScreen} />
        <Stack.Screen name="ProfileScreen" component={ProfileScreen} />
        <Stack.Screen name="HomeScreen" component={HomeScreen} />
        <Stack.Screen name="RegisterScreen" component={RegisterScreen} />
        <Stack.Screen name="LoginScreen" component={LoginScreen} />
        <Stack.Screen name="LoginSuccess" component={LoginSuccess} />
        <Stack.Screen name="ReceiptDetailScreen" component={ReceiptDetailScreen} />
    </Stack.Navigator>
</NavigationContainer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search