React Native: Nested Stack Navigation
When you’re navigating between stacks in React Native, you always will end up at the initial screen on that stack. But sometimes that might not be what you want to do! Let’s consider the following setup:
const RootStack = () => {
return <Stack.Navigator>
<Stack.Screen name="Homepage" component={Home}/>
<Stack.Screen name="Profile" component={Profile}/>
</Stack.Navigator>
}const Navigator = () => {
return <NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={RootStack}/>
<Drawer.Screen name="Settings" component={Settings}/>
</Drawer.Navigator>
</NavigationContainer>
}
Given that general structure, let’s say we are on the Settings screen. If we navigate to the Home Screen, we will always be put on the Homepage (the initial route). We would do this by using navigation.navigate('Home'). But let’s say that we wanted to have an action on the Settings screen that brought us to our profile!
Navigation to Specific Screen on a Stack
The way to do this is actually really easy! During our navigation call, we are going to add extra arguments. This will look like this:
navigation.navigate('Home', {screen: 'Profile'})If we look, we are sending parameters along with the navigation that requests another navigation to a specific screen. We can even send parameters along with the nested navigation to make sure any data we want to send along goes with it.
navigation.navigate('Home', {
screen: 'Profile',
params: {userID: 1}
}
)Now, when we render the Profile component, we could (with some other coding!) make sure that the profile rendered is the user with the ID of 1.
What If We Nest More?
I’m glad you asked! To start, I would like to put a little disclaimer that if you nest too much, it can become hard to follow, and honestly it becomes a bit unnecessary. There may be situations where this arises, though, and React Native has your back.
Consider this structure:
NAVIGATOR: *StackA
*ScreenC
*ScreenD *StackB
*ScreenI
*StackE
*ScreenF
*StackG
*ScreenJ
*ScreenH
We want to get from ScreenC inside StackA all the way to ScreenH in StackB. We can actually chain the parameters together to access specific screens.
navigation.navigate('StackB',{
screen: 'StackE',
params: {
screen: 'StackG',
params: {
screen: 'ScreenH'
}
}
}
)Let’s talk through it!
We are asking to navigate onto StackB, and we would prefer to go into StackE rather than the initial ScreenI. From there, we are asking to go onto StackG and, again, more specifically go to ScreenH.
As you can see, it’s just repeating the pattern of going to a specific screen with parameters with another screen with parameters with another screen with…
You get the point, and you should also be able to tell that this sort of structure gets really messy really fast! It’s best practice to avoid this.
Wrap Up
Hopefully this answers your questions on nested/specific screen navigation between stacks. If there is more about this sort of navigation that you are interested in, I recommend digging into the documentation for it.
Have a great day, stay safe, and happy coding!
