CODEWITHSUNDEEP
androidreactjsfirebasereact-nativegoogle-cloud-firestore
norb
norb

Reputation: 21

Error setting up firebase with react possible unhandled promise rejection

I am currently creating a food ordering system and i am trying to set up firebase on a react-native project

The application lets me use authentication from firebase i can succesfully sign in and also register new users but it does not let me use firestore i am trying to do a console log in the below code in my to see if the firestore will run with the application

below is a list of the app.js/the screen where i am calling the collection from firestore

the error reads as so

firebase error //error reads on android emulator

the build.gradle app level and the

//list of packages used on for react

package.json

"name": "projectFinal",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.7",
    "@react-native-firebase/app": "^6.3.4",
    "@react-native-firebase/auth": "^6.3.4",
    "@react-native-firebase/firestore": "^6.3.4",
    "firebase": "^7.9.3",
    "react": "16.9.0",
    "react-native": "0.60.5",
    "react-native-elements": "^1.2.7",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-safe-area-view": "^1.0.0",
    "react-native-screens": "^2.2.0",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^4.2.2",
    "react-navigation-header-buttons": "^3.0.5",
    "react-navigation-stack": "^2.2.2",
    "react-navigation-tabs": "^2.8.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^0.0.7",
    "babel-jest": "^25.1.0",
    "eslint": "^6.8.0",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

app.js


import React, { Component } from 'react';
import { View, StyleSheet, Text } from 'react-native';

import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator, createTabNavigator} from 'react-navigation-tabs'
import Icon from 'react-native-vector-icons/Ionicons'
import { HeaderButtons, HeaderButton, Item } from 'react-navigation-header-buttons';

import Home from './src/Screens/Home'
 //import MyAccount from './Screens/MyAccount';
 import Register from './src/Screens/Register'
 import Login from './src/Screens/Login';
 //import Menus from './Screens/Menus';
import LoadingScreen from './src/Screens/LoadingScreen';
// import Jitters from './Screens/Jitters';
// import Scullery from './Screens/Scullery';
// import Bunker from './Screens/TheBunker';
// import OrderDetails from './Screens/OrderDetails';
import ViewOrder from './src/Screens/ViewOrder';

import "firebase/firestore"
import firebase from "firebase"
import firestore from "@react-native-firebase/firestore"

//this is where firebase is initializedd the google.services json is also in the relevant file

const firebaseConfig = {
  apiKey: "AIza<<redacted>>",
  authDomain: "<<redacted>>.firebaseapp.com",
  databaseURL: "https://<<redacted>>.firebaseio.com",
  projectId: "<<redacted>>",
  storageBucket: "<<redacted>>.appspot.com",
  messagingSenderId: "<<redacted>>",
  appId: "1:8<<redacted>>",
  measurementId: "G-T<<redacted>>"
};

// Instantiate a Firebase app.
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore()



 const TabNavigator = createBottomTabNavigator(
         {
           Home: {
             screen: Home,
             navigationOptions: {
               TabBarIcon: ({ tintColor}) => <Ionicons name="ios-home" size={24} color={tintColor}/>
             }
          },
          // Menus: {
          //  screen: Menus,
          //   navigationOptions: {
          //     TabBarIcon: ({ tintColor}) => <Ionicons name="ios-chatbox" size={24} color={tintColor}/>
          //   }
          
           ViewOrder: {
           screen: ViewOrder,
           navigationOptions: {
            TabBarIcon: ({ tintColor}) => <Ionicons name="ios-add-circle" size={24} color={tintColor}/>
            },
         }
       },
       {
           tabBarOptions: {
             activeTintColor: "#161F3D",
             inactiveTintColor: "#E9446A",
             showLabel: true
      
      
           }
        
        }
       );
      
    
    
     const authStack = createStackNavigator(
       {
       Home: Home,
       Login: Login,
       Register: Register,
       // Menu: Menus,
      //  Jitters: Jitters,
      //  Scullery: Scullery,
      //  TheBunker: Bunker,
       // MyAccount: MyAccount,
      //  OrderDetails: OrderDetails,
       ViewOrder: ViewOrder
     });
    const App = createAppContainer(TabNavigator);
     export default createAppContainer(
      (
        createSwitchNavigator({
          
        Loading: LoadingScreen,
        App: TabNavigator,
        Auth: authStack
        },
        {
          initalRouteName: "Loading Page"
        }
      )
     )
     );

##Screen to call a collection of firestore##
//this is a console log to see if firestore will initialize 



import React, {useState} from 'react'
import {View, Text} from 'react-native'                                                                                                          
import firebase from "firebase"
import firestore from "@react-native-firebase/firestore"



    
async function myFunction() {
   
    var user = firebase.auth().currentUser;
    
    let x = await firestore().collection("Users").doc("MmjyeGlhFPu0g6pK0GQ2").get();

   // console.log(x)

}



export default class ViewOrder extends React.Component {
    
      componentDidMount() { 
        myFunction(
        ) 
         }

render() {
    return(
            <View>
                <Text>Hello</Text>
            </View>
   
    )}


**//error reads on android emulator**  

as possible unhandled promise rejection (id:0) 
error: no firebase app ['default] has been created - call
firebase.initalize.app() getapp@http://10.0.2.2.8081/index.bundle
?platform

Upvotes: 2

Views: 3766

Answers (1)

gso_gabriel
gso_gabriel

Reputation: 4670

It seems by the error, mainly for this below part:

Error: No Firebase App '[DEFAULT]' has been created - call firebase.initializeApp()

That you have not initialized your Firebase database. As informed in the documentation firebase. app. App, you need to call firebase.initializeApp() to create an app. Besides that, I would change your import to import * as firebase from "firebase", so you are importing all packages needed for Firebase.

I have checked all these below posts from the Community and these possible solutions that I provided you, are just some options and alternatives that might solve your case.

I would recommend you take a look at them, so you can get more information and check further since there might be some other structure and environment configurations that can be affecting you and these cases can assist you with it.

Let me know if the information helped you!

Upvotes: 3

Related Questions