Show image from Firebase with React Native

Question

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>
    );
}
}

Josh Pittman · Accepted Answer · 2018-02-04 12:50:28Z

2

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.

answered Feb 4, 2018 at 12:50

Josh Pittman

7,3748 gold badges45 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Meltem Over a year ago

Hello! Yes you are amazing, finally i can see my link in log but now problem is i can't set it to a variable for image uri.

Josh Pittman Over a year ago

Use state. Set state inside the then and then reference state in your image src.

Collectives™ on Stack Overflow

Show image from Firebase with React Native

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related