Firebase.app() issue

[Nagraj23]

trafficstars

i have installed the "dependencies": { "@react-native-async-storage/async-storage": "^2.0.0", "@react-native-firebase/app": "^20.5.0", "@react-native-firebase/auth": "^20.5.0", "@react-native-firebase/firestore": "^20.5.0", this dependancies and still i am encountering with the same issue multiple times and the error is as follows : Error: You attempted to use a Firebase module that's not installed natively on your project by calling firebase.app().

Ensure you have installed the npm package '@react-native-firebase/app', have imported it in your project, and have rebuilt your native application.

This error is located at: in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in main(RootComponent), js engine: hermes i have reinstalled the dependancies also but also the issue isnt solved please check it once and the app.js file is as follows : import React, { useState, useEffect } from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import firebase from '@react-native-firebase/app'; import auth from '@react-native-firebase/auth'; import Login from './components/Login'; import Register from './components/Register'; import Home from './components/Home'; import { ActivityIndicator, View } from 'react-native';

const Stack = createStackNavigator();

const App = () => { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); // Add loading state

// useEffect(() => {

// if (!firebase.apps.length) { // firebase.initializeApp(); // } else { // firebase.app(); // } // }, []);

useEffect(() => { const unsubscribe = auth().onAuthStateChanged(user => { setUser(user); setLoading(false); }); return unsubscribe; }, []);

if (loading) { // Show loading indicator while checking auth status return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <ActivityIndicator size="large" color="#0000ff" /> </View> ); }

return ( <NavigationContainer> <Stack.Navigator> {user ? ( // If the user is logged in, show Home screen <Stack.Screen name="Home" component={Home} options={{ headerShown: false }} initialParams={{ email: user.email }} /> ) : ( // Otherwise, show the Login screen <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} /> )} <Stack.Screen name='Hello User' component={Register} options={{headerShown:falselse}} /> </Stack.Navigator> </NavigationContainer> ); };

export default App;