React context undefined - react-native

Question

I have a basic authentication form created that works when I have all the code within the App.js file.
However, when I attempt to refactor the pages into separate files, the context is throwing an exception of it being empty.
App.js
import 'react-native-gesture-handler';
import * as React from 'react';
import { Button, Text, TextInput, View, StyleSheet } from 'react-native';
import AsyncStorage from '#react-native-community/async-storage';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import AuthContext from './src/utils/AuthContext';
import HomeScreen from './src/components/HomeScreen';
import SignInScreen from './src/components/SignInScreen';
import SplashScreen from './src/components/SplashScreen';
const Stack = createStackNavigator();
export default function App() {
const [state, dispatch] = React.useReducer(
(prevState, action) => {
switch (action.type) {
case 'RESTORE_TOKEN':
return {
...prevState,
userToken: action.token,
isLoading: false,
};
case 'SIGN_IN':
return {
...prevState,
isSignout: false,
userToken: action.token,
};
case 'SIGN_OUT':
return {
...prevState,
isSignout: true,
userToken: null,
};
}
},
{
isLoading: true,
isSignout: false,
userToken: null,
}
);
React.useEffect(() => {
// Fetch the token from storage then navigate to our appropriate place
const bootstrapAsync = async () => {
let userToken;
try {
userToken = await AsyncStorage.getItem('userToken');
} catch (e) {
// Restoring token failed
console.log("Restoring token failed" + e);
}
dispatch({ type: 'RESTORE_TOKEN', token: userToken });
};
bootstrapAsync();
}, []);
const authContext = React.useMemo(
() => ({
signIn: async data => {
dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
},
signUp: async data => {
dispatch({ type: 'TO_SIGNUP_PAGE' });
},
signOut: () =>
dispatch({ type: 'SIGN_OUT' }),
}),
[]
);
return (
<AuthContext.Provider value={authContext}>
<NavigationContainer>
<Stack.Navigator>
{state.isLoading ? (
// We haven't finished checking for the token yet
<Stack.Screen name="Splash" component={SplashScreen} />
) : state.userToken == null ? (
// No token found, user isn't signed in
<Stack.Screen name="SignIn" component={SignInScreen} options={{ title: 'Sign in', animationTypeForReplace: state.isSignout ? 'pop' : 'push',}} />
) : (
// User is signed in
<Stack.Screen name="Home" component={HomeScreen} />
)}
</Stack.Navigator>
</NavigationContainer>
</AuthContext.Provider>
);
}
AuthContext.js
import { createContext } from 'react';
const AuthContext = createContext();
export default AuthContext;
HomeScreen.js
import React, { useContext } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import AuthContext from '../utils/AuthContext';
const HomeScreen = () => {
const { signOut } = useContext(AuthContext);
return (
<AuthContext>
<Text>Signed in!</Text>
<Button title="Sign out" onPress={signOut} />
</AuthContext>
);
}
export default HomeScreen;
Error:
I have spent many hours on this and looked through countless tutorials, for the life of me I can't figure out what I'm missing...

Answer 1

You are not exporting the context. Your App.js file exports the App component but you are trying to access the AuthContext from that file.
The best approach to take is to place the context in a separate file and import it to both App.js and HomeScreen.js
Your context file should look like this
import { createContext } from 'react';
const AppContext = createContext();
export default AppContext;
And you can import in other files like below
import AppContext from './AppContext';