Can't navigate to another screen - react-native

Question

I am having a bit of trouble with react-navigation
import React, {useState,useEffect} from 'react';
import {Image} from "react-native";
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import Home from "./src/screens/Home.js";
import InvitePage from './src/screens/InvitePage.js';
import WelcomePage from './src/screens/WelcomePage.js';
import NamePage from './src/screens/NamePage.js';
import AsyncStorage from '#react-native-async-storage/async-storage';
const Stack = createStackNavigator();
function LogoTitle() {
return (
<Image
style={{ width: 50, height: 50 }}
source={require("./assets/Appicon.png")}
/>
);
}
function App() {
const [userName,setuserName]=useState(null);
const [loading, setLoading] = useState(true)
useEffect(() => {
async function getName(){
try {
const result= await AsyncStorage.getItem('namekey')
setuserName(result);
setLoading(false);
}
catch(e) {
setLoading(false);
}
}
getName();
}, []);
if (loading) {
return (
<></>
)
}
return (
<NavigationContainer>
<Stack.Navigator>
{userName ?
(<Stack.Screen name="Home" component={Home}
options={{
headerTitle: props => <LogoTitle {...props} /> ,
headerStyle: {
height: 120,
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}/>):(
<>
<Stack.Screen name="WelcomePage" component={WelcomePage}
options={{
title: 'Welcome',
headerStyle: {backgroundColor:'#fff',height: 100 },
}}
/>
<Stack.Screen name="NamePage" component={NamePage}
options={{
title: 'Welcome',
headerStyle: {backgroundColor:'#fff',height: 100 },
}}
/>
</>
)}
<Stack.Screen name="InvitePage" component={InvitePage}
options={{
title: 'Invite',
headerStyle: {backgroundColor:'#fff',height: 100 },
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
This is my app.js.Here, I am reading a file using async storage and then i decide based on that which screen i want to navigate to but the problem is when i go to my name setup page and after saving the name to async storage I can't navigate to home page for some reason
i am getting this error:
The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator.
Do you have a screen named 'Home'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.
i think maybe home page is not getting initialized in this code?
This is my namePage:
async function next(){
try {
await AsyncStorage.setItem('namekey', name)
console.log("done")
} catch (e) {
console.log("errorNamePage")
}
navigation.navigate("Home");
}
return(
<View style={styles.headerview}>
<Text style={{fontSize:30,marginTop:250,fontFamily:"AzoSans-Medium",marginLeft:30,marginRight:30}}>Please enter your name</Text>
<TextInput
style={styles.input}
placeholder="Name"
onChangeText={name => setName(name)}
defaultValue={name}
onSubmitEditing={()=>next()}
autoCorrect = {false}
/>
<TouchableOpacity style={{marginTop: 150}} onPress={()=> next()}>
<Image source={require('../../assets/welcome-next.png')} style={{width:100, height: 100,marginLeft:150}} />
</TouchableOpacity>
</View>
);
};

Answer 1

The condition you used in navigator probably separates NamePage and Home, so they are not accessible for each other I guess. Once you get to Name page, userName must be a truthy value to navigate to Home
If you tell about your intention more, people here can show you a simpler solution.