could not reach cloud firestore backend with firestore emulator on android emulator

Question

My problem is that I'm unable to call firestore from the client using the firebase firestore emulator on Android emulators. I've tested multiple Android emulators.

The error I'm getting suggests the app is unable to connect to firestore at all claiming there's not internet connection. Here's the full message: "@firebase/firestore:, Firestore (7.8.1): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=unavailable]: The operation could not be completed 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."

This confuses me because my app works with the firebase firestore emulator on iOS. It also still works with the firebase cloud functions emulator (Nevermind. It was never working with cloud functions) for android. In case it matters, the app also works fine on iOS and Android when using firestore in production.

I'm creating a React Native app using the Expo managed workflow so I'm using firebase's web SDK. This means I'd have to eject to switch to react-native-firebase.

I've also looked at the docs and I seem to be following the instructions there: https://firebase.google.com/docs/emulator-suite/connect_firestore#web

I also came across this issue and I'm not clear if they're related. https://github.com/firebase/firebase-js-sdk/issues/2923 If they are I'm also not sure how I could fix it while remaining on the expo managed workflow.

Here's my firebase config

firebaseConfig.js

import * as firebase from 'firebase';
// Optionally import the services that you want to use
//import "firebase/auth";
//import "firebase/database";
import "firebase/firestore"; // uncommented so I could test locally w/ emulator
import "firebase/functions";
//import "firebase/storage";

// ios id 
  // appId: "1:586841249272:ios:d8b508f7811d7c84e0b20d",

// Initialize Firebase
const firebaseConfig = {
  apiKey: "myApikey",
  authDomain: "fsp2-a670d.firebaseapp.com",
  databaseURL: "https://fsp2-a670d.firebaseio.com",
  projectId: "fsp2-a670d",
  storageBucket: "fsp2-a670d.appspot.com",
  messagingSenderId: "586841249272",
  appId: "1:586841249272:android:fa68525699ea5cdde0b20d"
};

// added .firestore to test firestore locally w/ emulator 
const db = firebase.initializeApp(firebaseConfig).firestore(); 

// for debugging
firebase.firestore.setLogLevel('debug')

// Uncomment the below line to use cloud functions with the emulator
firebase.functions().useFunctionsEmulator('http://localhost:5001')
// firebase.firestore().settings({ experimentalForceLongPolling: true });

// uncomment this to test firestore locally w/ emulator 
  db.settings({
    host: "localhost:8080",
    ssl: false
  });

And here's the code in the file where the call to firestore from the client fails. It does

const More = ({navigation}) => {
  const [userInfo, setUserInfo] = useState({profilePicture: 'placeholder', userName: ''});

  useEffect(() => {
    const changeUserInfo = async () => {
      const userData = await new Promise(function (resolve, reject) {
        // 2 - Copy-paste your code inside this function
        firebase.auth().onAuthStateChanged(user => {
          resolve(user) // this promise is rejected and I need to write the code to handle rejections
        })
      })
      const db = firebase.firestore();
      const uid = userData?.uid;
      if (uid) {
        const userRef = await db.collection('users').doc(uid);
        const user = await userRef.get();
        const userFields = user.data();
        console.log('userFields is: ', userFields);
        const {profilePicture, userName} = userFields;
        console.log('profilePicture is: ', profilePicture);
        console.log('userName is: ', userName);
        setUserInfo(() => {
          return {
            profilePicture,
            userName,
          }
        });
      }
    }
    changeUserInfo()
  }, [userInfo.profilePicture, userInfo.userName]

I'd really appreciate any help!

Answer 1

In db.settings I needed to set host to "10.0.2.2:8080"

To get cloud functions to work I needed to replace firebase.functions().useFunctionsEmulator('http://localhost:5001') with firebase.functions().useFunctionsEmulator('http://10.0.2.2:5001')

10.0.2.2 is the special IP address to connect to the 'localhost' of the host computer from an Android emulator. https://firebase.google.com/docs/emulator-suite/connect_and_prototype#android_1