React Navigation Reset on Nested Navigator

Question

I am using React-Navigation v 5.0.1, I have a Drawer navigator nested inside Stack navigator that looks like this:

MainStack.js

function MainStack() {
 return(
    <Stack.Navigator>
          <Stack.Screen name="Splash" component={Splash} />
          <Stack.Screen name="Login" component={Login} />
          <Stack.Screen name="HomeDrawerStack" component={HomeDrawerStack} />
    </Stack.Navigator>
 )
}

HomeDrawerStack.js

function HomeDrawerStack() {
 return (
    <Drawer.Navigator>
       <Drawer.Screen name="Home" component={Home} />
    </Drawer.Navigator>
 )
}

When I tap a logout button on Home screen, how do I navigate to Login screen and reset / clear all other screens? (so it triggers the componentWillUnmount on other screens)

Answer 1

This code will navigate to Login Screen after clearing the stack. so that back button or back swipe will not work to navigate to HomeDrawerStack

navigation.reset({
    index: 0,
    routes: [{ name: "Login" }],
});

Answer 2

if I share how I handled it, it is like, I am sharing my code snippet as png here, so what I have done is appended Navigator with redux, and I use to change my stack or replace my stack by dispatching event to store attached to Navigator.