Hola estoy intentando hacer una autenticacion en reac native expo usando react navigation y context para pasarle el estado de autenticacion y asi renderise las pantallas de login o de home, el proveedor del contexto se usa en app.js y este solo renderiza un componente index.js que usara la variable de contexto para hacer la validacion de autenticacion.
Esta es la definicion de mi contexto:
// GlobalContex.js
import React, { createContext } from "react";
export const GlobalContext = createContext({});
export default function GlobalContextProvider({ children }) {
const [tokensession, setTokensession] = React.useState(null);
return (
<GlobalContext.Provider value={{ tokensession, setTokensession }}>
{children}
</GlobalContext.Provider>
);
}
Envolviendo los componente con el proveedor:
//App.js
import * as React from "react";
import GlobalContextProvider from "./Utils/Contexts/GlobalContext";
import Index from "./Screens/Index";
export default function App() {
return (
<GlobalContextProvider>
<Index />
</GlobalContextProvider>
);
}
Llamo al contexto en mi Index.js y todo bien el problema esta en que al colocar mi variable dentro de stack. navigation me sale este error:
TypeError: Cannot read property '_context' of undefined
Sin embargo al colocar esa variable dentro de una etiqueta Text funciona correctamente.
//Index.js
import React, { useContext, useState } from "react";
import { PaperProvider, Text } from "react-native-paper";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { GlobalContext } from "../Utils/Contexts/GlobalContext";
import { SignInScreen } from "./Login/SignInScreen";
import AppLayout from "./App/AppLayout";
import { View } from "react-native";
export default function Index() {
const Auth = useContext(GlobalContext);
const [first] = useState(Auth.tokensession);
console.log("tokensession: ", Auth.tokensession);
const Stack = createNativeStackNavigator();
return (
<>
<PaperProvider>
<NavigationContainer>
<Stack.Navigator>
{Auth.tokensession == null ? (
<Stack.Screen
name='SignIn'
component={SignInScreen}
options={{
title: "",
headerStyle: { backgroundColor: "#eab406" },
}}
/>
) : (
<Stack.Screen
name='AppLayout'
component={AppLayout}
options={{
headerShown: false,
}}
/>
)}
</Stack.Navigator>
</NavigationContainer>
</PaperProvider>
{/* <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>{Auth.tokensession == null ? "hola" : null}</Text>
</View> */}
</>
);
}
Que podria estar pasando?