Load And Return An Image From Firebase Database/storage In React Native

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

Solution 1:

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

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


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

// and invoke in renderRowthis.getImage(responseItem.imgPath)

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