How to navigate between different nested stacks in react navigation

React Navigation v3:

Navigation.navigate now takes one object as the parameter. You set the stack name then navigate to the route within that stack as follows...

navigation.navigate(NavigationActions.navigate({
    routeName: 'YOUR_STACK',
    action: NavigationActions.navigate({ routeName: 'YOUR_STACK-subRoute' })
}))

Where 'YOUR_STACK' is whatever your stack is called when you create it...

  YOUR_STACK: createStackNavigator({ subRoute: ... })

On React Navigation v5 you have here all the explanation:

https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator

Route definition

function Root() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Root" component={Root} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Instruction

navigation.navigate('Root', { screen: 'Settings' });

Update: For React Navigation v5, see @mahi-man's answer.

---

You can use the third parameter of navigate to specify sub actions.

For example, if you want to go from screen D under nested navigator 2, to screen A under nested navigator 1:

this.props.navigation.navigate(
    'NestedNavigator1', 
    {}, 
    NavigationActions.navigate({ 
        routeName: 'screenB' 
    })
)

Check also: https://reactnavigation.org/docs/nesting-navigators/

In React Navigation 5, this becomes much easier by passing in the screen as the second parameter:

navigation.navigate('Nested Navigator 2', { screen: 'screen D' });

You can also include additional levels if you have deeply nested screens:

navigation.navigate('Nested Navigator 2', {
    screen: 'Nested Navigator 3', params: {
        screen: 'screen E'
    }
});