CODEWITHSUNDEEP
react-nativereact-navigation
asanas
asanas

Reputation: 4280

React Native Navigation: Go to specific stack navigation screen

I'm using React Navigation 5.

At the top I have a Drawer navigator, with the following screens:

  <Drawer.Navigator>
    <Drawer.Screen name="One" component={StackNavigatorOne} />
    <Drawer.Screen name="Two" component={StackNavigatorTwo} />
    <Drawer.Screen name="Three" component={StackNavigatorThree} />
  <Drawer.Navigator/>

Within StackNavigatorOne, I have a stack navigator,

<Stack.Navigator>
  <Stack.Screen name="Screen1" component={Screen1} />
  <Stack.Screen name="Screen2" component={Screen2} />
  <Stack.Screen name="Screen2" component={Screen3} />
</Stack.Navigator>

In the StackNavigatorOne, the default order of screens is Screen1, Screen2, and Screen3, so that when this stack navigator is called, it shows Screen1 by default. I don't want to change this order.

However, from the Drawer Navigator, when a user clicks, DrawerScreen One, I want the user to go to Screen2 in StackNavigatorOne. Is it possible to do?

Upvotes: 1

Views: 1381

Answers (1)

arthankamal
arthankamal

Reputation: 6413

In React Navigation, you can check Nested Navigators.

Select your root component One first and then select the component inside the Stack Navigator.

navigation.navigate('One', {
  screen: 'Screen2',
  params: {
    ...
  },
});

I assume, Clicking on back will go to your screen from where you navigated. If you want to go to Screen1, use lazy option as false. I've not tested this in drawerNavigator but for bottom navigator we used lazy option as false.

Upvotes: 1

Related Questions