Search code examples
reactjsreact-nativereduxreact-navigationonpress

React Navigation Drawer OnPress Not Firing Correctly


I am using react native and react navigation. I am creating a react navigation drawer and then inside of the drawer using my own format. I am struggling to get my logout button to work correctly.

This works fine:

 <TouchableOpacity onPress={this.props.logoutUser()}>
     <Text style={{margin: 16,fontWeight: 'bold'}}>Logout</Text>
 </TouchableOpacity>

But I want to include an alert and make sure the user wants to sign out. This doesn't work. It signs out the user/ next time I log into the app I can see that they are logged out, but it doesn't trigger a refresh for my app until I manually refresh it.

    <TouchableOpacity onPress={()=>
          Alert.alert(
            'Log out',
            'Do you want to logout?',
            [
              {text: 'Cancel', onPress: () => {return null}},
              {text: 'Confirm', onPress: () => {
                this.props.logoutUser
              }},
            ],
            { cancelable: false }
          )  
        }>
        <Text style={{margin: 16,fontWeight: 'bold'}}>Logout</Text>
    </TouchableOpacity>

For reference, here is how I am rendering login screen vs main page (props.restoring) changes based on if the user is logged in or not. For some reason it only updates with the top call, I am wondering if the drawer or alert affect how I call the function:

const ChatAppComponent = props => {
  if (props.restoring) {
    return <ActivityIndicator style={styles.activityIndicator} />
  } else {
    if (props.logged) {
      return <DashboardNavigator />
    } else {
      return <AuthScreen />
    }
  }
}

EDIT: Adding in the logout function

export const logoutUser = () => {
  return dispatch => {
    dispatch(sessionLoading());

    LoginManager.logOut();
    firebaseService
      .auth()
      .signOut()
      .then(async () => {
        await GoogleSignin.revokeAccess();
        await GoogleSignin.signOut();
        dispatch(sessionLogout());
      })
      .catch(error => {
        dispatch(sessionError(error.message));
      });
  };
};

Solution

  • The answer has to do with async await. Not sure why it doesn't work with async await before, but I had to move the dispatch action above the Google methods.

    firebaseService
              .auth()
              .signOut()
              .then(async () => {
                dispatch(sessionLogout());
                await GoogleSignin.revokeAccess();
                await GoogleSignin.signOut();
              })