Logout using react Native DrawerNavigator

Question

I am building a react-native app( App Image )which has Logout link on the Drawer Navigator.

Code is as below

 const DrawerScreen = DrawerNavigator({
    ..........
    logout: {
        screen: Component   
    },
})

export default DrawerScreen;

But the problem is , it's only loading the component screen. i need to call a method where i can perform Asyncstorage clear and navigate to LoginPage.

Answer 1

You probably want to add a button to your drawer. If so, your code will look like this.

const Drawer = DrawerNavigator(
{
    mainpage:{screen:MyScreen}
},
{
    contentComponent:(props) => (
        <View style={{flex:1}}>
            <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                <DrawerItems {...props} />
                <Button title="Logout" onPress={DO_SOMETHING_HERE}/>
            </SafeAreaView>
        </View>
    ),
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
})

You should import import {DrawerItems} from 'react-navigation'; to get it work.

UPDATE:

1. In 4.x version of react-navigation you should import `import {DrawerNavigatorItems} from 'react-navigation-drawer'
2. You should import SafeAreaView from 'react-native-safe-area-view'

Answer 2

const DrawerNavigation = createDrawerNavigator(
  {
    Mainpage: {
      screen: Mainpage
    }
  },
  {
    contentComponent:(props) => (
      <View style={{flex:1}}>
          <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
            <DrawerItems {...props} />
            <TouchableOpacity onPress={()=>
              Alert.alert(
                'Log out',
                'Do you want to logout?',
                [
                  {text: 'Cancel', onPress: () => {return null}},
                  {text: 'Confirm', onPress: () => {
                    AsyncStorage.clear();
                    props.navigation.navigate('Login')
                  }},
                ],
                { cancelable: false }
              )  
            }>
              <Text style={{margin: 16,fontWeight: 'bold',color: colors.textColor}}>Logout</Text>
            </TouchableOpacity>
          </SafeAreaView>
      </View>
    ),
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
  }
);

Answer 3

You can use Component class for perform Asyncstorage clear and navigate Login Page. If you use react-navigation this.props has navigation object.

class YourComponent extends Component {
    constructor(props) {
        super(props);
     }

    componentWillMount() {
        Asyncstorage.clear();
        this.props.navigation.navigate('LoginPage')
    }
}
export default YourComponent;

Answer 4

import {StyleSheet,AsyncStorage,Alert, View,SafeAreaView, Text, ActivityIndicator, Dimensions, TextInput,Image, TouchableOpacity, TouchableHighlight} from 'react-native';
import {DrawerItems,DrawerActions} from 'react-navigation-drawer';

 {
            contentComponent:(props) => (
              <View style={{flex:1}}>
                <SideMenu {...props}/>
                    <DrawerItems {...props} />
                    <TouchableOpacity onPress={()=>
                      Alert.alert(
                        'Log out',
                        'Do you want to logout?',
                        [
                          {text: 'Cancel', onPress: () => {this.props.navigation.dispatch(DrawerActions.closeDrawer()) }},
                          {text: 'Confirm', onPress: () => {
                            AsyncStorage.clear();
                            props.navigation.navigate('LoginScreen')
                          }},
                        ],
                        { cancelable: false }
                      )
                    }>
                      <Text style={{margin: 16,fontWeight: 'bold',color: 'red'}}>Logout</Text>
                    </TouchableOpacity>
              </View>
            ),
            drawerOpenRoute: 'DrawerOpen',
            drawerCloseRoute: 'DrawerClose',
            drawerToggleRoute: 'DrawerToggle'
    },

Answer 5

You can create a modal which will do this for you. On click of logout -> display modal using visible attribute and on click of yes then close the modal -> navigate to login screen.

Answer 6

Just use AlertView bro that will help but in the above example if you have an header than this (this.props.navigation.navigate('LoginPage'))

will not make any senses

your view will load below the header

Answer 7

In case you are looking for an answer in navigation version 5 and funcional components:

  const getActiveRouteState = function (
    routes: Route<string>[],
    index: number,
    name: string
  ) {
    return routes[index].name.toLowerCase().indexOf(name.toLowerCase()) >= 0;
  };

function CustomDrawerContent(
    props: DrawerContentComponentProps<DrawerContentOptions>
  ) {
    return (
      <View style={{ flex: 1 }}>
        <DrawerContentScrollView {...props}>
          <View>
            <DrawerItem
              icon={({ color, size }) => <Icon type='AntDesign' name='home' />}
              label='Home'
              focused={getActiveRouteState(
                props.state.routes,
                props.state.index,
                'Home'
              )}
              onPress={() => {
                props.navigation.navigate('Home');
              }}
            />
            <DrawerItem
              icon={({ color, size }) => (
                <Icon type='AntDesign' name='minuscircle' />
              )}
              label='Test'
              focused={getActiveRouteState(
                props.state.routes,
                props.state.index,
                'Test'
              )}
              onPress={() => {
                props.navigation.navigate('Test');
              }}
            />
            <DrawerItem
              icon={({ color, size }) => (
                <Icon type='AntDesign' name='logout' />
              )}
              label='LogOut'
              onPress={async () => {
                await logoutUser();
                setLogginState(false);
              }}
            />
          </View>
        </DrawerContentScrollView>
      </View>
    );
  }

      const AppDrawer = createDrawerNavigator();
      const AppDrawerScreen = () => (
        <AppDrawer.Navigator
          drawerPosition='left'
          drawerContent={(props) => <CustomDrawerContent {...props} />}
        >
          <AppDrawer.Screen
            name='Home'
            component={HomeScreen}
            options={{ drawerLabel: 'Home' }}
          />
          <AppDrawer.Screen name='Test' component={TestScreen} />
        </AppDrawer.Navigator>
      );

This will also help you in case you want to hide an option in the drawer.

Answer 8

Here is a way to implement a logout in a drawer using a react-navigation library.

<Drawer.Screen
    name="Logout"
    component={<Any Dummy Component>}
    listeners={({ navigation }) => ({ 
        state: (e) => {
           if (e.data.state.index === 3) {
              // 3 is index of logout item in drawer

              navigation.replace("Login")
           }
        }
    })}
/>