Tenho uma aplicação em React Native com a rota inicial apontando para a tela AuthLoadingScreen que verifica se o usuário tá logado e redireciona para Login ou Home, como o usuário não tá logado, o resultado esperado era que AuthLoadingScreen redirecionasse para a tela de Login, mas isso não acontece, a aplicação permanece em AuthLoadingScreen sem fazer o redirecionamento esperado.
Auth Loading Screen
import React, { Component } from "react"; import { View, ActivityIndicator, StatusBar, Dimensions } from "react-native"; import {getToken} from '../../services/AuthService'; import styles from "./styles"; import { NavigationParams, NavigationScreenProp, NavigationState, } from 'react-navigation'; const width = Dimensions.get("screen").width; interface Props { navigation: NavigationScreenProp<NavigationState, NavigationParams>; } export default class Login extends Component<Props> { constructor(props: any) { super(props); this._bootstrapAsync(); } _bootstrapAsync = async () => { const userToken = getToken(); this.props.navigation.navigate(userToken ? 'Home' : 'Login'); }; render() { return( <View> <ActivityIndicator /> <StatusBar barStyle="default" /> </View> ); } }
AuthService
import AsyncStorage from '@react-native-community/async-storage'; export const setToken = (value: string) => AsyncStorage.setItem("TOKEN", value); export const removerToken = () => AsyncStorage.removeItem('token'); export const getToken = async () => { return await AsyncStorage.getItem('token'); }
Routes
import {createStackNavigator, createAppContainer} from 'react-navigation'; import Login from './screens/login/Login'; import AuthLoadingScreen from './screens/login/AuthLoadingScreen'; import Home from './screens/home/Home'; export const LoginRoute = createStackNavigator({ Login: { screen: Login, navigationOptions: { header: null } } }); export const HomeRoute = createStackNavigator({ Login: { screen: Home, navigationOptions: { headerLeft: null } } }); const AppContainer = createAppContainer( createStackNavigator({ AuthLoadingScreen: { screen: AuthLoadingScreen }, LoginScreen: { screen: LoginRoute }, HomeScreen: { screen: HomeRoute } }, { initialRouteName: 'AuthLoadingScreen', } )); export default AppContainer;