Unable to connect React Native app to Firestore emulator - reactjs

Question

I've tried just about EVERY solution on Stack Overflow and beyond, and still getting errors.
I've setup and confirmed the emulator runs fine. However, trying to connect the react native app to it returns the error:
Could not reach Cloud Firestore backend. Connection failed 1 times...
followed by a bunch of these warnings:
Connnection Webchannel transport errored .
Here's my config info
import * as firebase from 'firebase';
import { initializeApp } from "firebase/app";
import firestore from 'firebase/firestore';
const firebaseConfig = {
apiKey: "ZZZZ",
authDomain: "ZZZZ",
projectId: "ZZZZ",
storageBucket: "ZZZZ",
messagingSenderId: "ZZZZ",
appId: "ZZZ",
measurementId: "ZZZ"
};
firebase.initializeApp(firebaseConfig);
firebase.firestore().useEmulator("localhost", 8080);
I even replaced localhost with 0.0.0.0, same error.
Someone recommended changing the last line to
firebase.firestore().settings({
host: "localhost:8080",
ssl: false
});
which I tried, but still got the same errors.
Please what's the correct, VERIFIED way of doing this? I'd really appreciate it 'cos I want to spend hours on this!

Answer 1

I’m afraid you are not correctly importing firestore and neither initializing the emulator in the appropriate way. You are importing the Firebase function correctly, but there are a few things you need to change.
I will reference Firebase version 9 since it is the one that should be used, if you would like to still use version 8, I will leave the references where you can choose which version to use.
Instrument your app to talk to the emulators
Set up your in-app configuration or test classes to interact with Cloud Firestore as follows.
import { `getFirestore`, connectFirestoreEmulator } from "firebase/firestore";
// firebaseApps previously initialized using initializeApp()
const db = getFirestore();
connectFirestoreEmulator(db, 'localhost', 8080);
When you initialize Firebase you need to do it this way after installing firebase using npm.
const app = initializeApp(firebaseConfig);
and...
Initialize Cloud Firestore
Initialize an instance of Cloud Firestore:
import { initializeApp } from "firebase/app"
import { getFirestore } from "firebase/firestore"
const firebaseApp = initializeApp({
apiKey: '### FIREBASE API KEY ###',
authDomain: '### FIREBASE AUTH DOMAIN ###',
projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});
const db = getFirestore();
At the end your file should look like this:
import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore';
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
const firebaseConfig = {
apiKey: "ZZZZ",
authDomain: "ZZZZ",
projectId: "ZZZZ",
storageBucket: "ZZZZ",
messagingSenderId: "ZZZZ",
appId: "ZZZ",
measurementId: "ZZZ"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore();
connectFirestoreEmulator(db, 'localhost', 8080);