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 config
if (!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}
        />