0

I'm trying to use the firestore emulators with an app that I'm testing with the Expo Go app. I've set it up exactly the same as a regular react app (which works as expected). However, using the Expo Go app to test the application keeps throwing this error:

@firebase/firestore: Firestore (9.17.2): 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.

I've looked at several git issues and other stackoverflow questions, but the accepted answers didn't seem to work. This one gave some inspiration as to what could go wrong. And this github issue where one person fixed it by updating his logrocket package. However more people seemed to be having this issue in 9.6.*.

One of my colleagues notified me that it worked fine on the Expo Go app on IOS, I'm using Android. Also connecting to the live database does work.

firebase.ts

import { initializeApp } from "firebase/app";
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
import {initializeFirestore} from 'firebase/firestore';

const firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "...",
};

const app = initializeApp(firebaseConfig);

// Also tried with 
// const db = initializeFirestore(app, {
//  experimentalForceLongPolling: true,
// });
export const db = getFirestore();
// Also tried with my IP.
connectFirestoreEmulator(db, "localhost", 8080);

firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "emulators": {
    "firestore": {
      "port": 8080,
      "host": "0.0.0.0"
    },
    "ui": {
      "enabled": true
    },
    "singleProjectMode": true
  }
}

TestComponent.tsx

import { Text, TouchableOpacity } from "react-native";
import { addDoc, collection, getDoc, doc } from "firebase/firestore";
import { db } from "../../../firebaseConfig";

export const FirestoreTestComponent = () => {
    const handleFetchData = async () => {
        const newDoc = await addDoc(collection(db, "test"), {
            title: "This is test",
        });
        console.log("Newdoc:", newDoc);
    };

    return (
        <>
            <TouchableOpacity
                style={{
                    backgroundColor: "lightblue",
                    padding: 5,
                    borderRadius: 10,
                    marginTop: 20,
                }}
                onPress={handleFetchData}
            >
                <Text>Add data to firestore</Text>
            </TouchableOpacity>
        </>
    );
};

Versions:

"expo": "~47.0.12",
"firebase": "^9.17.2"

I am really grasping for any leads now since it does work on my colleagues's IOS phone but not on my android. Any idea what could be causing this?

Sylent
  • 474
  • 1
  • 9
  • 25

1 Answers1

0

This error looks like a common IPv6 problem the Firestore Emulator has been seeing.

If you're running on an IPv6 machine localhost will resolve to the local IPv6 address while the Firestore Emulator is listening on the v4 address. The fix for right now is to use an explicit IPv4 address loopback: "127.0.0.1"

However if this is a physical Android device, if you're running the emulator on a laptop or desktop and using a physical Android device to run your app, the IP address is not localhost but the address of the attached computer. In that case you should be able to follow these instructions to connect to localhost of the computer:

https://firebase.google.com/docs/emulator-suite/connect_firestore#java

10.0.2.2 is the IP address to try according to the above.

See also: Accessing localhost of PC from USB connected Android mobile device

Chris
  • 846
  • 6
  • 16