Optimized Way To Initialized Firebase in React Native

Question

During building an app, I couldn't be able to initialized firebase V9 in optimized form in expo react native. I switch from V8 to V9 And counter different error, which aren't making sense to me.

Like module idb missing from file "...\node_modules\@firebase\app\dist\esm\... even I create a metro.config.js File.

And Firebase could not be found within the project when it is present in (Firebase V8).

And this error, idk what's that about at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in register. Error at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl.... , here's the issue or check this problem

And undefined is not an object (evaluating '_app.default.apps').

All such questions and their answers are available on stackoverflow. But none of them work for me. And Im not elaborating these issues, just giving you idea. So I try some things, and it worked.

Shaheryar · Answer 1 · 2022-06-25T10:27:00.983

In above question, I tell about some errors and after many searching I was able to fixed my problem.

First, I delete .expo , .expo-share , node_modules , package-lock.json , and yarn.lock (if you have). Then yarn install or npm install.

Second, change the firebase code to this for V9. As I see many people suggesting to downgrade to V8 when above mentioned errors occurs when they don't need to.

import { initializeApp, getApps, getApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
// import others as you need

const firebaseConfig = { ... };

let app;

if (getApps().length === 0) app = initializeApp(firebaseConfig);
else app = getApp();

const db = getFirestore(app);
const auth = getAuth();

export { auth, db };

For V8

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
// import others as you need

const firebaseConfig = { ... };

let app;

if (firebase.apps.length === 0) app = firebase.initializeApp(firebaseConfig);
else app = firebase.app();

const db = app.firestore();
const auth = firebase.auth();

export { auth, db };

I mentioned about creating a metro.config.js, as I read comments in this problem, some are confusing is there problem related to firebase or metro file. For me, I guess its firebase. If still you get this error, then downgrade your to firebase@9.6.11, see here

I give reference of 2 errors, and other 2 are easily available. It work for me, I hope this will help anyone of you.

Optimized Way To Initialized Firebase in React Native

1 Answers1