0

I have a issue with react-navigation and nested navigators. This is what I am trying to implement:

This is my drawer navigator that contains the "Home" and "Techniques" screens.

<Drawer.Navigator
  initialRouteName="home"
>
  <Drawer.Screen
    name="home"
    component={Home}
  />
  <Drawer.Screen
    name="techniquesNavigator"
    component={Techniques}
  />
</Drawer.Navigator>

Then here is my stack navigator which contains the "Techniques" & "Single Technique" screens.

<Stack.Navigator
  screenOptions={{
    headerShown: false,
  }}
>
  <Stack.Screen
    name="Techniques"
    component={Techniques}
  />
  <Stack.Screen
    name="SingleTechnique"
    component={SingleTechnique}
  />
</Stack.Navigator>

So the drawer works fine, when I press the "Home" button on the drawer, I navigate to the Home screen, when I press the "Techniques" button, I navigate to the "Techniques" screen.

Now on my "Home" screen, I have cards that when I press them, navigate to the "SingleTechnique" screen (inside the "techniqueNavigator") and when I go back, I am back to the "Home" screen. That works if I didn't visited the "Technique" screen yet.

If I go the the "Techniques" screen using the drawer, I arrive to the "Technique" screen and then I decide to open a single technique. I will arrive the the "SingleTechnique" screen. From there, using the drawer, I go back to the "Home" screen. From the "Home" screen, if I navigate to a "SingleTechnique", it works BUT when I go back, I go back to the "techniques" screen instead of the "Home" screen.

Is there a way to clear the stack navigator when using the drawer? Any other solution, help is more than welcome.

  • You can use backhandler for your screen like in the link below. https://stackoverflow.com/questions/45031085/react-native-device-back-button-handling – tellioğlu Oct 25 '22 at 13:35

0 Answers0