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.

#react-navigation #nested-routes #expo #react-native #javascript #react