My expo app keeps displaying Firebase: No Firebase App [DEFAULT] even after i initialize it-CodePudding

I am creating a simple react native todo app that will use firebase. I have initialized firebase within my project but i keep getting the same "Firebase: No Firebase App [DEFAULT] has been created call Firebase App.initializeApp() (app/no-app)." the code for my App.js is below. I am using firebase 9.6.8.

import Login from "./screens/Login";
import { NavigationContainer } from "@react-navigation/native"; 
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import SignUp from"./screens/SignUp";
import ResetPassword from "./screens/ResetPassword";
import ToDo from "./screens/ToDo";
import {initializeApp } from "firebase/app";
const firebaseConfig = {  
 apiKey:"AIzaSyA0ccz5NOHQE6FU8d6Ic4NA1-XwZgTPT_w",
 authDomain:
"todoapp-****.firebaseapp.com",
projectId: "todoapp-****",  
storageBucket: "todoapp-****.appspot.com",
messagingSenderId: "*****",
appId: "*****", 
measurementId: "****" }; 
const app = initializeApp(firebaseConfig);
const Stack = createNativeStackNavigator();
export default function App() {  
 return (
     <NavigationContainer>
       <Stack.Navigator>
         <Stack.Screen
           name="Login"
           component={Login}
           options={{ headerShown: false }}
         />
         <Stack.Screen
           name="SignUp"
           component={SignUp}
           options={{ headerShown: false }}
         />
         <Stack.Screen
           name="ResetPassword"
           component={ResetPassword}
           options={{ headerShown: false }}
         />
         <Stack.Screen
           name="ToDo"
           component={ToDo}
           options={{ headerShown: false }}
         />
       </Stack.Navigator>
     </NavigationContainer>   ); }```

CodePudding user response：

I had this problem and solved it by putting the Firebase initialization in another module that I could import into any file that needs the Firebase app to work.

Though I'm just assuming other components like SignUp and ResetPassword are also using Firebase for auth and that's probably where the error is coming from. Those modules don't know about the firebase app being initialized in the file they're being imported to.

So for example, I'm making a trip scheduling app so I made an initFirebase.js that looks like:

import { initializeApp } from 'firebase/app'
import { getFirestore, collection } from 'firebase/firestore'

// firebase setup
const firebaseConfig = {
  // your config here
}

initializeApp(firebaseConfig)

const db = getFirestore()
const allTrips = collection(db, 'trips')

export default allTrips

Then in any component that needs to interact with the app, I can either do import { allTrips } from '../initFirebase' or just import '../initFirebase' if they don't care about using Firestore but still rely on the Firebase app being initialized. You could just do the latter and have a module that exports nothing but does initialize the app before any components that use it try to run in which case your entire initFirebase.js would just look like this:

import { initializeApp } from 'firebase/app'

// firebase setup
const firebaseConfig = {
  // your config here
}

initializeApp(firebaseConfig)

Hope that helps. I am working under the assumption that your other modules require the Firebase app be initialized before they run in order to work.