How to navigate between different nested stacks in react navigation

Question

The Goal

Using react navigation, navigate from a screen in a navigator to a screen in a different navigator.

More Detail

If I have the following Navigator structure:

• Parent Navigator
  • Nested Navigator 1
    • screen A
    • screen B
  • Nested Navigator 2
    • screen C
    • screen D

how do I go from screen D under nested navigator 2, to screen A under nested navigator 1? Right now if I try to navigation.navigate to screen A from screen D there will be an error that says it doesn't know about a screen A, only screen C and D.

I know this has been asked in various forms in various places on this site as well as GitHub(https://github.com/react-navigation/react-navigation/issues/983, https://github.com/react-navigation/react-navigation/issues/335#issuecomment-280686611) but for something so basic, there is a lack of clear answers and scrolling through hundreds of GitHub comments searching for a solution isn't great.

Maybe this question can codify how to do this for everyone who's hitting this very common problem.

Answer 1

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'     } });