Clear stack and redirect to login when logout clicked inside child stack

Question

I want to clear all screen components and redirect it to login screen. Use case is:

Login -> 
MainScreen -> 
chose OrderModule from side menu ->
OrderScreen1->
OrderScreen2 ->
OrderScreen3 -> 
chose StockModule from side menu -> 
pressed device back button ->
reached to dashboard -> 
now pressed logout (internally uses `this.props.navigation.goBack(null)`) ->
I see OrderScreen2 instead of Login screen

My hierarchy is:

PrimaryNav (StackNavigator)
--Login
--MainScreen
--ResetPassword

MainScreen (StackNavigator)
--DrawerStack- DrawerScreen

DrawerScreen (DrawerNavigator)
--Dashboard
--OrderModule
--StockModule
--SalesModule

OrderModule (StackNavigator)
--OrderScreen1
--OrderScreen2
--OrderScreen3

Answer 1

This is working for me

this.props.navigation.reset([NavigationActions.navigate({ routeName: 'Login' })], 0)

reference https://reactnavigation.org/docs/en/navigation-prop.html

Answer 2

I have found the solution for the above situation. I am posting it because I found it by hit and try approach and very useful in most of the scenarios for others.

Use `popToTop` method

this.props.navigation.popToTop();

use above line whenever module is clicked from drawer (side panel). It clears the old module stack then write the line to navigate to new screen or navigator. In my case : this.props.navigation.navigate('StockModule');