Undefined is not an object evaluating (evalutating'_firebase.auth.onAuthStateChanged')

Question

I'd like to start by clarifying that I'm an absolute noob to programming, especially to app making. I decided to start by this tutorial of making an clone of the application 'Signal' and giving it my own touches, but there has been this error that has been absolutely breaking my head and I'd appreciate so much any help.enter image description here

and this is the code for this page

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,
    }
}); 

Answer 1

You can export from the firebase.js:

export { auth }