React Native: The action 'NAVIGATE' with payload (blahblah) was not handled by any navigator. Do you have a screen named 'Home'?

Question

I am attempting to have the Login Screen change to the Home Screen when I click the Log In button. The user has already been created and shows in both the authentication tab of Firebase, as well as the Cloud Firestore database I created for it. I think there is something wrong with my Navigation section, but I don't believe I am using a nested navigator... Here is the code on App.js for the navigation..If anyone can take a look at this code and see if you notice any issues with it, that would be appreciated. Not sure where to turn from here.

<NavigationContainer>
  <Stack.Navigator>
    { user ? (
      <Stack.Screen name="Home">
        {props => <HomeScreen {...props} extraData={user} />}
      </Stack.Screen>
    ) : (
      <>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Registration" component={RegistrationScreen} />
      </>
    )}
  </Stack.Navigator>
</NavigationContainer>

Another user has pointed out to me that it is not rendering the Home Screen because a user it not being assigned when I click the Log In button. Here is the method I am using for the Log In button. Does anyone see any issues here?

const onLoginPress = () => {
  firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then((response) => {
            const uid = response.user.uid
            const usersRef = firebase.firestore().collection('users')
            usersRef
                .doc(uid)
                .get()
                .then(firestoreDocument => {
                    if (!firestoreDocument.exists) {
                        alert("User does not exist anymore.")
                        return;
                    }
                    const user = firestoreDocument.data()
                    navigation.navigate('Home', {user})
                })
                .catch(error => {
                    alert(error)
                });
        })
        .catch(error => {
            alert(error)
        })
}

Thanks for your help!

Answer 1

when the user is not defined, the Home screen is not rendered, so that's why it's giving you an error when you navigate from LoginScreen to Home. You can just render the Home screen unconditionally, and set the initialScreen to Login.

<NavigationContainer>
  <Stack.Navigator initialRouteName="LoginScreen">
      <Stack.Screen name="Home">
        {props => <HomeScreen {...props} extraData={user} />}
      </Stack.Screen>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Registration" component={RegistrationScreen} />
  </Stack.Navigator>
</NavigationContainer>