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));
});
};
};
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();
})