React Native (React Navigation)<> Firebase login screen-CodePudding

I'm using Firebase to keep track of all the users. I was able to connect Firebase. User registration is working fine.

I'm having issues with logging the users. When I enter login and password, the app doesn't redirect me to the right screen, and also throws this warning [Unhandled promise rejection: TypeError: navigation.navigation is not a function. (In 'navigation.navigation("myProfile")', 'navigation.navigation' is undefined)]

Here is how I do it

import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import { View, ...} from "react-native";
import { auth } from "../firebase";

const Profile = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const navigation = useNavigation();

   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((user) => {
       if (user) {
         navigation.navigation("myProfile");
       }
     });
     return unsubscribe;
   }, []);


  const signIn = () => {
    auth
      .signInWithEmailAndPassword(email, password)
      .then((userCredentials) => {
        const user = userCredentials.user;
        console.log("Sign In user.email = "   user.email);
      })
      .catch((error) => alert(error.message));
  };
//more code

I also tried this, but it didn't help

import React, { useEffect, useState } from "react";
import { View, ...} from "react-native";
import { auth } from "../firebase";

const Profile = ({navigation}) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
    
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((user) => {
       if (user) {
         navigation.navigation("myProfile");
       }
     });
     return unsubscribe;
   }, []);

//more code

I'm not sure if I need to navigation.navigation("myProfile") onPress or it has to be inside of the the useEffect

CodePudding user response：

Use

navigation.navigate("myProfile")

instead of

navigation.navigation("myProfile");

Also you can destruct your hook object like this

const { navigate } = useNavigation()

in order to just write

navigate("myProfile")

I'm not sure if I need to navigation.navigation("myProfile") onPress or it has to be inside of the the useEffect

Most of the cases you should move the user to home screen (logged in user screen) when the signIn function returns true and the user is logged in, so in this case I think you have to use navigate("myProfile") inside of

auth
  .signInWithEmailAndPassword(email, password)
  .then((userCredentials) => {
    ...your code
    navigation.navigate("myProfile")
  })