@firebase/firestore: Firestore (9.6.8): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds. Error react-native AVD

Question

I've been getting this error working on react-native. Firebase connects normally, with auth(), but I can't seem to get it working for firestore. The problem only occurred on Android Emulator, the iOS one is working fine. error only occurred on Android Virtual Device, the iOS one work perfectly

Here is Firebase file (removed some information about the app)

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
  measurementId: '',
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();
const db = getFirestore(app);

export { auth, db };

Here is where I used Firestore function

import React, { useState } from 'react';
import { useTailwind } from 'tailwind-rn/dist';
import useAuth from '../../hooks/useAuth';
import { doc, serverTimestamp, setDoc } from 'firebase/firestore';
import { db } from '../../Firebase';
import { useNavigation } from '@react-navigation/native';

const ModalScreen = () => {
  const tw = useTailwind();
  const [image, setImage] = useState('');
  const [job, setJob] = useState('');
  const [age, setAge] = useState('');

  const navigation = useNavigation();

  const inCompleteForm = !image || !job || !age;

  const updateUserProfile = () => {
    setDoc(doc(db, 'users', user.uid), {
      id: user.uid,
      displayName: user.displayName,
      photoURL: image,
      job,
      age,
      timestamp: serverTimestamp(),
    })
      .then(() => {
        navigation.navigate('Home');
      })
      .catch(err => {
        alert(err.message);
      });
  };

import {
  View,
  Text,
  SafeAreaView,
  TouchableOpacity,
  Image,
  StyleSheet,
  Platform,
} from 'react-native';
import React, { useRef, useState, useLayoutEffect } from 'react';
import { useTailwind } from 'tailwind-rn/dist';
import { useNavigation } from '@react-navigation/native';
import useAuth from '../../hooks/useAuth';
import Icon from 'react-native-vector-icons/Ionicons';
import Swiper from 'react-native-deck-swiper';
import { doc, onSnapshot } from 'firebase/firestore';
import { db } from '../../Firebase';

const HomeScreen = () => {
  const navigation = useNavigation();
  const tw = useTailwind();
  const [profiles, setProfiles] = useState([]);
  const { user, logOut } = useAuth();
  const swipeRef = useRef(null);

  useLayoutEffect(() => {
    onSnapshot(doc(db, 'users', user.uid), snapshot => {
      if (!snapshot.exists) navigation.navigate('Modal');
    });
  }, []);

Error

[2022-03-15T06:49:42.961Z]  @firebase/firestore: Firestore (9.6.8): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.
 WARN  [2022-03-15T06:53:06.868Z]  @firebase/firestore: Firestore (9.6.8): Connection WebChannel transport errored: {"defaultPrevented": false,

Answer 1

i got the same problem, try to see here or the code i will give bellow if it can solve the problem :)

import { initializeFirestore } from 'firebase/firestore'

const database = initializeFirestore(app, {
  experimentalAutoDetectLongPolling: true
})

const "database" in my example is not the same as "db" in your code, keep the both