2

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
  • 2,066
  • 4
  • 29
  • 38

1 Answers1

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

Brad Adams
  • 2,066
  • 4
  • 29
  • 38
jonzee
  • 1,600
  • 12
  • 20
  • 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]}`. – Brad Adams Oct 24 '16 at 20:43