Skip to content

Cannot reset to another nested StackNavigator #8036

@twelve17

Description

@twelve17

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: #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)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions