title: How to implement Log out Functionality in react native
body: <p>What is the best way to implement the logout functionality in react native in my case when i click the logout button it works fine but next time when i again login and click it it does not work.</p>
  
  <pre><code>import React, {Component} from 'react';
  import {AsyncStorage} from 'react-native';
  import {url} from '../globals';
  import Toast from 'react-native-simple-toast';
  
  class Logout extends Component {
    constructor(props) {
      super(props);
      this.onLogOutPressed = this.onLogOutPressed.bind(this);
    }
    static navigationOptions = {
      header: null,
    };
    componentWillMount() {
      this.onLogOutPressed();
      this.props.navigation.addListener('willFocus', this.onLogOutPressed);
    }
    async onLogOutPressed() {
      try {
        let response = await fetch(url + '/auth/Logout', {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
        });
        if (response.status &gt;= 200 &amp;&amp; response.status &lt; 300) {
          console.log('Request Status ', response.status);
          let res = await response.json();
          console.log('Logout response:', res);
          Toast.showWithGravity(res, Toast.LONG, Toast.CENTER);
          await AsyncStorage.clear();
          this.props.navigation.navigate('login');
        } else {
          throw 'Enable to parse';
        }
      } catch (error) {
        console.log('error ' + error);
      }
    }
    render() {
      return null;
    }
  }
  export default Logout;
  </code></pre>
  
  <p>And this is the stack navigator and drawer navigation when i click on the logout button for the first time it work fine but second time it move to me last visited page</p>
  
  <pre><code>import React, {Component} from 'react';
  import {
    StyleSheet,
    Dimensions,
    SafeAreaView,
    View,
    Text,
    ScrollView,
    Image,
  } from 'react-native';
  import Icon from 'react-native-vector-icons/Ionicons';
  
  import Login from './src/pages/Login';
  import Companies from './src/admin/Companies';
  import LicensesTable from './src/admin/VerifyLicenses';
  import EditLicense from './src/admin/EditLicense';
  import ActionEdit from './src/admin/EditLicenseDetails';
  import PricingPlan from './src/admin/PricingPlan';
  import {createStackNavigator} from 'react-navigation-stack';
  import {createDrawerNavigator, DrawerItems} from 'react-navigation-drawer';
  import {createSwitchNavigator, createAppContainer} from 'react-navigation';
  import AdmDash from './src/admin/AdminDashboard';
  import Users from './src/admin/Users';
  import Logout from './src/pages/Logout';
  
  global.currentScreenIndex = 0;
  export default class App extends Component {
    render() {
      console.disableYellowBox = true;
      return  &lt;Draw /&gt;;
    }
  }
  
  const CompaniesStackNavigator = createStackNavigator(
    {
      CompaniesNavigator: {screen: Companies},
    },
    {
      defaultNavigationOptions: ({navigation}) =&gt; {
        return {
          title: 'Companies',
          headerStyle: {backgroundColor: '#1D60D2'},
          headerTintColor: 'white',
          headerLeft: (
            &lt;Icon
              style={{paddingLeft: 10, color: 'white'}}
              onPress={() =&gt; navigation.openDrawer()}
              name="md-menu"
              size={30}
            /&gt;
          ),
        };
      },
    },
  );
  
  
  const PricingStackNavigator = createStackNavigator(
    {
      PricingNavigator: {screen: PricingPlan},
    },
    {
      defaultNavigationOptions: ({navigation}) =&gt; {
        return {
          title: 'Pricing Plan',
          headerStyle: {backgroundColor: '#1D60D2'},
          headerTintColor: 'white',
          headerLeft: (
            &lt;Icon
              style={{paddingLeft: 10, color: 'white'}}
              onPress={() =&gt; navigation.openDrawer()}
              name="md-menu"
              size={30}
            /&gt;
          ),
        };
      },
    },
  );
  
  
  
  const UserStackNavigator = createStackNavigator(
    {
      UserNavigator: Users,
    },
    {
      defaultNavigationOptions: ({navigation}) =&gt; {
        return {
          title: 'Users',
          headerStyle: {backgroundColor: '#1D60D2'},
          headerTintColor: 'white',
          headerLeft: (
            &lt;Icon
              style={{paddingLeft: 10, color: 'white'}}
              onPress={() =&gt; navigation.openDrawer()}
              name="md-menu"
              size={30}
            /&gt;
          ),
        };
      },
    },
  );
  
  
  const DashboardStackNavigatorAdmin = createStackNavigator(
    {
      DashboardNavigator: {screen: AdmDash},
    },
    {
      defaultNavigationOptions: ({navigation}) =&gt; {
        return {
          title: 'Dashboard',
          headerStyle: {backgroundColor: '#1D60D2'},
          headerTintColor: 'white',
          headerLeft: (
            &lt;Icon
              style={{paddingLeft: 10, color: 'white'}}
              onPress={() =&gt; navigation.openDrawer()}
              name="md-menu"
              size={30}
            /&gt;
          ),
        };
      },
    },
  );
  
  const LicensesStackNavigator = createStackNavigator(
    {
      LicensesNavigator: {screen: LicensesTable},
    },
    {
      defaultNavigationOptions: ({navigation}) =&gt; {
        return {
          title: 'Verify Licenses',
          headerStyle: {backgroundColor: '#1D60D2'},
          headerTintColor: 'white',
          headerLeft: (
            &lt;Icon
              style={{paddingLeft: 10, color: 'white'}}
              onPress={() =&gt; navigation.openDrawer()}
              name="md-menu"
              size={30}
            /&gt;
          ),
        };
      },
    },
  );
  
  const LogoutStackNavigator = createStackNavigator({
    LogOutNAvigator: {
      screen: Logout,
    },
  });
  
  const AppNavigator = createStackNavigator({
    login: {screen: Login},
    EditLicense: {screen: EditLicense},
    ActionEdit: {screen: ActionEdit},
  },
  {
    initialRouteName: "login"
  });
  
  
  
  const AppDrawerNavigator = createDrawerNavigator(
    {
      login: {
        screen: AppNavigator,
        navigationOptions: {
          drawerLabel: () =&gt; null,
        },
      },
      Home: {
        screen: DashboardStackNavigatorAdmin,
        navigationOptions: {
          drawerLabel: () =&gt; 'Dashboard',
          drawerIcon: ({tintColor}) =&gt; (
            &lt;Icon name="md-home" style={{fontSize: 24, color: tintColor}} /&gt;
          ),
        },
      },
  
      Users: {
        screen: UserStackNavigator,
        navigationOptions: {
          drawerIcon: ({tintColor}) =&gt; (
            &lt;Icon name="md-person" style={{fontSize: 24, color: tintColor}} /&gt;
          ),
        },
      },
  
      'Pricing Plan':{
        screen:PricingStackNavigator,
        navigationOptions: {
          drawerIcon: ({tintColor}) =&gt; (
            &lt;Icon name="md-pricetag" style={{fontSize: 24, color: tintColor}} /&gt;
          ),
        },
      },
  
      Licenses: {
        screen: LicensesStackNavigator,
        navigationOptions: {
          drawerIcon: ({tintColor}) =&gt; (
            &lt;Icon name="md-briefcase" style={{fontSize: 24, color: tintColor}} /&gt;
          ),
        },
      },
  
      Companies: {
        screen: CompaniesStackNavigator,
        navigationOptions: {
          drawerIcon: ({tintColor}) =&gt; (
            &lt;Icon name="md-card" style={{fontSize: 24, color: tintColor}} /&gt;
          ),
        },
      },
  
      Logout: {
        screen: LogoutStackNavigator,
        navigationOptions: {
          drawerIcon: ({tintColor}) =&gt; (
            &lt;Icon name="md-log-out" style={{fontSize: 24, color: tintColor}} /&gt;
          ),
        },
      },
    },
    {
      contentComponent: props =&gt; (
        &lt;SafeAreaView style={styles.container}&gt;
          &lt;View&gt;
            &lt;Image
              source={require('./src/Images/download.png')}
              style={styles.sideMenuProfileIcon}
            /&gt;
            &lt;Text&gt;&lt;/Text&gt;
          &lt;/View&gt;
          &lt;ScrollView&gt;
            &lt;DrawerItems {...props} /&gt;
          &lt;/ScrollView&gt;
        &lt;/SafeAreaView&gt;
      ),
      drawerWidth: Dimensions.get('window').width - 130,
    },
  );
  
  const AppSwitchNavigator = createSwitchNavigator({
    Dashboard: {screen: AppDrawerNavigator},
    Users: {screen: Users},
    Companies: {screen: Companies},
    Licenses: {screen: LicensesTable},
  });
  
  const Draw = createAppContainer(AppSwitchNavigator);
  
  const styles = StyleSheet.create({
    IconS: {
      paddingLeft: 10,
    },
    HeaderStyle: {
      backgroundColor: '#1D60D2',
    },
    container: {
      flex: 1,
      alignContent: 'center',
      justifyContent: 'center',
    },
    sideMenuContainer: {
      width: '100%',
      height: '100%',
      backgroundColor: '#fff',
      alignItems: 'center',
      paddingTop: 20,
    },
    sideMenuProfileIcon: {
      resizeMode: 'center',
      width: 150,
      height: 150,
      marginTop: 20,
      borderRadius: 75,
      alignContent: 'center',
      justifyContent: 'center',
    },
  });
  </code></pre>