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.