Load and return an image from Firebase database/storage in React Native

Question

I've got a Firebase app setup, with an array of items in the Realtime Database. Each item has an imagePath node, containing a Firebase Storage URI (eg. gs://bucket/images/stars.jpg).

The array of items is used in a <ListView/>, and I need to load an image in each row.

Seen as the images aren't stored directly in a "plain" URL format, I need to use the storage API to get that.

So in my renderRow(responseItem) function, I've got the following:

<View style={styles.imgWrap}>
    {this.getImage(responseItem.imgPath)}
</View>

And that function is the following:

getImage(path) {
    FirebaseApp.storage().refFromURL(path).getDownloadURL().then((url) => {

        return (
            <Image
                style={styles.candidateImg}
                source={{uri: url}}/>
        )

    })

}

The problem is, nothing's being returned.

If I run a console.log(url) above the return in getImage, it logs the correct URL, that I can open in browser.

Tldr; storage API is getting image URL correctly, but react-native isn't returning the <Image/> component.

Brad Adams · Accepted Answer · 2016-10-24 21:35:04Z

0

I think the problem is in async invoking of getImage(), try this:

<View style={styles.imgWrap}>
    <Image
        style={styles.candidateImg}
        source={this.state.img}/>
</View>


getImage(path) {
    FirebaseApp.storage().refFromURL(path).getDownloadURL().then((url) => {
        this.setState({img: {uri: url}});
    })
}

// and invoke in renderRow
this.getImage(responseItem.imgPath)

Of course you should create an array of uri's to handle <ListView />

edited Oct 24, 2016 at 21:35

Brad Adams

2,0754 gold badges29 silver badges38 bronze badges

answered Oct 24, 2016 at 18:06

jonzee

1,60913 silver badges21 bronze badges

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

1 Comment

Brad Adams Over a year ago

Aha, so I'd do this.state.img as an array, adding each rows image to it, and then get the necessary array item in each row? With something like source={this.state.img[rowId]}.

Collectives™ on Stack Overflow

Load and return an image from Firebase database/storage in React Native

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related