CODEWITHSUNDEEP
javascriptreactjsfirebaseasynchronousfirebase-storage
Meltem
Meltem

Reputation: 89

Show image from Firebase with React Native

I want to see the link to my image in the imageUrl variable.

When I log sampleImage, I see JSON-like data and I can see a link in this data's i section.

But when I log imageUrl, it returns undefined.

render() {
    const uid = '12345';     
    const imageRef = firebase.storage().ref(uid).child(uid);
    const sampleImage = imageRef.getDownloadURL().then();
    const imageUrl = sampleImage.i;
    console.log(sampleImage);    
    console.log(imageUrl);
    return (
        <View>
            <Image style={{ width: 55, height: 55 }} source={{ uri: null }} />
         </View>
    );
}
}

Upvotes: 1

Views: 2250

Answers (1)

Josh Pittman
Josh Pittman

Reputation: 7324

Getting an image is a network request so it takes a little while. If you want to log the image (and you don't use async/await) then you have to do it inside the .then()

const sampleImage = imageRef.getDownloadURL().then(result => console.log(result));

Rather than doing all of this in the render method, do it when the component mounts and store the URL in state. That way you can just reference the state object in your render method.

Upvotes: 2

Related Questions