CODEWITHSUNDEEP
javascriptreact-nativeexpofirebase-storage
Bruce Mathers
Bruce Mathers

Reputation: 681

Displaying image from firebase in react native (hitting error)

On one screen I'm taking an image and it's uploading to firebase but on another page when I'm trying to donwload the image to display it i'm hitting an error but the error it goes to something random. If I copy and paste the url into the image src it works.

I can also console log details from the image but for some reason hitting an error displaying it.

export default function DisplayPage() {
    const imageRef = firebase.storage().ref().child('images');
    const sampleImage = imageRef.getDownloadURL();
return (
     <View>
        <Image source={{ uri: sampleImage }} style={{ width: 350, height: 350 }} />
     </View>
  );
}

I'm uploding the file in another page

 const ref = firebase
        .storage()
        .ref()
        .child('images')
    }

I want to just have a page that displays all of the images in the file that I'm in but I can't even get one image to show up.

What am I doing wrong here?

Edit: The code error that I get it, it just refers to some random file within expo and prevents the app from booting (hence the reason why I didn't post it) but the response below actually answered my question. The only thing I'm wondering is how would you display an entire folder instead of just one image. Would that go inside of the child()? I have tried it both in child() and ref() and failed at both.

Thank you for all the help!

Upvotes: 0

Views: 123

Answers (1)

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

I have wrapped getDownloadURL method in async because it would take time to get an image from it and the view would be render initially on page load so it wouldn't render the image until it gets from getDownloadURL. So, I have used state for it which renders view again when state reset the image, and this time it loads the image successfully.

export default function DisplayPage() {

    const [sampleImage, setSampleImage] = useState(); // set state here

    const getSampleImage = async () => {
       const imageRef = firebase.storage().ref().child('images');
       const url = await imageRef.getDownloadURL().catch((error) => { throw error });
       setSampleImage(url);
    }

   // Similar to componentDidMount and componentDidUpdate:
   useEffect(() => {
    getSampleImage();
   });

   return (
     <View>
        {sampleImage ? <Image source={{ uri: sampleImage }} style={{ width: 350, height: 350 }} /> : null }
     </View>
   );
}

Upvotes: 1

Related Questions