I am currently working on integrating a Django authentication system into my React Native app.
Within my app.js file, I have imported the authentication context, which means that the initial value of isLoggedIn upon app launch is set to false. The variable isLoggedIn is used in app.js to determine whether to render the login screen when it is false or load AppNavigator to navigate the user into the app when it is true.
Although I have not yet developed the Django backend, I have temporarily set isLoggedIn to true when the login button is pressed without communicating with Django (this will be resolved once I address this issue).
The issue arises at line 15 of App.js:
const { isLoggedIn } = globalContext;
I have carefully reviewed all relevant import statements and am confident that I am exporting and importing correctly. I have also double-checked the import paths.
Additionally, I have confirmed that isLoggedin and setIsLoggedIn are included in the globalContext variable within AuthContext.js. It is passed into the Context.Provider in AuthContext.js and App.js encapsulates the entire app within Provider, making the auth context accessible throughout the app.
Upon initial loading, the app should display the login screen. Users should be able to input text in the two text fields and press the login button to access the app. However, Expo Go presents an error "TypeError: Cannot read property 'isLoggedIn' of undefined" before displaying the login screen.
Hence, I suspect the root of the problem lies within the two source files provided below. This is why I have omitted the login screen code, as the Login code is not executed due to the program halting beforehand.
App.js
import React, { useEffect, useContext } from "react";
import {
AppRegistry,
View,
} from "react-native";
import SplashScreen from "react-native-splash-screen";
import { NavigationContainer } from "@react-navigation/native";
import AppNavigator from "./Navigation/AppNavigator";
import { Context, Provider } from "./Auth/AuthContext";
import Login from "./Screens/LoginScreen";
export default function App() {
const globalContext = useContext(Context);
const { isLoggedIn } = globalContext;
useEffect(() => {
SplashScreen.hide();
}, []);
return (
<Provider>
<View style={{ flex: 1 }}>
<NavigationContainer>
{isLoggedIn ? <AppNavigator /> : <Login />}
</NavigationContainer>
</View>
</Provider>
);
}
AppRegistry.registerComponent("Provisioner", () => App);
AuthContext.js
import React, { useState, useEffect, createContext } from "react";
const Context = createContext();
const Provider = ({ children }) => {
const [domain, setDomain] = useState("http://*********.uksouth.cloudapp.azure.com:8000");
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [appSettings, setAppSettings] = useState({});
function initAppSettings() {
fetch(`${domain}/api/v1.0/app/settings`, {
method: "GET",
})
.then(res => {
if (res.ok) {
return res.json();
} else {
throw res.json();
}
})
.then(json => {
setAppSettings(json);
})
.catch(error => {
console.log("Bad JSON");
console.log(error);
});
}
useEffect(() => {
initAppSettings();
}, []);
const globalContext = {
domain,
isLoggedIn,
setIsLoggedIn,
appSettings,
setAppSettings
};
return <Context.Provider value={globalContext}>{children}</Context.Provider>;
};
export { Context, Provider };