0

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?

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.