Logout in drawer navigation is not working in React Native using asyncstorage?

Question

I have created logout button in drawer navigation. When user clicks on logout button the button is getting clicked and Asyncstorage is also cleared but it is not navigating to login screen why so ? After user clicks on logout button it is getting clicked but user is not navigated to signup/signin i.e login screen why so ?

drawernavigation component:

class DrawerScreen extends Component {

  logoutUser = async () => {
    console.log('Logout clicked')

      try {
        await AsyncStorage.clear();
        this.props.logout();
        this.props.navigation.closeDrawer();
        this.props.navigation.navigate('Login');
      } catch (error) {
         console.log("Error in clearing AsyncStorage", error);
      }
  }

  render () {

    const { logged_in_user } = this.props;

    return (
      <SafeAreaView style={{flex: 1}}>
        <ScrollView>

          <TouchableOpacity onPress={() => this.props.navigation.closeDrawer()}>
              <Image source={require('../../assets/images/close.png')} style={{width: 24, height: 24, resizeMode: 'contain', marginLeft: 15, marginTop: 15}}/>
          </TouchableOpacity>
    </ScrollView>

      <TouchableOpacity onPress={this.logoutUser}>
            <View style={styles.bottomDrawerItem2}>
                <Image source={require('../../assets/images/logout.png')} style={styles.drawerItemImage}/>
                <Text style={styles.drawerItemText}>Logout</Text>
            </View>
          </TouchableOpacity>
          </View>
      </SafeAreaView>
    );
  }
}

login screen:

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

    componentDidMount = async () => {
        let { navigation, logged_in_user } = this.props;

        if (!logged_in_user) {
            logged_in_user = await AsyncStorage.getItem('logged_in_user');
            logged_in_user = JSON.parse(logged_in_user);
            this.props.login(logged_in_user);
            // TODO: Check if it's correct format
        }
        if (logged_in_user) {
            navigation.navigate('SignedIn');
        }
    }

    render() {
        return <LoginView {...this.props} />;
    }
}

navigation.js:

const DrawerNavigator = createDrawerNavigator({
    Home:{
        screen: TabNavigation,
    }
},
{
    initialRouteName: 'Home',
    contentComponent: DrawerScreen,
    drawerWidth: 300
},
);

    const AppStackNavigator = createStackNavigator({

        //important: key and screen name (i.e. DrawerNavigator) should be same while using the drawer navigator inside stack navigator.

        DrawerNavigator:{
            screen: DrawerNavigator,
            navigationOptions: {
                header: null
            }
        }
    });

    const SignedOutNavigator = createSwitchNavigator({
        Login: {
            screen: LoginContainer,
            navigationOptions: { header: null, gesturesEnabled: false }
        },
        SignedIn: {
            screen: AppStackNavigator,
            navigationOptions: { header: null, gesturesEnabled: false }
        }
    },
    {
        initialRouteName: 'Login',
    });

Redux:

actions:

function login(logged_in_user) {
  return {
    type: LOGIN,
    logged_in_user
  };
}

function logout() {
  return {
    type: LOGOUT,
  };
}

reducer:

const initialLoginState = {
  logged_in_user: null
};

function loginReducer(state = initialLoginState, action) {
  switch (action.type) {
    case LOGIN:
      return { ...state, logged_in_user: action.logged_in_user };
    case LOGOUT:
      return { ...state, logged_in_user: null };
    default:
      return state;
  }
}

Culzean Culzean · Accepted Answer · 2019-02-25T10:55:19

Is logged_in_user a prop of LoginContainer? Be clear on where this variable is coming from. In this case that is AsyncStorage and not the props of the component. I suspect that logged_in_user is always resolving to false and that is why signout never works.

        let { navigation, login } = this.props;
        let logged_in_user = await AsyncStorage.getItem('logged_in_user');

        if (!logged_in_user) {

            logged_in_user = await AsyncStorage.setItem('logged_in_user', !logged_in_user);
            login(true);
        }
        if (logged_in_user) {
            logged_in_user = await AsyncStorage.setItem('logged_in_user', !logged_in_user);
            navigation.navigate('SignedIn');
        }

Logout in drawer navigation is not working in React Native using asyncstorage?

1 Answers