React native log out in DrawerNavigator

Question

I am trying to do a logout function in my react-native drawernavigator. But I have no idea how to do so. I stored the token in asyncstorage, I need to logout and clear the asyncstorage at the same time. Here is my code, anyone having idea about it?

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
export default class SideMenu extends Component   {

  render(){
    createHomeStack = () => 
    <Stack.Navigator>
      <Stack.Screen name="Upcoming Activities" component={HomeScreen} 
        options={{
        headerStyle: {backgroundColor: '#87CEFA',},
        headerTintColor: '#fff',
        headerTitleStyle: {fontWeight: 'bold',}
        }} />
      <Stack.Screen name="Details" component={DetailsScreen}
        options={{headerStyle: {backgroundColor: '#87CEFA',},
        headerTintColor: '#fff',
        headerTitleStyle: {fontWeight: 'bold',}
        }}/>
    </Stack.Navigator>

    createYourStack = () => 
    <Stack.Navigator>
      <Stack.Screen name="Your Activities" component={YourActivitiesScreen} 
        options={{
        headerStyle: {backgroundColor: '#87CEFA',},
        headerTintColor: '#fff',
        headerTitleStyle: {fontWeight: 'bold',}
        }} />
      <Stack.Screen name="Details" component={DetailsScreen}
        options={{headerStyle: {backgroundColor: '#87CEFA',},
        headerTintColor: '#fff',
        headerTitleStyle: {fontWeight: 'bold',}
        }}/>
    </Stack.Navigator>

    return (
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Home">
          <Drawer.Screen 
            name="Home"
            children={createHomeStack}
            options={{ drawerLabel: 'Home' }}
          />
          <Drawer.Screen
            name="Your Activities"
            children={createYourStack}
            options={{ drawerLabel: 'Your Activities' }}
          />
          <Drawer.Screen
            name="Logout"
            //component={}
            options={{ drawerLabel: 'Logout' }}
          />
        </Drawer.Navigator>
      </NavigationContainer>
    )

  }
}

Update question: I need to direct it to the login while pressing the logout in drawer navigator, but my login screen is using the Router from 'react-native-router-flux'

export default class Routes extends Component {
    render() {
        return(
            <Router>
                <Stack key="root" hideNavBar>
                    <Scene key="login" component={Login} title="Login" initial/>
                    <Scene key="signup" component={Signup} title="Signup" />
                    <Scene key="home" component={SideMenu} title="HomeScreen" />
                </Stack>
            </Router>
        );
    }
}

score 1 · Answer 1 · answered Apr 18 '20 at 16:05

1

You can do something like this in your Logout screen:

import React, { Component } from "react";
import { View } from "react-native";
import { AsyncStorage } from 'react-native';

class LogoutScreen extends Component{
    componentDidMount(){
        AsyncStorage.removeItem("yourKey");
        this.props.navigation.navigate('RouteName eg:Home');
    }
    render(){
        return(
         <View style={{alignItems:'center',justifyContent:'center',flex:1}}>
         </View>
        );
    }
}
export default LogoutScreen;

Hope this helps!

answered Apr 18 '20 at 16:05

Goskula Jayachandra

3,931
2
12
22

I have updated the question. I don't think this will work for my case while my login screen is called by router. I tried ```Actions.Login``` replaced the ```this.props.navigation.navigate('RouteName eg:Home');``` but it return me a blank page. – SAS231 Apr 18 '20 at 18:04
Try Actions.login() as you had declared your key name as login, try this – Goskula Jayachandra Apr 19 '20 at 06:13
I found a way to solve it already since I come to home page by Actions.home, so I just used Actions.pop() then it will go back to login screen. Btw tq for answering. – SAS231 Apr 19 '20 at 06:27

React native log out in DrawerNavigator

1 Answers1