The action ‘NAVIGATE’ with payload {“name”:“HomeScreen”,“params”:……”} was not handled by any navigator. Do you have a screen named ‘Home’?

The action ‘NAVIGATE’ with payload {“name”:”Home”,”params”:{“user”:{“id”:”VUUpROQPtKaXVef15e5XhxXNLrm1″,”email”:”[e-mail]”,”fullName”:”snertp0″}}} was not handled by any navigator.

Do you have a screen named ‘Home’?

I have this problem when I try to log in or register, I don’t know how to solve it. I have tried several ways that I have found but I can’t find the solution, Thank you!

This is all the code I use, so I don’t understand why you tell me there is no Screen Home, if I am using it. I’ve been checking several times all the code but I can’t find where that fault may be, since I think I’m calling it all correctly.

LoginScreen

import React, {useState} from 'react';
import {Image, Text, TextInput, TouchableOpacity, View} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import {app} from '../firebase/DataBaseConfig';
import HomeScreen from './HomeScreen';

export default function LoginScreen({navigation}) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const onFooterLinkPress = () => {
    navigation.navigate('Registration');
  };

  const onLoginPress = () => {
    app
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then((response) => {
        const uid = response.user.uid;
        const usersRef = app.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("HomeScreen", {user});
          })
          .catch((error) => {
            alert(error);
          });
      })
      .catch((error) => {
        alert(error);
      });
  };

  return (
    <KeyboardAwareScrollView
      style={{flex: 1, width: '100%'}}
      keyboardShouldPersistTaps="always">
      <TextInput
        placeholder="E-mail"
        placeholderTextColor="#aaaaaa"
        onChangeText={(text) => setEmail(text)}
        value={email}
        underlineColorAndroid="transparent"
        autoCapitalize="none"
      />
      <TextInput
        placeholderTextColor="#aaaaaa"
        secureTextEntry
        placeholder="Password"
        onChangeText={(text) => setPassword(text)}
        value={password}
        underlineColorAndroid="transparent"
        autoCapitalize="none"
      />
      <TouchableOpacity onPress={() => onLoginPress()}>
        <Text>Log in</Text>
      </TouchableOpacity>
      <View>
        <Text>
          Don't have an account?{' '}
          <Text onPress={onFooterLinkPress}>Sign up</Text>
        </Text>
      </View>
    </KeyboardAwareScrollView>
  );
}

App.js

import React, {useEffect, useState} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import LoginScreen from './components/screens/LoginScreen';
import HomeScreen from './components/screens/HomeScreen';
import RegistrationScreen from './components/screens/RegistrationScreen';
import {decode, encode} from 'base-64';
import {firebase} from './components/firebase/DataBaseConfig';
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 (
    <NavigationContainer>
      <Stack.Navigator>
        {user ? (
          <Stack.Screen name="HomeScreen">
            {(props) => <HomeScreen {...props} extraData={user} />}
          </Stack.Screen>
        ) : (
          <>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Registration" component={RegistrationScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );

  if (loading) {
    return <></>;
  }

  useEffect(() => {
    const usersRef = firebase.firestore().collection('users');
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        usersRef
          .doc(user.uid)
          .get()
          .then((document) => {
            const userData = document.data();
            setLoading(false);
            setUser(userData);
          })
          .catch((error) => {
            setLoading(false);
          });
      } else {
        setLoading(false);
      }
    });
  }, []);
}

HomeScreen

import React, {useEffect, useState} from 'react';
import {
FlatList,
Keyboard,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import styles from '../styles/styles';
import {firebase} from '../../components/firebase/DataBaseConfig';

export default function HomeScreen(props) {
const [entityText, setEntityText] = useState('');
const [entities, setEntities] = useState([]);

const entityRef = firebase.firestore().collection('entities');
const userID = props.extraData.id;

useEffect(() => {
 entityRef
   .where('authorID', '==', userID)
   .orderBy('createdAt', 'desc')
   .onSnapshot(
     (querySnapshot) => {
       const newEntities = [];
       querySnapshot.forEach((doc) => {
         const entity = doc.data();
         entity.id = doc.id;
         newEntities.push(entity);
       });
       setEntities(newEntities);
     },
     (error) => {
       console.log(error);
     },
   );
}, []);

const onAddButtonPress = () => {
 if (entityText && entityText.length > 0) {
   const timestamp = firebase.firestore.FieldValue.serverTimestamp();
   const data = {
     text: entityText,
     authorID: userID,
     createdAt: timestamp,
   };
   entityRef
     .add(data)
     .then((_doc) => {
       setEntityText('');
       Keyboard.dismiss();
     })
     .catch((error) => {
       alert(error);
     });
 }
};

const renderEntity = ({item, index}) => {
 return (
   <View style={styles.entityContainer}>
     <Text style={styles.entityText}>
       {index}. {item.text}
     </Text>
   </View>
 );
};

return (
 <View style={styles.container}>
   <View style={styles.formContainer}>
     <TextInput
       style={styles.input}
       placeholder="Add new entity"
       placeholderTextColor="#aaaaaa"
       onChangeText={(text) => setEntityText(text)}
       value={entityText}
       underlineColorAndroid="transparent"
       autoCapitalize="none"
     />
     <TouchableOpacity style={styles.button} onPress={onAddButtonPress}>
       <Text style={styles.buttonText}>Add</Text>
     </TouchableOpacity>
   </View>
   {entities && (
     <View style={styles.listContainer}>
       <FlatList
         data={entities}
         renderItem={renderEntity}
         keyExtractor={(item) => item.id}
         removeClippedSubviews={true}
       />
     </View>
   )}
 </View>
);
}´´´

Answer

in your App.js, you have the following:

      <Stack.Screen name="Home">
        {(props) => <HomeScreen {...props} extraData={user} />}
      </Stack.Screen>

it should be

      <Stack.Screen name="HomeScreen">
        {(props) => <HomeScreen {...props} extraData={user} />}
      </Stack.Screen>

then you need to make the following changes to the navigator:

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