How to clear all drawer stack and logout the app form React native

0
votes

In my app, I have a main stack navigator(login, drawer). And i created a drawer navigator in react native("@react-navigation/drawer": "^5.1.1"). In each drawer has a stack navigator too. So How can I log out the app within that drawer stack screen? I just use this (props.navigation.navigate("Login")). After move to log in, when the user presses the back button again he navigates to the previous stack. I want to clear all stack and navigate to login.

2
react-native
Are you finding this? - 高鵬翔
@高鵬翔 thanks bro. it worked. - Dulaj Madusanka

2 Answers

1
votes

How i've achieved this by creating 2 stacks and integrating it inthe main stack navigator, ive used bottom tab, and its pretty same with your side drawer.

First ive created a different BottomTab stack :

const BottomTab = () => {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#fff',
        activeBackgroundColor: '#c47808',
        inactiveBackgroundColor: '#ffbd5c',
        inactiveTintColor: '#c47808',
        style: {
          height: Platform.OS == 'ios' ? hp('10.35%') : hp('8.35%'),
        },
        labelStyle: {
          marginBottom: Platform.OS == 'ios' ? 8 : 2,
        },
      }}
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          return getTabBarIcon(route, focused);
        },
      })}>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Meetings" component={Meeting} />
      <Tab.Screen name="My Profile" component={Profile} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
};

And then ive integrated it in the main stack navigator as

 <NavigationContainer linking={deepLinking}>
        <Stack.Navigator
          initialRouteName="Login"
          screenOptions={{
            headerShown: false,
            gestureEnabled: false,
          }}>
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="SignupEmail" component={SignupEmail} />
          <Stack.Screen name="BottomTab" component={BottomTab} />   
        </Stack.Navigator>
      </NavigationContainer>

And you can see here , inside it ive imported as Bottom tab, and now from bottom tab page if you do navigation.navigate("login") it goes to that page and back button will close the app, since that was my starting page.

Similarly, you can also remove the entire navigation history by and just checking with the given route :

import { CommonActions } from '@react-navigation/native';

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Profile',
        params: { user: 'jane' },
      },
    ],
  })
);

You chck the doc for above in rn-reset ..

Hope it helps. feel free for doubts

0
votes

Use this it will reset your stack:

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Login' })],
});
this.props.navigation.dispatch(resetAction);