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

Answer 1

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 />