How to navigate from parent StackNavigator to child StackNavigator inside a DrawerNavigator

[maggialejandro]

This is my current nav stack:

const AppNavigator = StackNavigator({
  Welcome: {
    screen: WelcomeScreen,
  },
  Login: {
    screen: LoginScreen,
  },
  Main: {
    screen: ({ navigation }) => <DrawerNavigator screenProps={{ rootNavigation: navigation }} />,
    path: 'main',
  },
}, { headerMode: 'none' });

const DrawerNav = DrawerNavigator({
  Home: {
    screen: HomeScreen,
  },
  Notifications: {
    screen: NotificationsNavigator,
  },
}, {
  initialRouteName: 'Home',
  contentComponent: DrawerContent,
});

NotificationsNavigator is a Stack navigator with routes: Notifications and Notification

I handle Push Notifications logic on WelcomeScreen (I also check here if the user is logged in)
What I need is to navigate from Welcome to Notification (Stack -> Drawer -> Stack)

I'm trying this, in WelcomeScreen:

const navigateAction = NavigationActions.navigate({
  routeName: 'Main',
  action: NavigationActions.navigate({
    routeName: 'Notification',
    params: { notificationId: '355' },
  }),
});

navigation.dispatch(navigateAction);

Current Behavior

It navigates to Home.

First the action Navigation/INIT appears in AppNavigator
Then it appears the action I dispatch
Then in DrawerNav the action Navigation/INIT is shown.

(Promocion == Notification)

software	version
react-navigation	1.0.0-beta.11
react-native	0.45.1
node	7.10.0
npm or yarn	4.2.0 / 0.17.10

[maggialejandro]

I ended up changing AppNavigator's Main route DrawerNavigator
Now it looks like this:

const AppNavigator = StackNavigator({
  Welcome: {
    screen: WelcomeScreen,
  },
  Login: {
    screen: LoginScreen,
  },
  Main: {
    screen: DrawerNavigator,
    path: 'main',
  },
}, { headerMode: 'none' });

I also needed to change some logic in DrawerContent but the navigation to Notification works correctly.

[spencercarli]

Glad you figured it out!

[kashishgrover]

Assume I wish to visit Notifications in my Child Nav from my Parent Nav.

const ParentNavigator = StackNavigator(
{
	Home: {
		screen: ChildNavigator,
	},
	.
	.
	.
},
{
	.
	.
	.
});

Your render function probably looks like this:

render() {
	return 
	<ParentNavigator 
		ref={nav => { this.navigator = nav; }} 
	/>;
}

and then in ParentNav using a function you send the following to visit Notifications. Params will be caught anyway in each ComponentDidMount of the child.

this.navigator && this.navigator.dispatch(
	NavigationActions.reset({
		index: 0,
		actions: [
			NavigationActions.navigate({
				routeName: 'Home',
				params: 'Notifications',
			})
		]
	}));

Your child nav will look sort of like this:

const ChildNavigator = TabNavigator(
{
	Home: {
		screen: TopBarNavigation,
	},
	Notifications: {
		screen: NotificationScreen,
	},
	.
	.
	.
},
{
	.
	.
	.
});

In the ComponentDidMount of the child nav, do this:

componentDidMount() {
	if (this.props.navigation.state.params === 'Notifications')
		this.navigator && this.navigator.dispatch(
			NavigationActions.navigate({
				routeName: 'Notifications',
			})
		);
}

Where your render function sort of looks like this.

render() {
	return 
	<ChildNavigator 
		screenProps={{ rootNavigation: this.props.navigation }} 
		ref={nav => { this.navigator = nav; }} 
	/>;
}

[M3po]

@maggialejandro How did you navigate from drawer? to child StackNavigator. I am still having problem with that