'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 |
|---|
