Accessing Images from Firebase Storage in React Native

[@bilalawad8937]

Thank you sooooooooooo much, others were making it harder by using fileReader, this is 10x easier thank you! PS, i use react but i am learning react-native which is why i needed this!

[@gtasa0629]

Thank you so much! I have been searching for this a long time....
Thank you Once again!

[@gokulkrishna.s5691]

Thank helpfull video😍

[@mucadush3363]

i love your energy omg

[@microsoftus-eu5323]

U deserve the world ❤

[@alaamer7303]

thanks

[@mucadush3363]

bro i love you THANK YOU

[@gtasa0629]

Hello Please put a video on how to edit metadata on firebase storage in react native

[@gtasa0629]

Please teach us everything about firebase react native expo please!😘

[@talbertherndon1925]

Thank you much needed ❤️

[@810886]

Thanks! This really helps a lot!!!

[@mamadouseck3612]

Thanks

[@joshuaborseth]

thanks for your help!! you explain stuff very well!

[@sohailpanchoo848]

thank you soooooooooooooooooooooooooooooooooooooooooooooooo much you helped me a lot i was really stuck

[@abdul-samadnasir3318]

Please do you how to display data from firestore to a pie chart

[@the_whiz]

1. get the data from firestore
2. store data into state
3. create the pie chart with data from the state variable
you can reference this person's github for a good example: github.com/Eesha-Jain/PollYourOwn/blob/main/screens/TabTwoScreen.tsx

[@kingogamer4358]

I have tried the same pattern but i donot get the url

[@brnbk8910]

I need to render in my app the image that is in the firestore, the url is already there, I want to send an image from my gallery, I want it to go to the firestore, and store the url there, and with this url render in my application,
HELP ME

[@the_whiz]

maybe try this: www.themobileentity.com/home/how-to-load-image-from-url-in-react-native

[@akshatsrivastav9911]

hey could you help me out with this ,
const uploadPost = async () => {
setRequestRunning(true);
const response = await fetch(uri);
const bloob = await getBlobFromUri(uri);
const storageRef = ref(storage, `hbdas/${user.user.uid}/${uuid()}}`);
const uploadTask = uploadBytes(storageRef, bloob);
await getDownloadURL(uploadTask).then((x) => {
setUrl(x);
console.log(x);
});
it just gets stuck and doesn't print the x

[@the_whiz]

I believe your in the storageReference creation line, you miswrote the location to the image. Look at my video for an example of how it should be done.

[@rushikeshgodse1206]

but how could i get multiple images ??? just HOwwwwWWWWW PlzzzzzzzzzzzZZZZ

[@the_whiz]

you can iterate through an array to get multiple images or call this function many times

[@cineverseproductions]

Great and simple video BUT I have a question and a doubt. I am using ImagePicker from Expo like one of your previous videos, and if(!result.cancelled), I am setting an image on a useState hook variable like setImage(result.uri) which is fine, and my uploadImage() is uploading images with the blob and I can see the images being uploaded by a specific uid(probably my current logged in user) in my firebase storage. BUT now, when I try to retrieve it back like yours with useEffect, it's not showing me any image in my Image source. Code is pretty much the same BUT do you think, your *setUrl* hook variable is mine *setImage* in this case. Because in the source is {{ uri: image }} ? I have attached my code below.
const [image, setImage] = useState("upload.wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png");
const pickImage = async () => {
// No permissions request is necessary for launching the image library
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
if (!result.cancelled) {
setImage(result.uri || url);
uploadImage();
}
};
const uploadImage = async () => {
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function() {
resolve(xhr.response);
}
xhr.onerror = function(e) {
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET", image, true);
xhr.send(null);
});
const ref = firebase
.storage()
.ref()
.child(`${auth.currentUser.uid}/profile_pic.jpg`);
const snapshot = await ref.put(blob);
const remoteUri = await snapshot.ref.getDownloadURL()
// when we're done sending it, close and release the blob
blob.close();
// return the result, eg. remote URI to the image
return remoteUri;
}
useEffect(() => {
const func = async () => {
const storage = getStorage();
const reference = ref(storage, `${auth.currentUser.uid}/profile_pic.jpg`);
await getDownloadURL(reference).then(url => {
setImage(url);
})
if(url == undefined) {
func(); }
}
},[]);
{image && }

[@the_whiz]

in your useEffect, after the function do you see the []? you need to put the image into that so it looks like useEffect(()=>{...}, [image]). This means that it will update the screen with the image.

[@cineverseproductions]

@@the_whiz Hi there. Thanks for getting back to me on this so quickly. I tried putting the image hook variable in [ ] useEffect in the end and try loading the app again, but the image is not loading and appearing in the url. The code is exactly the same to my above comment ☝️ but it's not working. I'm not sure what's wrong. Again, I will attach the useEffect code snippet below.
useEffect(() => {
const func = async () => {
const storage = getStorage();
const reference = ref(storage, `${auth.currentUser.uid}/profile_pic.jpg`);
await getDownloadURL(reference).then(url => {
console.log(url);
setImage(url);
})
if(url == undefined || null) {
func(); }
}
},[image]);

[@the_whiz]

@@cineverseproductions I still think it's an issue with the dynamic updating. nkaushik.com/react-native/dynamic-image-source-in-react-native/ maybe try this?