Failed to redirect after login in React Native

Question

there. I am building a react native apps with crna/expo. There will be four screens and one of them is a protected screen. I would like to redirect the screen to Login screen if user has not logged in yet. At this time, my code is working fine and registered user can successfully logged in but it didn't redirect to the protected screen.

This is my snippet code from App.js

const AppTabNavigator = createBottomTabNavigator( {
  HomeScreen: {
    screen: HomeScreen,
  },
  ProfileScreen: {
    screen: Profile_auth, //this is the protected screen
  },
  AboutScreen: {
    screen: AboutScreen,
}, {
  animationEnabled: true,
  swipeEnabled: true,
  tabBarPosition: "bottom",
  backgroundColor: '#5eac1a',
});

This is my snippet code from Profile_auth, to check whether user has logged in or not.

export default createSwitchNavigator({
    ProfileScreen: {
        screen: ProfileScreen,
    },
    Login:{
        screen: Login,
    },
    AuthLoading:{
        screen: AuthLoading,
    },

},
    {
        initialRouteName: 'AuthLoading',
    }
);

This is my snippet code from AuthLoading.js

export default class AuthLoading extends React.Component{
    constructor(){
        super();
        this._checkToken();
    }
    _checkToken = async () =>{
        const token = await AsyncStorage.multiGet(['token', 'user_id']);
        this.props.navigation.navigate(token? 'ProfileScreen' : 'Login')
    };
    render(){
        return(
            <View>
                <ActivityIndicator/>
                <StatusBar barStyle="default"/>
            </View>
            );
    }
}

If user hasn't logged in yet, they will be redirected to Login screen. AND this is the problem. I can't redirect to Profilescreen after successfully logged in. This is my snippet code in Login.js

async _userLogin(navigate) {
    const {username} = this.state;
    const {pass} = this.state;
    let login = {
                'login': username,
                'password': pass,
            };
        fetch(url, {
            credentials: 'include',
            method: "POST",
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(login),
        })
        .then((response)=>response.json())
            .then((responseJson)=> {
                console.warn(responseJson);
            if(responseJson.status){
                this.showAlert();
                AsyncStorage.multiSet([
                        [token, token_value],
                        [user_id, user_id_value]
                    ]);
                this.props.navigation.dispatch(ProfileScreen); //THIS IS THE PROBLEM
            }
            else {
                Alert.alert('Login Failed', 'Invalid username or password');
            }
        }).catch(function(error) {
           console.log(error);
           return error;
       });
    }

Anyone can solve this problem? Please help... Thank you.

Osiel Lima Osiel Lima · Accepted Answer · 2018-10-29T07:13:35

I think you are doing this by the hard way. Can you consider do it like this example?:

In render method of App.js do something like this:

<View style={styles.container}>
  {this.state.user ? <LoggedIn /> : <LoggedOut />}
</View>

And your login function when is success dispatch an action that set user on redux state.

Failed to redirect after login in React Native

1 Answers