React Navigation: best way to implement logout navigation?

user_10864356 0
Viewed 6363

I'm using react-navigation@4.0.10 in my React Native app, and have a Login screen and two TabNavigator screens. Logging in from the Login screen takes me to TabNavigator_1, and if I log out from TabNavigator_1 I just use this.props.navigation.goBack(). The problem is, to get to TabNavigator_2 I click a button in TabNavigator_1 which triggers this.props.navigation.navigate('TabNavigator_2'), so TabNavigator_2 is now on top of the stack, and calling this.props.navigation.goBack() would just take me back to TabNavigator_1 instead of Login.

What's the best way to approach this, so that clicking Log out from TabNavigator_1 and TabNavigator_2 takes me back to Login?

react-navigation-stack stack-navigator react-navigation react-native reactjs
4 Answers

Using

this.props.navigation.goBack()

to go back to login screen is pretty bad pattern to me.

Pattern I recommend:

1) After successfull login, you store logged-in user(only id and essentials credentials) in your asyncstorage.

2)After pressing Logout Button, you clear that credentials from asyncStorage.

In your Initial screeen

Check if there is logged-in user info inside asyncStorage

If yes -> got to tabNavigator screen

else -> go to login screen

Rough Demo

<Stack.Navigator>
  {isLoggedIn ? (

    <Stack.Screen name="Home" component={TabNavigator} />

  ) : (
    <Stack.Screen name="SignIn" component={LogInScreen} />
  )}
</Stack.Navigator>
user_58829680

You can try using :

this.props.navigation.navigate("Login")

Based on this documentation:

React Navigation 4.x

It will be better if you clear the asyncStorage after user clicked the logout button.

user_123785010

First create TabNavigator_1 like this:-

const TabNavigator1 = createBottomTabNavigator({
 Home: HomeScreen,
Settings: SettingsScreen,
});

create second TabNavigator_2 like this:-

const TabNavigator2 = createBottomTabNavigator({
 Home: HomeScreen,
 Settings: SettingsScreen,
});

Then Stack Navigator :- 

  const StackNavigator = createStackNavigator(
{
  Login: LoginScreen,
  Tab1: TabNavigator1,
  Tab2: TabNavigator2,
},
{
  initialRouteName: 'Login',
}
);

A main Main Navigator: - 

{this.state.isLogin ? <StackNavigator/> : <TabNavigator1/>}

on LogOut you can go like:- 

onPress=()=>{this.props.navigation.navigate('Login')}

OR

onPress=()=>{this.props.navigation.push('Login')}

Hope it help!!!

user_104074850

Dispatch a reset action and navigate to the Login Screen:

import { CommonActions } from "@react-navigation/native";

....

navigation.dispatch(
  CommonActions.reset({
    index: 0,
    routes: [{ name: "LoginScreen" }],
  })
);

This avoids undesired behavior such as a secondary Tab remaining selected.

user_22919350
Related