TypeError: Cannot read property 'auth' of undefined

Question

Hi Team

How do i resolve this issue?

// firebase configuration
// Import the functions you need from the SDKs you need

import {initializeApp} from 'firebase/app';
import {getFirestore} from 'firebase/firestore';
import {getAuth} from 'firebase/auth';

// TODO: Add SDKs for Firebase products that you want to use


// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AI",
  authDomain: "eshopmobile-fb508.firebaseapp.com",
  projectId: "eshopmobile-fb508",
  storageBucket: "eshopmobile-fb508.appspot.com",
  messagingSenderId: "734223583165",
  appId: "1:734223583165:web:6849ecf86323894686b4d4"
};



  // initialize firebase
const app = initializeApp(firebaseConfig);
console.log(app);

export const db = getFirestore(app); 
export const auth = getAuth(app);

// LoginScreen
import { View, Text , TextInput, TouchableOpacity, StyleSheet} from 'react-native';
import React from 'react';
import firebase from 'firebase/app';
import {Ionicons} from '@expo/vector-icons';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import { NavigationContainer } from '@react-navigation/native';
import 'firebase/auth';



// creating some const bottom.
const Tab = createBottomTabNavigator();

// creating login screen.
const LoginScreen = () => {
const [email, setEmail] = React.useState();
const[password, setPassword] = React.useState();
const[errorMessage, setErrorMessage] = React.useState();


// creating handle-login.
const handleLogin = () => {
 firebase.auth().signInWithEmailAndPassword(email, password)
 .then(userCredential => {
  const{user} = userCredential;
  console.log('user with email ${user.email} sign in');
 })
 .catch(error=>{
  setErrorMessage(error.message);
 });
}

// creating some registration.
const handleRegister = () => {
  firebase.auth().createUserWithEmailAndPassword(email, password)
  .then(userCredential => {
    const{user} = userCredential;
    console.log('User with email ${user.email} signed up');
  })
  
  .catch(error => {
    setErrorMessage(error.message);
  });  
}

  return (
    <NavigationContainer independent ={true}>
      <Tab.Navigator 
        screenOptions={({route})=> ({
          tabBarIcon:({ focused, color, size}) => {
            let iconName;
            let iconColor = focused ? 'green':color;
            
            if(route.name === 'Login') {
              iconName = focused ? 'log-in' :'log-in-outline';
            }else if(route.name === 'Register') {
              iconName = focused ? 'person-add' : 'person-add-outline';

            }
            return <Ionicons name = {iconName} size={size} color={color}/>;
          },
        })}

        tabBarOptions ={{
          activeTintColor:'tomato',
          inactiveTintColor:'gray',
          style:styles.tabBar,
          labelStyle:styles.tabLabel,
        }} >

        <Tab.Screen name= "Login">
          {()=> (
            <View style ={styles.container}>
              <Text style = {styles.title}>Login</Text>
              <TextInput 
                style ={styles.input}
                autoCapitalize="none"
                placeholder="Email"
                onChangeText={setEmail}
                value={email}
              />

              <TextInput 
                style ={styles.input}
                secureTextEntry
                placeholder="Password"
                onChangeText={setPassword}
                value={password}

              />
            <TouchableOpacity style ={styles.button} onPress={handleLogin}>
              <Text style={styles.buttonText}>Login</Text>
                {errorMessage && <Text style ={styles.error}>{errorMessage}</Text>}
              </TouchableOpacity>
            </View>

          
          )}
        </Tab.Screen>
        <Tab.Screen name ="Register">
          {() => (
            <View style= {styles.container}>
              <Text style={styles.title}>Register</Text>
              <TextInput
                style={styles.input}
                autoCapitalize="none"
                placeholder="Email"
                onChangeText={setEmail}
                value={email}
              />
              <TextInput 
                style={styles.input}
                secureTextEntry
                placeholder="Password"
                onChangeText={setPassword}
                value={password}
              />
              <TouchableOpacity style ={styles.button} onPress={handleRegister}>
              <Text style={styles.buttonText}>Register</Text>
              </TouchableOpacity>
              {errorMessage && <Text style={styles.error}>{errorMessage}</Text>}
            </View>
          )}
        </Tab.Screen>
      </Tab.Navigator>
    </NavigationContainer>
  );
};


// adding some styles here.
const styles = StyleSheet.create({
    container:{
      flex:1,
      alignItems:'center',
      justifyContent:'center',
      backgroundColor:'#fff'
    },
    title:{
      fontSize:24,
      fontWeight:'bold',
      marginBottom:30,
    },
    input: {
      borderWidth:1,
      borderColor:'#ccc',
      borderRadius:5,
      padding:10,
      marginBottom:20,
      width:'80%',
    },
    buttonContainer:{
      flexDirection:'row',
      justifyContent:'space-between',
      width:'60%',
    },
    button:{
      backgroundColor:'#007AFF',
      color:'#fff',
      padding:10,
      borderRadius:5,
      marginTop:10,
      width:'45%',
    },
    buttonText:{
      color:'#fff',
      textAlign:'center',
      fontWeight:'bold',
    },
    errorMessage:{
        color:'red',
        marginBottom:20,
        width:'80%',
        textAlign:'center',
      
    },
});


export default LoginScreen