PopToTop in nested navigators

[youngern]

Current Behavior

Current Stack Structure:
Modal
|
Root - ModalScreen
|
Main
|
Tabs - ScreenX

Currently have ScreenX that was pushed on top of Tabs.
After some user action, ModalScreen is pushed onto the modal stack.
Using some popToTop action by NavigationActions.back({key: key of routes[1]}) to pop the modal screen all the way to the top - which is Root.
Can't pop to the top screen of Main, because I don't have access to the Main navigator.

Expected Behavior

We should be able to specify transition for any screen, not just in a stack.

Your Environment

React Native@0.43
react-navigation@1.0.0-beta.9

[guoliang1206]

I have a same problem. MainScreen -(push)-> MapScreen -(push)-> CommitScreen , and I need pop to MainScreen from CommitScreen.

At present in CommitScreen , I handle the navigate like this:

let navigateAction = NavigationActions.reset({
            index: 0,
            routeName:'Main',
            actions: [
                NavigationActions.navigate({ routeName: 'Main'})]
        });
        this.props.navigation.dispatch(navigateAction);

but this way cause a issue that it performed back action twice， see the GIF below:

[youngern]

@guoliang1206 It looks like you're just doing regular cardstyle pushes.
You can probably just do NavigationActions.back and specify the map key.

I'm having problems because I'm using nested navigators with different transition styles. Since Modal navigator is at the top, I don't have access to lower/equal level navigators.

I need to call back on the current modal screen that i am on, and also call back on a scene in the same stack that is a navigator.

[guoliang1206]

@youngern I can't find the place how to specify the key of a screen, and are you sure that NavigationAction.back can pop multistage?

[youngern]

@guoliang1206 yes that is what I'm doing in one of my other nested navigators.

Once you have the key of a scene you want to navigate from - you will need the key for the MapScreen in your case, do

NavigationActions.back({
   key: MapKey
});

You might have the wrong key. I had a ref to the a top level navigator so I just did
navigator.state.nav.routes[1].key

https://reactnavigation.org/docs/navigators/navigation-actions

[guoliang1206]

@youngern where to set the key for specify screen? And I have use the Redux, how to handle action in Reducer? Does it like this?

 case NAVIGATION_BACK:
            console.log('excute Back navigator ......',);
            return AppNavigator.router.getStateForAction(NavigationActions.back({key:action.key}),state);
            break;

Update: when A->B->C ,
in screen C ：
//the key is come from screen B (this.props.navigation.state.key) and pass it to C

let navigateAction = NavigationActions.back({
            key:this.props.navigation.state.params.key,     
        });
        this.props.navigation.dispatch(navigateAction);

there still appear screen B flash when I am in C pop to A

[kcfgl]

I've got a similar question about setting a key. I've been struggling to wrap my head around reset. I've currently got a TabNavigator with 4 tabs and each tab has a StackNavigator with a variable number of screens.

Let's say I'm on tabOne and I have pushed 3 routes. On the last route I want to reset and go back to the first screen of tabOne. Currently I'm using:

const resetAction = NavigationActions.reset({index: 0, key: null, actions: [ NavigationActions.navigate({ routeName: 'SearchPage' })]});
this.props.navigation.dispatch(resetAction)

But this resets the route at index 0 for every tab. Not just tabOne. Is there a way to manually set a key for the tab? Or some other way to ensure I only reset the tab I want to reset? Thanks.

[guoliang1206]

how to realize the effect likes popToRootViewControllerAnimated: source from native side?
And without flash of the screen that in the middle position of navigator stack.

[guoliang1206]

Does anyone have new solutions for this?

[huhuanming]

In some cases we may need a PopTo API

[Lylleny]

@ I also met a problem like yours,the navigation pop multistage really confused me.But I use the follow method
A->B->C
at B screen I do
this.redirect("C", {
back:this.onBack()
});

at C screen I set back function like
onBack() {
const {navigation} = this.props;
navigation && navigation.goBack();
this.props.navigation.state.params && this.props.navigation.state.params.back();
}
it work fine on both ios and android ,but when call Android Physical return key,it will work bad,and I even found the C screen would recreat again after back to A screen successfully,it really confused me?

[quadsurf]

How does dispatch action 'reset' not support this yet? This is becoming soooo ridiculous that one of the most widely used use cases for logging a user out, is not yet supported? How can anyone take this lib seriously without this method? (reset does not support popToTop, it only "popsToTop" of current stack, not the root stack, see #199)

I can't for one second believe that 'reset' is most effective at popping to top of current stack, rather than root/parent stack... popToTop should not mean popToTop of current stack, it should mean popToTop of ALL stacks (I mean, c'mon, seriously?!!!)

I am baffled that this lib has 6000 likes when there is no support for THE MOST BASIC & COMMON of all use cases: logging out... baffled. The github likes is not the result of a better nav library, but the result of RN community's endorsement, which it never should've endorsed... it should've remained agnostic.

I've supported this lib, promoted this lib, helped in contributing more useful documentation, but now I'm being forced to abandon this lib on account of something sooo trivial, yet essential. Switching to another navigation lib is a huge set back for me and my time lines, and I am NOT happy about it at all, and I'm doing my best to show some professional restraint on how I truly feel.

This lib is a huge blow and set back to the RN community. It is poorly organized and dysfunctional to say the least, and far too opinionated. I've seen PR offers rejected on account of the opinions of a few, so this lib has never truly embodied the spirit of open source. Goodbye react-navigation.

[quadsurf]

I found a temporary workaround... consolidate all your stacks into a single stack... it's definitely less than ideal, but this lib invites all sorts of hacky workarounds. There is the option also to reset using route key, but this feature is useless if it's needed in a child component of a nested stack, even if you've passed screenProps, it throws this error: Cannot get routeName from 'config' ... instead of failing, there should be a default behavior where the reset action automatically navigates to the initial Root route and assumes index 0, which is basically what the true meaning of "popToTop" is anyway!

[skizzo]

It's a real bummer that this isn't possible 👎

[brentvatne]

this is a good candidate for a rfc: https://github.com/react-navigation/rfcs

please post there or repost to this feature request board if you don't have a detailed idea of how it should work