Неопределенный не является объектом оценки (evalutating’_firebase.auth.onAuthStateChanged’)

#javascript #react-native #visual-studio-code

Вопрос:

Я хотел бы начать с разъяснения того, что я абсолютный новичок в программировании, особенно в создании приложений. Я решил начать с этого урока по созданию клона приложения «Сигнал» и приданию ему моих собственных штрихов, но произошла ошибка, которая совершенно ломала мне голову, и я был бы очень признателен за любую помощь.введите описание изображения здесь

и это код для этой страницы

 import React, {  useEffect, useState } from 'react';
 
 import { Button, Input, Image } from "react-native-elements";
import {KeyboardAvoidingView} from "react-native"; 
import { StatusBar } from "expo-status-bar";
import { auth } from "../firebase";

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

    useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged((authUser) => {
            if (authUser) {
                navigation.replace("Home");
            }
        });

        return unsubscribe;
    }, []);

const signIn = () => {};

    return (
        <KeyboardAvoidingView behavior='padding' style={styles.container}>
            <StatusBar style="light" />

            <Image 
            source={{
                uri: 
                "https://img.icons8.com/cotton/2x/brain-3.png",
               
            }}
            style={{width: 150, height: 150} }
            />
            <View style={styles.inputContainer}>
                <Input 
                placeholder="Email" 
                autoFocus type="email"   
                value={email} 
                onChangeText={text => setEmail(text)} 
                />
            
                <Input 
                placeholder="Password"
                secureTextEntry 
                type="password"
                 value={password}
                 onChangeText={text => setPassword(text)} 
                 />
                 
            </View>
            <Button containerStyle={styles.button} onPress={signIn} title="Login"/>
            <Button onPress={() => navigation.navigate("Register")}
            containerStyle={styles.button} 
            type="outline" 
            title="Register"/>
            <View style={{height: 100}} />
            </KeyboardAvoidingView>
        
    );
};

export default LoginScreen

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems:"center",
        justifyContent:"center",
        padding: 10,
        backgroundColor: "white",

    },
    inputContainer: {
        width: 300,
    },
    button: {
        width: 200, 
        marginTop: 10,
    }
});