'React Native Expo - Firebase / Firestorage upload errors

As I am learning RN I have been experimenting with firebase and have spent the past three days trying to debug this issue. I am attempting to upload an image (which I am pulling from my redux store) to my firebase storage.

The latest firebase release was throwing an error so i downgraded to the previous version ( 9.6.11 ) which fixed that particular issue.

I am now receiving the following error "undefined is not an object (evaluating '_storage.firebase.apps')".

When I remove my if function to initialize the error goes away however a new one pops up "[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_storage.firebase.storage')]"

I have read through the docs and reviewed hours of youtube/previous threads and attempted all varieties of importing firebase/firestore into my app with no success.

Ex. import * as firebase from 'firebase' etc

Hoping for some direction, thank you!

import React from 'react';
import { ActivityIndicator, StyleSheet, Button, Text, ScrollView, 
View, Image } from 'react-native';

import { useSelector, useDispatch } from "react-redux";


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

import { useState } from 'react';



const Summary = () => {

//REMOVED MY CREDENTIALS TO POST ON SO

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};


if (firebase.apps.length === 0) {
    firebase.initializeApp(firebaseConfig)
     console.log("did it work?")
 } else {
     firebase.app();
 }

const [uploading, setUpLoading] = useState(false);


const thePhoto1 = useSelector((state) => state.pickupPhotos.photo1)


    const uploadImages = async () => {
        const blob = await new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = function() {
            resolve(xhr.response);
        };
        xhr.onerror = function() {
            reject(new TypeError('Network request failed'));
        };
        xhr.responseType = 'blob';
        xhr.open('GET', thePhoto1, true);
        xhr.send(null);
    });

    const ref = firebase.storage().ref().child(new Date().toISOString());
    const snapshot = ref.put(blob);

    snapshot.on(
        firebase.storage.TaskEvent.STATE_CHANGED,
        () => {
            setUpLoading(true);
        },
        (error) => {
            setUpLoading(false);
            console.log(error);
            blob.close();
            return;
        },
        () => {
            snapshot.snapshot.ref.getDownloadURL().then((url) => {
                setUpLoading(false);
                console.log("download url: ", url);
                blob.close();
                return url;
                });
            }
        );
    }


        {!uploading ? <Button 
            style={styles.submitBtn}
            title='UPLOAD PHOTOS TO FIREBASE'
            onPress={
                uploadImages
            }
        /> : <ActivityIndicator size="large" color="black" />}
    </ScrollView>
    );
};

const styles = StyleSheet.create({
    theImg: {
        width:75,
        height:75,
        position:'relative',
        marginTop:10,
        left:10
    },
    submitBtn: {
        marginBottom:80
    }
});

export default Summary;


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source