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?