How to navigate from nested StackNavigator to parent's router screen?

[goncalomarques]

I have several nested navigators with the following structure:

StackNavigator
    Home
    Login
    Authenticated -> CustomTabNavigator
        ScreenOne -> StackNavigator
            ScreenOneDetails
            ScreenOneSettings
        ScreenTwo

How can I navigate from ScreenOneDetails to Home?

Already tried to dispatch it as an action:

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

But all I get is an error - There is no route defined for key splash. Must be one of: 'ScreenOneDetails','ScreenOneSettings'

I know that this makes sense, as the navigation prop that is passed to ScreenOneDetails is the one created by the ScreenOne StackNavigator. However, is there any way to access the navigation prop created by parent navigators? And how would I go the other way around, e.g: from Login to ScreenOneSettings?

[nico1510]

First off, I'm having the same questions but here's an idea what you could try:

And how would I go the other way around, e.g: from Login to ScreenOneSettings?

The docs include an example I think. Specifically:

• action - (advanced) The sub-action to run in the child router, if the screen is a navigator.

So you would call something like:

navigate('ScreenOne', {}, NavigationActions.navigate({ 'ScreenOneSettings' }));

As to your first problem:

However, is there any way to access the navigation prop created by parent navigators?

have you tried passing down the navigation prop from the root StackNavigator as a prop down to your child StackNavigator ? Technically I think this is how it should work (by reading this section of the docs), but in practice I got some errors when trying this.

[goncalomarques]

Thanks @nico1510

I had already tried that before creating this issue, but today I managed to make it work. I still have some issues related to the CustomTabNavigator navigationOptions, as I'm passing a TabsNavigator and want to keep the top navbar dynamically linked to the tabs pages

[zoontek]

@goncalomarques How did you make it work? I've exactly the same problem.

[goncalomarques]

@zoontek I created wrapper components that I use in the screen property for a route I set. In these wrapper components, I pass down the navigation to the nested router in the screenProps prop as whatever I want to call it, in this case rootNavigation:

const NestedNavigator = StackNavigator({
    ScreenOne: {
        screen: ScreenOneComponent
    },
    ScreenTwo: {
        screen: ScreenTwoComponent
    }
});

class NestedNavigatorWrapper extends React.Component {
    constructor(props)  {
        super(props);
    }
    render() {
        return (
            <DashboardNavigator screenProps={{ rootNavigation: this.props.navigation }} />
        );
    }
}
const AppNavigator = StackNavigator({
    Home: {
        screen: HomeComponent
    },
    Nested: {
        screen: NestedNavigatorWrapper
    }
});

To use navigate('Home') inside ScreenOne, I use this.props.rootNavigation.navigation.navigate('Home').

I don't think this is the optimal solution, just a quick fix.

[temitope]

I had this issue and found that the ideal way to navigate between nested navigators is via the dispatch method where you can have a nested sub-navigation action. @zoontek @goncalomarques

                this.props.navigation.dispatch(
                  {
                      type: 'Navigation/NAVIGATE',
                      routeName: 'GoToANavigator',
                      action: {
                        type: 'Navigation/NAVIGATE',
                        routeName: 'GoToAScreenInANavigator',
                      }
                  }
                 );

[koenpunt]

This works totally fine if you want to go back from a nested navigator:

navigation.dispatch({ type: 'Navigation/BACK' })

Edit this works when on the first page of the nested navigator, so not a complete solution..

[bjrn]

I think I've bumped into the same issue as you. The about navigation.dispatch works for me too, but I found an interesting section in the documentation:

[..] If the goal is to go back anywhere, without specifying what is getting closed, call .goBack(null);

navigation.goBack(null); works at least in my use case.

[Kerumen]

Just a heads up for @goncalomarques answer:

You can inline the nested navigator instead of making it a class:

const AppNavigator = StackNavigator({
  Home: { screen: HomeComponent },
  Nested: { screen: ({ navigation }) => <DashboardNavigator screenProps={{ rootNavigation: navigation }} /> }
});

And the right call to navigate is: this.props.screenProps.rootNavigation.navigate('Home').

[kylecrouse]

@Kerumen When using your example and dispatching a navigate action to a parent navigator from one nested navigator and including a sub-action to navigate to the non-initial screen of a sibling nested navigator, the sub-action appears to be ignored.

Example navigators:

const MainNavigator = StackNavigator({
  screenOne: {
    screen: MainOneComponent
  },
  screenTwo: {
    screen: MainTwoComponent
  },
};

const NestedNavigator = StackNavigator({
  screenOne: {
    screen: NestedOneComponent
  },
  screenTwo: {
    screen: NestedTwoComponent
  },
};

const AppNavigator = StackNavigator({
  main: {
    screen: ({ navigation, screenProps }) => <MainNavigator screenProps={{ parentNavigation: navigation, ...screenProps }} />
  },
  nested: {
    screen: ({ navigation, screenProps }) => <NestedNavigator screenProps={{ parentNavigation: navigation, ...screenProps }} />
  },
});

Example dispatch action from header of one of the nested navigator's child components:

class MainOneComponent extends Component {
  static navigationOptions = {
    header: ({ state }) => ({
      right: (
        <Button onPress={() => {
          let navigationAction = NavigationActions.navigate({
            routeName: 'nested',
            action: NavigationActions.navigate({ routeName: 'screenTwo' })
          });
          state.params.parentNavigation.dispatch(navigationAction);
        }}/>
      )
    })
  }
...
}

The resulting screen displayed is nested->screenOne, not nested->screenTwo as expected.

If AppNavigator is modified to include NestedNavigator directly instead of via function, screenTwo displays as expected but I lose the ability to call the parentNavigator since it isn't getting passed down as a screenProp.

This results in the correct transition (but lacks parentNavigation prop in nested's children):

const AppNavigator = StackNavigator({
  main: {
    screen: ({ navigation, screenProps }) => <MainNavigator screenProps={{ parentNavigation: navigation, ...screenProps }} />
  },
  nested: {
    screen: NestedNavigator
  },
});

I tried another approach where I passed navigation as a prop on the NestedNavigator component within the function, but that resulted in an error that I haven't yet been able to trace:

const AppNavigator = StackNavigator({
  main: {
    screen: ({ navigation, screenProps }) => <MainNavigator screenProps={{ parentNavigation: navigation, ...screenProps }} />
  },
  nested: {
    screen: ({ navigation, screenProps }) => <NestedNavigator navigation={navigation} screenProps={{ parentNavigation: navigation, ...screenProps }} />
  },
});

Any thoughts on what I might be missing that will pass the sub-action through properly?

[Kerumen]

@kylecrouse I stumbled upon the same problem..
Didn't manage to fix it so I reverted my code and declared the screen directly with the component:

const AppNavigator = StackNavigator({
  Nested: { screen: DashboardNavigator }
});

[InteractiveLogic]

Hmmm. I've got a bit of a catch-22 here it seems. @goncalomarques -- your solution (and @kylecrouse's) works for me as far as the navigation is concerned but I'm finding that when I do the initial dispatch to navigate to the nested TabNavigator and it's target screen, the params are getting squashed or not passed on.

It's super frustrating.

I think I can get around it by using redux instead of the params, but it's a bit of a hassle for such a small amount of data (one string).

The good news is that calling dispatch() with a reset action on the outer navigation does pop everything back to where I want it. I'm concerned about other side effects too, but this gives me a little hope.

UPDATE: using redux worked fine in my case to get the data to the screen in the nested tab navigator. I'm not sure what other side effects I'll run into on the other screens, but at least I have that working for now.