Mi aplicación se bloquea sin registros de errores en la consola cuando intento navegar entre pantallas según el método onAuthStateChanged().
Paquetes de navegación utilizados: "@react-navigation/native": "^6.0.6", "@react-navigation/stack": "^6.0.11",
¿Puede alguien ayudarme?
Cargando.js
import React, { useEffect } from "react"; import firebase from '../config/firebase'; import { View, StyleSheet, ActivityIndicator, StatusBar } from "react-native"; import { CommonActions } from '@react-navigation/native'; export default function Loading({ navigation }) { StatusBar.setBarStyle('dark-content'); useEffect(() => { console.log('from useEffect'); firebase.auth().onAuthStateChanged((user)=>{ if(user!=null ){ navigation.dispatch( CommonActions.reset({ index: 1, routes: [ { name: 'HomeRoute' }, ], }) ) // navigation.navigate('HomeRoute') }else{ navigation.dispatch( CommonActions.reset({ index: 1, routes: [ { name: 'LoginRoute' }, ], }) ) // navigation.navigate('LoginRoute'); } }) }) return ( <View style={styles.container}> <ActivityIndicator size='large' color='#333333' style={styles.indicator} ></ActivityIndicator> </View> ); }Aplicación.JS
import Login from './screens/Login'; import Home from './screens/Home'; import Loading from './screens/Loading'; import { NavigationContainer } from "@react-navigation/native"; import { createStackNavigator } from "@react-navigation/stack"; const Stack = createStackNavigator(); export default function App() { return ( <NavigationContainer> <Stack.Navigator initialRouteName='LoadingRoute' screenOptions={{headerShown: false}}> <Stack.Screen name='LoginRoute' component={Login} /> <Stack.Screen name='HomeRoute' component={Home} /> <Stack.Screen name='LoadingRoute' component={Loading} /> </Stack.Navigator> </NavigationContainer> ); }Tienes la acción de envío un poco apagada.
Está pasando un index: 1 que le dice a la navegación que enfoque la ruta en el índice 1 una vez que finaliza la navegación.
El problema es que solo tiene una ruta dentro de routes , por lo que debe indicarle a la navegación que enfoque la ruta en el índice 0 de esta manera
navigation.dispatch( CommonActions.reset({ index: 0, routes: [{ name: "LoginRoute" }], }) );También recomendaría leer los documentos oficiales sobre cómo configurar su flujo de autenticación con react-navigation.
TLDR: lo que debe hacer básicamente es representar condicionalmente las rutas en función del estado de inicio de sesión del usuario y dejar que la navegación reactiva se encargue del resto por usted.