I have some code in app.js at navigation
<NavigationContainer>
{isLoading ? (
<SplashScreen /> // Show splash screen while loading
) : (
<Stack.Navigator screenOptions={{ headerShown: false }}>
{isFirstInstall === null ? (
<Stack.Screen name="Loading" component={() => null} />
) : !isFirstInstall ? (
<Stack.Screen name="Home" component={HomeScreen} />
) : (
<>
<Stack.Screen name="Welcome" component={WelcomeScreen} />
<Stack.Screen name="SignIn" component={SignInScreen} />
<Stack.Screen name="SignUp" component={SignUpScreen} />
</>
)}
</Stack.Navigator>
)}
</NavigationContainer>
Other code in welcome screen, where user may skip or sign in
const handleSkip = async () => {
try {
await AsyncStorage.setItem('@firstInstall', 'false');
navigation.navigate('Home')
} catch (error) {
console.error('Error saving first install:', error);
}
};
if (isFirstInstall === null) {
return null;
}
return (
<View style={styles.container}>
<StatusBar hidden={true} />
<Image
source={require('../assets/welcomeimage.png')}
style={styles.welcomeImage}
/>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>welcome!</Text>
<Text style={styles.descriptionText}>
You get an amazing moment,jump in nowl.
</Text>
</View>
<TouchableOpacity style={[styles.button, styles.fullWidthButton]} onPress={() => navigation.navigate('SignIn')}>
<Text style={styles.buttonText}>Sign In</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.skipButton, styles.fullWidthButton]} onPress={handleSkip}>
<Text style={styles.skipButtonText}>Skip for now</Text>
</TouchableOpacity>
</View>
);
};
but when i click skip for now it come up with this error
ERROR The action ‘NAVIGATE’ with payload {"name":"Home"} was not handled by any navigator.
Do you have a screen named ‘Home’?
How to solve this
2
Answers
I think your
is not your root navigator so you need to navigate to stack and then your specific screen.
Auth stack as your stack name.
Instead of optional render your
Stack.Screen
add dynamic initialRoutename: