react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.46k stars 5.01k forks source link

Cannot reset to another nested StackNavigator #8036

Open twelve17 opened 4 years ago

twelve17 commented 4 years ago

Note: I asked on the #react-navigation discord channel, but was unable to get any leads. So I am hoping I can try here, per the Navigation prop reference documentation:

If there is some functionality you cannot achieve without relying on the structure of the state object, please open an issue.

Given a fairly common navigation structure:

navigator-structure

I am trying to navigate from ScreenB to ScreenD, with the caveat that since this involves switching tabs, I wish to have StackNavB consist of ScreenC and ScreenD when the navigation is complete, as ScreenC is the initialScreen of that stack navigator. This way the user can hit the back button and get to ScreenC, otherwise it will not be accessible.

Current Behavior

Using reset does not seem to perform any navigation changes at all. I also tried using navigate(<navigator>, { screen: <screen> }, but this navigates to the other stack navigator and does not include the initial screen, making it no longer accessible (as there is no back button present).

Expected Behavior

When tapping on "Edit Profile" from the HomeTab, the user is navigated to the AccountTab's EditProfile screen (which is not the initial screen), and resetting the AccountTabStack to contain both the Account and EditProfile routes.

How to reproduce

I have a snack here to demonstrate an app with such a navigation structure: https://snack.expo.io/@alexwb/686a2a

The screen names are different, but essentially, tapping on "Edit Profile" from the HomeTab would take the user to the AccountTab, with that tab's stack navigator having both the initial screen (Account) plus the screen being explicitly navigated to (EditProfile).

On the HomeTab, try tapping on either of the Go to Edit Profile links (each tries a different approach to do this, using different react navigation APIs. Neither one seems to accomplish the goal.

Before reporting an issue, make sure you are on latest version of the package.

Note that I was not able to use the very latest versions of the dependencies, as they would fail on expo with the error described in this issue: https://github.com/react-navigation/react-navigation/issues/7978

Your Environment

software version
Android 9 (OnePlus 5)
@react-navigation/native 5.1.4
@react-navigation/stack 5.2.9
react-native-gesture-handler
react-native-safe-area-context 0.7.3
react-native-screens 2.4.0
react-native (not sure, expo)
expo v36.0.0
node (not sure, expo)
npm or yarn (not sure, expo)
slonv23 commented 4 years ago

Same here, could not achieve this common use case. I was able to achieve this in previous version (v3 or v4)

cabiad commented 2 years ago

This is a much later reply, so not likely useful for the original authors/commenters of this issue, but perhaps useful for anyone coming later:

I described a way that I was able to create a reset() call that allowed me to jump between navigators successfully in a discussion thread. The navigation state argument's structure when working with nested navigators isn't as simple as it may seem.

In case it helps anyone, you can check out my comment on that discussion.