javascriptreact-nativeexpofirebase-storage

Cannot import { getStorage } from firebase/storage to use with React Native Expo image picker


I am trying to get an image picker to save to Firebase. I've read a number of tutorials as well as the official documentation for Google cloud storage. They all say to do something like this:

import { getStorage, ref } from "firebase/storage";

so you can:

const storage = getStorage()

and then

const ref = firebase.storage().ref();

No matter what I do, I cannot get anything but this error:

TypeError: (0, _storage.getStorage) is not a function. (In '(0, _storage.getStorage)()', '(0, _storage.getStorage)' is undefined)

I can see firebase/storage in my node_modules. I console-logged (firebase) to make sure it is a thing. I tried a million different kinds of import. I installed other firebase dependencies like @react-native-firebase to use their storage functions, but nothing is working. Everything else Firebase works fine for me.

I have no clue what the problem is. I would be happy to do it another way, but everything says to use the storage() method. Am I doing something wrong? Is there an alternative to using the storage method to upload images to the cloud?


Solution

  • Check the version of Firebase you have in your app.

    Firebase version 8 uses the firebase.storage() method.

    In order to use getStorage you need to use Firebase v9.x

    See this guide on how to upgrade: Upgrade from version 8 to the modular Web SDK

    For Version 8, make sure to click on the Web Version 8 tab in the Firebase Docs: https://firebase.google.com/docs/storage/web/upload-files

    Here is a snippet of code that worked for me (Firebase V8).

    My Firebase Initialization File: FirebaseInitialize.js

    import firebase from "firebase/app";
    import "firebase/storage";
    
    import { firebaseConfig } from "./firebaseConfig";
    
    firebase.initializeApp(firebaseConfig);
    
    export { firebase };
    

    My Firebase Config file

    export const firebaseConfig = {
      apiKey: "YOUR-API-KEY",
      authDomain: "YOUR-DOMAIN.firebaseapp.com",
      databaseURL: "https://YOUR-DOMAIN.firebaseio.com",
      projectId: "YOUR-PROJECTID",
      storageBucket: "YOUR-SOTRAGEBUCKET.appspot.com",
      appId: "APP-ID",
    };
    

    Where I need to use storage, this is what I do this:

    import { firebase } from "./FirebaseInitialize";
    
    const storageRef = firebase.storage().ref();
    
    storageRef.put(file).then((snapshot) => {
      console.log("Uploaded!");
    });
        
    

    Hope this helps.