Skip to content

Reset routes to a sibling stack navigator  #8326

@canastro

Description

@canastro

Current Behavior
I have the following structure:

RootStack 
  Drawer
    AStack -> List - Details - Form (convert from entity A to entity B)
    BStack -> List - Details

After the user submits the form in AStack/Form screen, he is redirected to BStack/Details. My current implementation allows the user to press Back in the BStack/Details screen and get back to AStack/Form screen.

This is not what I intended, I would like to remove the AStack/Form from the history because most likely going back into that screen will always be invalid. Ideally I would even hijack history and add BStack/List and BStack/Details, so that when the user presses back he goes into BStack/List.

I tried some variations of .reset, .replace and .dispatch but with no luck (most attempts say that the action was not handled by any navigator). This approach with reset seems to make sense but currently its only pushing the first route in the array:

navigation.reset({
    index: 1,
    routes: [
        { name: 'BStack', params: { screen: 'List' } },
        { name: 'BStack', params: { screen: 'Details' } }
    ]
});

Expected Behavior

BStack.Details screen is rendered with a "Back" button that takes the user to BStack.List screen.

Your Environment

software version
iOS 13.5
@react-navigation/native 5.0.9
@react-navigation/stack 5.1.1
react-native 0.61.5
node 10.16.3
npm 6.13.3

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