CODEWITHSUNDEEP
react-nativefirebase-storage
Joppe Meijers
Joppe Meijers

Reputation: 299

get an image from Firebase Storage in React Native

I am trying to display firebase storage images in react native. I managed to write an image to the firebase storage but now I would also like to display it in the app. Unfortunately I try to understand the documentation without success. Is there anyone who can help me?

What I am trying is for a user to upload an image and it should then be displayed as an image. Uploaded successfully, see my firebase storage here: enter image description here

Now I am trying to get the image from firebase storage and display it with the following code:

  componentDidMount(){    
  this.imageUploaded = firebase.storage().ref('images/profilepictures/536887a2-c8fe-4c60-b2f1-3864f691fa9e.jpg').getDownloadURL().toString();

    console.log(this.imageUploaded);
  }

However, the result of console.log (this.imageUploaded) = [object object] and in the image keeps blank:

<Avatar size="large" rounded source={{uri: this.imageUploaded }} onPress={() => console.log("Works!")} activeOpacity={0.7} />

Nothing is displayed. Is there anyone who can help me understand this? Thank you very much in advance!

Upvotes: 0

Views: 693

Answers (1)

Goskula Jayachandra
Goskula Jayachandra

Reputation: 4201

Change 

  this.imageUploaded = firebase.storage().ref('images/profilepictures/536887a2-c8fe-4c60-b2f1-3864f691fa9e.jpg').getDownloadURL().toString();
    console.log(this.imageUploaded);

to

var ref = firebase.storage().ref('images/profilepictures/536887a2-c8fe-4c60-b2f1-3864f691fa9e.jpg');
this.imageUploaded = await ref.getDownloadURL();

Hope this helps!

Upvotes: 1

Related Questions