4

I am getting the following error when uploading an image to Firebase:

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

Here is my code:

  1. App.js

    import * as Firebase from 'firebase';

componentDidMount() {
    Firebase.initializeApp(firebaseConfig);
}

  2. Profile.js

    import * as Firebase from 'firebase';
import rnFb from '@react-native-firebase/storage';

uploadImage = localUri =>
new Promise((resolve, reject) => {
    const localUri2 = Platform.OS === 'ios' ? localUri.replace('file://', '') : localUri;
    const fbUri = Firebase.storage().ref();
    rnFb().ref(localUri2).putFile(fbUri)
    .then(
        () => { resolve(); }
    )
    .catch(
        (e) => { reject(e); }
    );
});

It's failing at the .putFile line.

I don't understand what the problem is because I am calling .initializeApp() in App.js

UPDATE 12/21 I added console.log(Firebase.apps.length); right before rnFb().ref(localUri2).putFile(fbUri) and the output is 1...very strange indeed.

...and if I do exactly as the error asks and call firebase.initializeApp() right before rnFb().ref(localUri2).putFile(fbUri) I get the error Error: 

Firebase: Firebase App named '[DEFAULT]' already exists

Help!!

Luis Cadena
  • 102
  • 1
  • 2
  • 15
james murphy
  • 1,505
  • 5
  • 31
  • 57
  • 2
    Put some debug logging in your code. Is initializeApp being called first? – Doug Stevenson Dec 18 '19 at 04:07
  • Yes indeed it is being called first – james murphy Dec 21 '19 at 22:21
  • Please provide versions of RN and RN Firebase you're using. The recommended way of initializing the app, is to provide a [`google-services.json`](https://invertase.io/oss/react-native-firebase/quick-start/android-firebase-credentials) file for Android and [`GoogleService-Info.plist`](https://invertase.io/oss/react-native-firebase/quick-start/ios-firebase-credentials) for iOS. Also make sure you have Storage API enabled on Firebase console. – Christos Lytras Dec 22 '19 at 17:19
  • "react-native": "0.61.5", "@react-native-firebase/storage": "^6.0.4", – james murphy Dec 27 '19 at 01:06

3 Answers3

1

My understanding is that the Firebase SDK used internally inside @react-native-firebase is independent of the ordinary Firebase SDK from firebase.

It can be exposed using:

import firebase from '@react-native-firebase/app';
// OR
import { firebase } from '@react-native-firebase/storage';

Applying these changes (and simplifying your code), leaves you with the following:

import storage, { firebase } from '@react-native-firebase/storage';

// can possibly be somewhere else
firebase.initializeApp(firebaseConfig);

uploadImage = localUri => {
  const localUri2 = Platform.OS === 'ios' ? localUri.replace('file://', '') : localUri;
  return storage().ref('/path/to/upload/to').putFile(localUri2)
}

Rather than use "client initialization" using firebase.initializeApp(), you can also use "native initialization" for Android and iOS.

samthecodingman
  • 23,122
  • 4
  • 30
  • 54
  • 2 questions if I may. (1) are you saying I need to run firebase.initializeApp() twice....once for @react-native-firebase/storage and a second time for regular firebase (database and auth)? (2) how do I get the string 'path to upload to' – james murphy Dec 28 '19 at 04:41
  • 1) You shouldn't be using the native Firebase SDK at all. Use the same Firebase SDK loaded by `@react-native-firebase`. 2) `/path/to/upload/to` is just a placeholder for wherever in your storage you want to save your file. Let's say these were profile pictures, you could save the image as `profile-pics/someUserId.png`. It's up to you what you call the file and where you store it. – samthecodingman Dec 28 '19 at 21:31
  • I use the native Firebase SDK for realtime database and auth all over my app. If I abandon the native Firebase SDK for the @react-native-firebase SDK.......will I need to rewrite all my code? – james murphy Dec 29 '19 at 20:09
  • @jamesmurphy No, it **should** just be a one-line swap between wherever you use `import * as Firebase from 'firebase';` to `import { firebase } from '@react-native-firebase/app';` - although you might need to change `Firebase` to `firebase` or use `{ firebase: Firebase }`. Is there a particular reason for avoiding `@react-native-firebase/database`? I would have thought porting everything across to observables would be beneficial? – samthecodingman Dec 29 '19 at 22:15
  • 1
    I see your point. Did you see the answer from @adrianpascu? He raises a valid point that theres nowhere in the docs it says you need to manually call `initializeApp(). I do find it odd that you need to call this function when all the options (i.e. api key etc) are in the google-services.json file. – james murphy Dec 29 '19 at 23:13
  • I also covered that in my answer as the last paragraph, albeit I glossed over it assuming that you had already tried it. Have you tried following those instructions to see if you've missed something? – samthecodingman Dec 29 '19 at 23:59
1

Have you followed the API documentation? I can't seem to find anywhere in the docs that you need to manually call initializeApp()

Adrian Pascu
  • 949
  • 5
  • 20
  • 48
-1

I think your fbUri is wrong. The param has to be a string. For ex:

    firebase
          .storage()
          .ref('remote_path') // remote path where you want to store
          .putFile(
            'local/ok.jpeg' // local file
          )
          .then(successCb)
          .catch(failureCb);
tuledev
  • 10,177
  • 4
  • 29
  • 49