He agregado un estado llamado roleSelected el valor inicial para este roleSelected es false , que se presenta en mi AuthContext
const [roleSelected, setRoleSelected] = useState(false);
Las pantallas de navegación de mi pila son así,
<Stack.Screen name={routes.LOGIN} component={Login} />
<Stack.Screen name={routes.SIGNUP} component={Signup} />
<Stack.Screen name={routes.ROLE_SELECTION} component={Role} />
Lo que estoy tratando de hacer : Entonces, si roleSelection es false , no importa en qué pantalla esté actualmente en esta pila, quiero redirigir la ruta ROLE_SELECTION del usuario. Entonces, para este caso, agregué el siguiente código en mis pantallas de inicio de Login y Signup ,
const Login = ({navigation}) => {
...
const {roleSelected} = useContext(AuthContext);
useEffect(() => {
!roleSelected && navigation.navigate(routes.ROLE_SELECTION);
console.log(roleSelected);
}, [navigation]);
Cada vez que la aplicación inicia, el usuario redirige a la ruta ROLE_SELECTION , pero aún así el usuario puede hacer clic en volver e ir a la pantalla de inicio de Login , no quiero que eso suceda. Realmente aprecio si alguien pudiera ayudar gracias.
¿Intentó en lugar de navigation.navigate usar navigation.reset que borra el estado del navegador y lo reemplaza con una nueva ruta?
Intente agregar un useEffect() más con una matriz de dependencia vacía en su código.
useEffect(() => {
!roleSelected && navigation.navigate(routes.ROLE_SELECTION);
console.log(roleSelected);
}, []);
Intenté renderizar condicionalmente las pantallas de la pila de esta manera,
{!auth && <Stack.Screen name={routes.LOGIN} component={Login} />}
{!auth && <Stack.Screen name={routes.SIGNUP} component={Signup} />}
{auth && <Stack.Screen name={routes.ROLE_SELECTION} component={Role} />}