Search code examples
react-nativereact-navigationreact-navigation-stack

React Navigation: move directly to last page and onBack go to previous screens


In React Navigation, How can I able to go directly to the last page and When BackButton pressed, go back to the previous screens.

Let me explain clearly,

Users can able to add new forms by tapping the 'Add' button. In my case, the user has to navigate 3 pages to create a new form.

Example for Add:

ListPage ---> Page1 ---> Page2 ----> Page3(send to api)

This works fine.

User can able to edit the submitted forms from the list page. So if the user taps the list item, it has to move directly to Page3, then when the BackButton is pressed it has to come to Page2 then Page1 then ListPage.

Example for Edit:

ListPage ----directnavigation----> Page3 ----backpressed----> Page2 ----backpressed----> Page1 ----backpressed----> ListPage

How do I handle this in the edit scenario?


Solution

  • I fixed it using StackActions.

    Here is the code,

      StackActions.reset({
        index: 2,
        key: undefined,
        actions: [
            NavigationActions.navigate({ routeName: 'Page1' }),
            NavigationActions.navigate({ routeName: 'Page2' }),
            NavigationActions.navigate({ routeName: 'Page3' })
        ]
    });