skip to Main Content

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


  1. I think your

    <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>
    

    is not your root navigator so you need to navigate to stack and then your specific screen.

    navigation.navigate('AuthStack',{ screen: 'Home' });
    

    Auth stack as your stack name.

    Login or Signup to reply.
  2. Instead of optional render your Stack.Screen add dynamic initialRoutename:

     <NavigationContainer>
      {isLoading ? (
        <SplashScreen /> // Show splash screen while loading
      ) : (
        <Stack.Navigator initialRouteName={!isFirstInstall ? "Home" : "SignIn"} screenOptions={{ headerShown: false }}>
            <>
              <Stack.Screen name="Loading" component={() => null} />
              <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>
    
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search