How to access navigation in app.js react native? - react-native

Question

I am creating a react native app, I want to be able to go straight to the homepage if login info is stored in async storage. However, I can't work out how to get navigate to work in app.js!
Error: Coulden't find a navigation object. Is your component inside a NavigationContainer?
App.js snippet:
import {useNavigation, NavigationContainer} from '#react-navigation/native';
const Stack = createNativeStackNavigator();
const App = () => {
const navigation = useNavigation();
useEffect(() => {
const getLoginData = async () => {
try {
const loginData = await AsyncStorage.getItem('loginData');
const coachingScreenCompleted = await AsyncStorage.getItem(
'CoachingScreenCompleted',
);
if (loginData !== undefined) {
coachingScreenCompleted
? navigation.navigate('LoggedInView', JSON.parse(loginData))
: navigation.navigate('CoachingScreen');
}
} catch (err) {
console.log(err);
}
};
getLoginData().catch(console.error);
}, []);
Full code of app.js
import React, {useState, useEffect} from 'react';
import {
DarkTheme as NavigationDarkTheme,
DefaultTheme as NavigationDefaultTheme,
} from '#react-navigation/native';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import LoginScreen from './screen/LoginScreen';
import ForgottenPasswordStepOne from './screen/ForgottenPasswordScreens/ForgottenPasswordStepOne';
import ForgottenPasswordStepTwo from './screen/ForgottenPasswordScreens/ForgottenPasswordStepTwo';
import ForgottenPasswordStepThree from './screen/ForgottenPasswordScreens/ForgottenPasswordStepThree';
import RegisterHalfMemberStepTwo from './screen/RegisterScreens/RegisterHalfMemberStepTwo';
import RegisterHalfMemberStepThree from './screen/RegisterScreens/RegisterHalfMemberStepThree';
import RegisterStepOne from './screen/RegisterScreens/RegisterStepOne';
import RegisterStepTwo from './screen/RegisterScreens/RegisterStepTwo';
import RegisterStepThree from './screen/RegisterScreens/RegisterStepThree';
import {
adaptNavigationTheme,
MD3LightTheme,
Provider as PaperProvider,
} from 'react-native-paper';
import ThemeContext, {isDarkColorScheme} from './helpers/ThemeContext';
import useColours from './helpers/useColours';
import {createMaterialBottomTabNavigator} from '#react-navigation/material-bottom-tabs';
import {
customDarkColors,
customFontThemes,
customLightColors,
} from './helpers/theme';
import SplashScreen from 'react-native-splash-screen';
import {YellowBox} from 'react-native';
import CoachingCarousel from './screen/CoachingScreen';
import LoggedInView from './LoggedInView';
import AsyncStorage from '#react-native-async-storage/async-storage';
import {useNavigation, NavigationContainer} from '#react-navigation/native';
const Stack = createNativeStackNavigator();
const App = () => {
const navigation = useNavigation();
useEffect(() => {
const getLoginData = async () => {
try {
const loginData = await AsyncStorage.getItem('loginData');
const coachingScreenCompleted = await AsyncStorage.getItem(
'CoachingScreenCompleted',
);
if (loginData !== undefined) {
coachingScreenCompleted
? navigation.navigate('LoggedInView', JSON.parse(loginData))
: navigation.navigate('CoachingScreen');
}
} catch (err) {
console.log(err);
}
};
getLoginData().catch(console.error);
}, []);
useEffect(() => {
YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
}, []);
useEffect(() => {
SplashScreen.hide();
}, []);
const colours = useColours();
const [darkMode, setDarkMode] = useState(isDarkColorScheme);
const toggleTheme = () => {
setDarkMode(!darkMode);
};
const {LightTheme, DarkTheme} = adaptNavigationTheme({
light: NavigationDefaultTheme,
dark: NavigationDarkTheme,
});
const CombinedDefaultTheme = {
...MD3LightTheme,
...LightTheme,
colors: {
...MD3LightTheme.colors,
...LightTheme.colors,
...customLightColors,
},
fonts: {
...MD3DarkTheme.fonts,
...customFontThemes,
},
};
const CombinedDarkTheme = {
...MD3DarkTheme,
...DarkTheme,
colors: {
...MD3DarkTheme.colors,
...DarkTheme.colors,
...customDarkColors,
},
fonts: {
...MD3DarkTheme.fonts,
...customFontThemes,
},
};
let theme = darkMode ? CombinedDarkTheme : CombinedDefaultTheme;
return (
<ThemeContext.Provider value={{darkMode, toggleTheme}}>
<PaperProvider theme={theme}>
<NavigationContainer theme={theme}>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen
name="ForgottenPasswordStepOne"
component={ForgottenPasswordStepOne}
options={{
title: '',
headerShown: true,
headerShadowVisible: false,
headerTintColor: colours.outlineVariant,
headerStyle: {
backgroundColor: colours.lightModeBackground,
},
}}
/>
<Stack.Screen
name="ForgottenPasswordStepTwo"
component={ForgottenPasswordStepTwo}
options={{
title: '',
headerShown: true,
headerShadowVisible: false,
headerTintColor: colours.outlineVariant,
headerStyle: {
backgroundColor: colours.lightModeBackground,
},
}}
/>
<Stack.Screen
name="ForgottenPasswordStepThree"
component={ForgottenPasswordStepThree}
options={{
title: '',
headerShown: true,
headerShadowVisible: false,
headerTintColor: colours.outlineVariant,
headerStyle: {
backgroundColor: colours.lightModeBackground,
},
}}
/>
<Stack.Screen
name="RegisterHalfMemberStepTwo"
component={RegisterHalfMemberStepTwo}
options={{
title: '',
headerShown: true,
headerShadowVisible: false,
headerTintColor: colours.outlineVariant,
headerStyle: {
backgroundColor: colours.lightModeBackground,
},
}}
/>
<Stack.Screen
name="RegisterHalfMemberStepThree"
component={RegisterHalfMemberStepThree}
options={{
title: '',
headerShown: true,
headerShadowVisible: false,
headerTintColor: colours.outlineVariant,
headerStyle: {
backgroundColor: colours.lightModeBackground,
},
}}
/>
<Stack.Screen
name="RegisterStepOne"
component={RegisterStepOne}
options={{
title: '',
headerShown: true,
headerShadowVisible: false,
headerTintColor: colours.outlineVariant,
headerStyle: {
backgroundColor: colours.lightModeBackground,
},
}}
/>
<Stack.Screen
name="RegisterStepTwo"
component={RegisterStepTwo}
options={{
title: '',
headerShown: true,
headerShadowVisible: false,
headerTintColor: colours.outlineVariant,
headerStyle: {
backgroundColor: colours.lightModeBackground,
},
animation: 'slide_from_right',
}}
/>
<Stack.Screen
name="RegisterStepThree"
component={RegisterStepThree}
options={{
title: '',
headerShown: true,
headerShadowVisible: false,
headerTintColor: colours.outlineVariant,
headerStyle: {
backgroundColor: colours.lightModeBackground,
},
animation: 'slide_from_right',
}}
/>
<Stack.Screen
name="CoachingScreen"
component={CoachingCarousel}
options={{
headerShown: false,
}}
/>
<Stack.Screen name="LoggedInView" component={LoggedInView} />
</Stack.Navigator>
{/* {mounted && <NotificationHandler />} */}
</NavigationContainer>
</PaperProvider>
</ThemeContext.Provider>
);
};
export default App;