Navigation Error when navigating to Home page from Firebase registration

Question

I'm following this guide: https://www.freecodecamp.org/news/react-native-firebase-tutorial/ in attempt to learn how to use firebase, and even though I've followed the code very closely, I'm receiving a NAVIGATION error:

The action 'NAVIGATE' with payload {"name":"Home","params":{"user":{"id":"AWSKEmmUsua5koR1V3x5bapc3Eq2","email":"[email protected]","fullName":"t"}}} was not handled by any navigator.

Do you have a screen named 'Home'?

I do however, have a screen named Home. App.js:

import Home from './src/Home';
import Login from './src/Login/Login';
import Registration from './src/Registration/Registration';

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="Home"> 
        {props => <Home {...props} extraData={user} />}
      </Stack.Screen>
    ) : (
      <>
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Registration" component={Registration} />
      </>
    )}
  </Stack.Navigator>
</NavigationContainer>
  );
}

When I use the Registration form to register a new user and Navigate to the Home page is when I get the error. Registration.js:

import { firebase } from '../firebase/config';

export default function Registration({ navigation }) {
const [fullName, setFullName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');

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

const onRegisterPress = () => {
    if (password !== confirmPassword) {
        alert("Passwords do not match!");
        return
    }
    // This works. However, navigation does not for some reason
    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(() => {
                // This is where the navigation error lies. It has nothing to do with the component
                // This error happened even when I created a new plain Home component
                navigation.navigate("Home", { user: data})
            })
            .catch((error) => alert(error))
        })
        .catch((error) => alert(error))
}

return (
....Input Forms
            <TouchableOpacity
                style={styles.loginButton}
                onPress={() => onRegisterPress()}
            >
                <Text style={styles.buttonTitle}>Create Account</Text>
            </TouchableOpacity>

I have used React Navigation before and haven't run into this issue. I am not using nested navigators and cannot see where the issue lies. Thank you for reading.

Answer 1

Adding to Göksel Pırnal answers:

At first, suppose there is no user. So We are in Registration Screen. At that stage, our navigator doesn’t even know whether there is any “Home” Screen. At this stage, our navigator only knows 2 screens: “Login” and “Registration” screens.

You need to notify our app.js whether anyone registered in the Registration screen or not. After that our app.js should change the value of 'user' in [user,setUser].

In your, App.js put this lines of code:

const [initializing,setInitializing]=useState(true)
useEffect(()=>{
    const subscriber=firebase.auth().onAuthStateChanged((user)=>{  
      setUser(user)
      setInitializing(false)
    })
    return subscriber
  },[])

if (initializing) return null  //Here you may use an Activity indicator

Then after rerendering our navigator will see the value of “user” has changed and it should navigate to the Home screen.

And guess what! You do not need to navigate manually from Registration Screen as you already put a condition in App.js ( in return () ).