The action ‘NAVIGATE’ with payload {“name”:”Home”,”params”:{“user”:{“id”:”fMYFmGSyKTb0adO2mDOjuJ2HnaO2″,”email”:”ttrfghu73@gmail.com”,”fullName”:”ggggg”}}} was not handled by any navigator. Do you have a screen named ‘Home’?

Current Behavior
The app should redirect the user after loggin in or singin up to the homepage, but it throws this error instead

  • What code are you running and what is happening?
    App.js :
    import ‘react-native-gesture-handler’;
    import React, { useEffect, useState } from ‘react’
    import { NavigationContainer } from ‘@react-navigation/native’;
    import { createStackNavigator } from ‘@react-navigation/stack’
    import { LoginScreen, HomeScreen, RegistrationScreen } from ‘./src/screens’
    import {decode, encode} from ‘base-64’
    if (!global.btoa) { global.btoa = encode }
    if (!global.atob) { global.atob = decode }

const Stack = createStackNavigator();

export default function App() {

const [loading, setLoading] = useState(true)
const [user, setUser] = useState(null)

return (

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

);
}

Login.js
. . .
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)
})
}
. . .

Register.js

           const onRegisterPress = () => {
    if (password !== confirmPassword) {
        alert("Passwords don't match.")
        return
    }
    firebase
        .auth()
        .createUserWithEmailAndPassword(email, password)
        .then((response) => {
            const uid = response.user.uid
            const data = {
                id: uid,
                email,
                fullName,
            };
            const usersRef = firebase.firestore().collection('users')
            usersRef
                .doc(uid)
                .set(data)
                .then(() => {
                    navigation.navigate('Home', {user: data})
                })
                .catch((error) => {
                    alert(error)
                });
        })
        .catch((error) => {
            alert(error)
    });
}

The error is cuased by this line in App.js:

{ user ? (
<Stack.Screen name=”Home”>
{props => <HomeScreen {…props} extraData={user} />}
</Stack.Screen>
) : (

using these versions:
“@react-navigation/native”: “^5.8.10”,
“@react-navigation/stack”: “^5.12.7”,

**I updated “@react-navigation/stack” to 5.12.8
still same erorr

before it throws the error it gives me this warning
“Setting a timer for a long period of time”

1 possible answer(s) on “The action ‘NAVIGATE’ with payload {“name”:”Home”,”params”:{“user”:{“id”:”fMYFmGSyKTb0adO2mDOjuJ2HnaO2″,”email”:”ttrfghu73@gmail.com”,”fullName”:”ggggg”}}} was not handled by any navigator. Do you have a screen named ‘Home’?

  1. Hey, I see that this issue is closed, but did you end up figuring it out? I’m having the same issue. I even double-checked that my component and Stack.Screen names were different and it’s still not getting fixed. Please let me know if you found a solution! Thank you!!