Menu
Using react navigation, navigate from a screen in a navigator to a screen in a different navigator.
If I have the following Navigator structure:
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.
869
Firstly, we will set up the tab navigator and then go further to add the stack navigator inside. Create a new folder with the name Screens within our project folder. Now inside the Screens folder create three files i.e. Screen1. js, Screen2.
Stack navigators nested inside each screen of drawer navigator - The drawer appears over the header from the stack. Stack navigators nested inside each screen of tab navigator - The tab bar is always visible. Usually pressing the tab again also pops the stack to top.
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' } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
