"auth/network-request-failed" when attempt to sign-in with firebase in react native app

I'm facing an issue when I try to sign-in with Firebase (v6) in my react native app.

this is the issue :

this is my code :

Firebase.js

this is the function which allow us to initialize app with firebaseConfig

    import {firebase} from '@react-native-firebase/auth';

const firebaseConfig = {
  apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  authDomain: 'xxxxxxxx.firebaseapp.com',
  databaseURL: 'https://xxxxxxxx.firebaseio.com',
  projectId: 'xxxxxxxxx',
  storageBucket: 'xxxxxxxxx.appspot.com',
  messagingSenderId: 'xxxxxxxxxx',
  appId: 'xxxxxxxxxxx'
};

firebase.initializeApp(firebaseConfig);

export default firebase;

ModalLogin.js

this is the main code from where the sign-in is checked.

import React from 'react';
import styled from 'styled-components';
import {
  TouchableOpacity,
  Alert,
  Dimensions,
  Animated,
  TouchableWithoutFeedback,
  Keyboard,
} from 'react-native';
import {BlurView, VibrancyView} from '@react-native-community/blur';
import {connect} from 'react-redux';
import Success from './Success';
import Loading from './Loading';
import firebase from './Firebase';
import auth from '@react-native-firebase/auth';

const screenHeight = Dimensions.get('window').height;

function mapStateToProps(state) {
  return {action: state.action};
}

function mapDispatchToProps(dispatch) {
  return {
    closeLogin: () =>
      dispatch({
        type: 'CLOSE_LOGIN',
      }),
  };
}

class ModalLogin extends React.Component {
  state = {
    email: '',
    password: '',
    iconEmail: require('../Images/icon-email.png'),
    iconPassword: require('../Images/icon-password.png'),
    isSuccessful: false,
    isLoading: false,
    scale: new Animated.Value(1),
    translateY: new Animated.Value(0),
    top: new Animated.Value(screenHeight),
  };
  componentDidUpdate() {
    if (this.props.action == 'openLogin') {
      Animated.timing(this.state.top, {
        toValue: 0,
        duration: 0,
      }).start();
      Animated.spring(this.state.scale, {toValue: 1}).start();
      Animated.timing(this.state.translateY, {
        toValue: 0,
        duration: 0,
      }).start();
    }

    if (this.props.action == 'closeLogin') {
      setTimeout(() => {
        Animated.timing(this.state.top, {
          toValue: screenHeight,
          duration: 0,
        }).start();
        Animated.spring(this.state.scale, {toValue: 1.3}).start();
      }, 500);

      Animated.timing(this.state.translateY, {
        toValue: 1000,
        duration: 500,
      }).start();
    }
  }

  handleLogin = () => {
    this.setState({isLoading: true});

    const email = this.state.email;
    const password = this.state.password;

    firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .catch(function(error) {
        Alert.alert('Error', error.message);
      })
      .then(response => {
        console.log(response);
        this.setState({isLoading: false});
        if (response) {
          // Successful
          this.setState({isSuccessful: false});
          //storage
          //this.storeName(response.user.email);
          this.fetchUser();
          this.props.updateName(response.user.email);
          //
          Alert.alert('Congrats', "You've logged in successfully!");
          setTimeout(() => {
            Keyboard.dismiss();
            this.props.closeLogin();
            this.setState({isSuccessful: false});
          }, 1000);

          console.log(response.user);
        }
      });
  };

  // change the image on tape
  focusEmail = () => {
    this.setState({
      iconEmail: require('../Images/icon-email-animated.gif'),
      iconPassword: require('../Images/icon-password.png'),
    });
  };

  focusPassword = () => {
    this.setState({
      iconEmail: require('../Images/icon-email.png'),
      iconPassword: require('../Images/icon-password-animated.gif'),
    });
  };
  tapBackground = () => {
    Keyboard.dismiss();
    this.props.closeLogin();
  };

  render() {
    return (
      <AnimatedContainer style={{top: this.state.top}}>
        <TouchableWithoutFeedback onPress={this.tapBackground}>
          <BlurView
            tint="default"
            intensity={100}
            style={{position: 'absolute', width: '100%', height: '100%'}}
          />
        </TouchableWithoutFeedback>
        <AnimatedModal
          style={{
            transform: [
              {scale: this.state.scale},
              {translateY: this.state.translateY},
            ],
          }}>
          <Logo source={require('../Images/Film.png')} />
          <Text> Enjoy watching.</Text>
          <TextInput
            onChangeText={email => this.setState({email})}
            placeholder="Email"
            value={this.state.email}
            keyboardType="email-address"
            onFocus={this.focusEmail}
          />
          <TextInput
            onChangeText={password => this.setState({password})}
            placeholder="Password"
            value={this.state.password}
            secureTextEntry={true}
            onFocus={this.focusPassword}
          />

          <IconEmail source={this.state.iconEmail} />
          <IconPassword source={this.state.iconPassword} />
          <TouchableOpacity onPress={this.handleLogin}>
            <ButtonView>
              <ButtonText>Log in</ButtonText>
            </ButtonView>
          </TouchableOpacity>
        </AnimatedModal>
        <Success isActive={this.state.isSuccessful} />
        <Loading isActive={this.state.isLoading} />
      </AnimatedContainer>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ModalLogin);

const Container = styled.View`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  justify-content: center;
  align-items: center;
`;
const AnimatedContainer = Animated.createAnimatedComponent(Container);

const TextInput = styled.TextInput`
  border: 1px solid #dbdfea;
  width: 295px;
  height: 44px;
  border-radius: 10px;
  font-size: 17px;
  color: #3c4560;
  padding-left: 44px;
  margin-top: 20px;
`;

const Modal = styled.View`
  width: 335px;
  height: 370px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  align-items: center;
`;
const AnimatedModal = Animated.createAnimatedComponent(Modal);

const Logo = styled.Image`
  width: 44px;
  height: 44px;
  margin-top: 50px;
`;

const Text = styled.Text`
  margin-top: 20px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  width: 160px;
  color: #b8bece;
  text-align: center;
`;

const ButtonView = styled.View`
  background: #5263ff;
  width: 295px;
  height: 50px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  margin-top: 20px;
  box-shadow: 0 10px 20px #c2cbff;
`;

const ButtonText = styled.Text`
  color: white;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 20px;
`;
const IconEmail = styled.Image`
  width: 24px;
  height: 22px;
  position: absolute;
  top: 160px;
  left: 31px;
`;

const IconPassword = styled.Image`
  width: 28px;
  height: 28px;
  position: absolute;
  top: 229px;
  left: 30px;
`;

Normally, it should work. I don't know where is the problem. Can you help me with a solution please? thank you