React Navigation : back to top of stack but disable "BACK"

Question

navigation flow map (Sorry, I cannot post image)

I am using React Native for Android Application and React Navigation. Now at Screen 0 (S0). Then did following navigations.

this.props.navigation.navigate("S1")
this.props.navigation.navigate("A1")
this.props.navigation.navigate("A2")
this.props.navigation.navigate("A3")

Now, once Actions in A3 is done, I have to navigate back to Screen 1 (S1). However, if I use this.props.navigation.navigate("S1"), what happened is that I can Press Back button (hardware or Header bar) and it go back to Screen A3.

When the back button is pressed on S1, I want to go back to S0. I don't want to set it manually as well because many other pages can come to S1.

Any suggestions or ideas how to make this work? I have tried popToTop() and goBack("A") but both are not working.

I cannot answer you in detail because I am on the jump to leave office. But I achieved the same handling by using two different navigators. If this is not working you could try to manually change the navigator stack. This stack should be able to be accessed through this.props.navigation - By the way please insert which navigator you are using through the fact that there are several's out there. — Jonathan Stellwag
– Jonathan Stellwag, Commented May 9, 2018 at 15:11

Bryan · Accepted Answer · 2018-05-10 01:21:29Z

2

You can use NavigationActions.reset to get back to your first screen or NavigationActions.pop to "pop" back to the screen you want.

Sample code for nav reset:

    this.props.navigation.dispatch(NavigationActions.reset({
            index: 0,
            actions: [
                    NavigationActions.navigate({ routeName: 'S0' }),
                    NavigationActions.navigate({ routeName: 'S1' }),
                    NavigationActions.navigate({ routeName: 'A1' }),
                    NavigationActions.navigate({ routeName: 'A2' }),
                    NavigationActions.navigate({ routeName: 'A3' }),
            ],
    }));

Sample code for nav pop:

    this.props.navigation.dispatch(NavigationActions.pop({
            n: 3,
            immediate: true
    }));

Note: Remember to import { NavigationActions }

edited May 10, 2018 at 1:21

answered May 9, 2018 at 15:42

Bryan

464 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aung Myint Thein · Accepted Answer · 2018-05-11 02:58:07Z

0

I managed to make this work by just

this.props.navigation.pop(4). It will just back to 4th previous page and "Back" button still works as I intended. @Bryan 's suggestion works for me in one of the cases but I needed a much more general solution :D

Thank guys for helping! Really appreciate it.

answered May 11, 2018 at 2:58

Aung Myint Thein

4107 silver badges18 bronze badges

Collectives™ on Stack Overflow

React Navigation : back to top of stack but disable "BACK"

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related