CODEWITHSUNDEEP
react-nativereact-native-firebase
Vince Gonzales
Vince Gonzales

Reputation: 995

React Native Firebase - How to retrieve images from firebase storage and display in Image component?

After getting a ref of an image from firebase.storage().ref('asd'), how do I retrieve the images here and assign to an Image component?

const ref = firebase.storage().ref('path/to/image.jpg');

<Image
  source={?}
/>

Upvotes: 1

Views: 13358

Answers (2)

Salakar
Salakar

Reputation: 6314

You can call getDownloadURL() on the reference to get a URL to the image and then this can be passed as a URI source to the Image component, e.g.: 

const ref = firebase.storage().ref('path/to/image.jpg');
const url = await ref.getDownloadURL();

// ... in your render

<Image
  source={{ uri: url }}
/>

Docs:

v5: https://rnfirebase.io/docs/v5.x.x/storage/reference/Reference#getDownloadURL

v6: https://invertase.io/oss/react-native-firebase/v6/storage/reference/reference#getDownloadURL

Upvotes: 9

Armar
Armar

Reputation: 289

This might be late but, this worked for me. I had make a separate request to storage, getDownloadURL() is not available on putFile() in rnfirebase v6.

const ref = firebase.storage().ref("images/name.jpg");
ref.getDownloadURL()
.then(url => {console.log(url)})
.catch(e=>{console.log(e);})

Upvotes: -1

Related Questions