CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-stackreact-navigation-drawer
Sam
Sam

Reputation: 30288

Closing Drawer On Logout in React Native

In my React Native app, I have a StackNavigator that handles the login process and a DrawerNavigator which is available for authenticated users.

When I log out of the app and then log back in, I see that the drawer is still open. When I click to log out, I invoke the handleClickLogOut() function in my Navigator component -- see below. I thought by accessing the MainMenuDrawer, I could access closeDrawer() method but I don't see it there.

How can I close the drawer on log out in this code?

Here's the Navigator component:

const LogInStack = new createStackNavigator();
const MainMenuDrawer = createDrawerNavigator();

class Navigator extends Component {

    constructor(props) {
        super(props);
        this.handleClickLogOut = this.handleClickLogOut.bind(this);
    }

    componentDidMount() {

        if (this.props.isAuthenticatedUser && !this.props.isAuthenticated)
            this.props.actions.setIsAuthenticated(true);
    }

    handleClickLogOut() {

        removeAuthenticationData()
            .then(() => {

                return this.props.actions.setIsAuthenticated(false);
            });
    }

    render() {
        return (
            <NavigationContainer>
                {
                    this.props.isAuthenticated
                    ? <MainMenuDrawer.Navigator drawerContent={(navigation) => <DrawerContent member={this.props.member} navigation={navigation} handleClickLogOut={this.handleClickLogOut} />}>
                        <MainMenuDrawer.Screen name="Home" component={Dashboard} />
                        <MainMenuDrawer.Screen name="ToDoList" component={ToDoList} />
                      </MainMenuDrawer.Navigator>
                    : <LogInStack.Navigator screenOptions={{ headerShown: false }}>
                        <LogInStack.Screen name="LoginScreen" component={Login} />
                      </LogInStack.Navigator>
                }
            </NavigationContainer>
        );
    }
}

Upvotes: 1

Views: 1732

Answers (2)

tykey100
tykey100

Reputation: 21

I know this is late, but for anyone coming across this, I believe this is the correct way to do it and what the original question was requesting:

When you use drawerContent, props are of type DrawerContentComponentProps and, thus, you have access to navigation and can simply call navigation.closeDrawer():

<Drawer.Navigator
   ...
   drawerContent={(props) => {
    <DrawerContentScrollView {...props}>
       <DrawerItemList {...props} />            
       <DrawerItem
          label="Logout"
          onPress={() => onPressLogout(props.navigation)}
          {...props}
        />
    </DrawerContentScrollView>
   }}
>
{...}
</Drawer.Navigator

and our logout function:

const onPressLogout = (navigation: DrawerNavigationHelpers) => {
    // perform logout logic needed
    navigation.closeDrawer()
}

Upvotes: 0

Sochetra Nov
Sochetra Nov

Reputation: 465

@Sam here is the solution brother.

import {DrawerActions} from '@react-navigation/native'

then you can call in DrawerContent.js file with this:

navigation.dispatch(DrawerActions.closeDrawer())

Hope this will help you 👐.

Here is my Real Code in DrawerContent.tsx file

enter image description here

Upvotes: 4

Related Questions