Firebase& React Native: { how to fix Firebase App named ‘[DEFAULT]’ already exists}

So, I have been working with react-native for quite sometime now, and in the project i am developing now, I chose to go with firebase for authentication and database storage, and if you are like, at some phase when you are testing your authentication flow, specially when redirecting the user to the login screen after signing out, and if you have initialized firebase on that screen, you will most definitely encounter this red screen:

You get this error, simply because you are trying to initialize firebase multiple times in your project, example:

componentWillMount(){

firebase.initializeApp({

apiKey: “YOUR_API_KEY”,

authDomain: “something.firebaseapp.com”,

databaseURL: “https://something.firebaseio.com",

projectId: “PROJECT_ID”,

storageBucket: “”,

messagingSenderId: “SENDER_ID”,

})}

To fix this it is quite simple, make a file called firebase.js in your directory and use this approach:

import firebase from ‘firebase’;

const config={

apiKey: “YOUR_API_KEY”,

authDomain: “something.firebaseapp.com”,

databaseURL: “https://something.firebaseio.com",

projectId: “PROJECT_ID”,

storageBucket: “”,

messagingSenderId: “SENDER_ID”,

}

const Firebase = firebase.initializeApp(config);

export default Firebase;

Now, whenever you need to do something related to firebase, simply:

Import Firebase from ‘./yourdirectory/Firebase’

in where-ever screen/component you want and use it like you normally use firebase.

I hope this article help anyone starting with react native and decided to use firebase for authentication or database storage.