Firebase : Error (auth/network-request-failed) with Expo and react native

I tried to build an app with Expo and react native but I faced (auth/network-request-failed) issues, the google service is active on the device (simulator for Android and real iPhone for IOS) and I'm connected to my Google account.

I also tried to prevent the page from reloading and use other wifi or network but nothing changed. After some research, all I see is I'm not the only one to face this error I haven't found any valuable answer to fix this problem. so if someone can help me I would appreciate it. Thanks for helping.

Here is my code:

firebase.js:

import { getApp, getApps, initializeApp } from 'firebase/app';import { initializeAuth, getReactNativePersistence, getAuth } from 'firebase/auth';import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';import AsyncStorage from '@react-native-async-storage/async-storage';let firebaseApp;export const getFirebaseApp = () => {// copy from the firebase configif (!firebaseApp) {const firebaseConfig = {apiKey: "",authDomain: "",projectId: "",storageBucket: "",messagingSenderId: "",appId: ""};    firebaseApp = getApps().length === 0 ? initializeApp(firebaseConfig) : getApp();    initializeAuth(app, {       persistence: getReactNativePersistence(ReactNativeAsyncStorage)    })}return firebaseApp;};

SignUp.js:

import { SafeAreaView, StyleSheet, Text, View,StatusBar as RNStatusBar,Platform, TouchableOpacityComponent, Button, Pressable, Alert } from 'react-native';import { TextInput } from 'react-native-gesture-handler';import { TouchableOpacity } from 'react-native';import { Ionicons } from '@expo/vector-icons';import { useState } from 'react';import Checkbox from 'expo-checkbox';import { getFirebaseApp } from '../firebase';import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth';import { getFirestore, collection, doc, setDoc } from 'firebase/firestore';export default Signup = function({navigation} ) {  const [isPasswordShown, setIsPasswordShown] = useState(false);  const [isChecked, setIsChecked] = useState(false);  const navLogin = () => navigation.navigate('Login');  const firebaseApp = getFirebaseApp();  const db = getFirestore(firebaseApp);  const col = collection(db, 'users')  const [fullName, setFullName] = useState('');  const [phone, setPhone] = useState('');  const [userType, setUserType] = useState('Gym');  const [email, setEmail] = useState('');  const [password, setPassword] = useState('');  const registerUser = async (email, password, fullName, phone, userType) => {    try {      const userCredential = await createUserWithEmailAndPassword(getAuth(firebaseApp), email, password);      const user = userCredential.user;      await setDoc(doc(col, user.uid),{        fullName,        phone,        userType      });      console.log('account created successfully');      Alert.alert('Success', 'Account created successfully');      navigation.navigate('Home')    } catch (error) {      console.error('account create failed', error.message);      Alert.alert('Error', 'Account create failed: '+ error.message);    }  };  return (<SafeAreaView style={styles.container}><View style={styles.signing}>        {/* Title form */}<View style={{marginVertical:22}}><Text style={styles.title}>SignUp</Text></View>        {/* SignUp form */}<View style={styles.filed}>        {/* Fullname form */}<Text style={styles.text}>            Full Name</Text><View style={styles.form}><TextInput               placeholder='Enter your Name'              placeholderTextColor={'black'}              style={{                width: '100%'              }}              value = {fullName}              onChangeText={text => setFullName(text)}></TextInput></View>          {/* Email address form */}<Text style={styles.text}>            Email address</Text><View style={styles.form}><TextInput               placeholder='Enter your Email address'              placeholderTextColor={'black'}              keyboardType='email-address'              style={{                width: '100%'              }}              value={email}              onChangeText={text => setEmail(text)}></TextInput></View>          {/* password form */}<Text style={styles.text}>            Password</Text><View style={styles.form}><TextInput               placeholder='Enter your Password'              placeholderTextColor={'black'}              secureTextEntry={isPasswordShown}              style={{                width: '100%'              }}              value={password}              onChangeText={text => setPassword(text)}></TextInput><TouchableOpacity              onPress={() => setIsPasswordShown(!isPasswordShown)}              style={{                position: 'absolute',                right:12              }}>                {                  isPasswordShown == true ? (<Ionicons name='eye-off' size={24} color={'black'}/>                  ) : (<Ionicons name='eye' size={24} color={'black'}/>                  )                }</TouchableOpacity></View>          {/* Phone number form */}<Text style={styles.text}>              Phone number</Text><View style={styles.form}><TextInput               placeholder='+61'              keyboardType='numeric'              placeholderTextColor={'black'}              style={{                width: '100%'              }}              value={phone}              onChangeText={text => setPhone(text)}></TextInput></View>          {/* UserType */}<Text style={styles.text}>              User Type : {userType}</Text></View>        {/* agree form */}<View style={{ flexDirection: 'row', marginVertical:6}}><Checkbox           style={{marginRight: 8}}          value={isChecked}          onValueChange={setIsChecked}          color={isChecked ? 'blue' : undefined}/><Text> I aggree to the terms and conditions</Text></View><Button           title='Sign Up'          filled          style={{            marginTop: 18,            marginBottom: 4          }}          onPress={registerUser}        />