Slow image load/Pull images from storage - firebase - react native - reactjs

Question

I am pulling data from my firestore DB, one of the fields on each DB item is image, the value of each being a URL to an image with my firebase storage.
What I'd like to do is pull the image directly from storage as part of the loop that pulls from firestore.
I am trying to do this as when this loop renders the items, the images are taking a few seconds to appear on the screen.
Please advise if there is an alternative to solve this issue?
FirebaseData.js
onCollectionUpdate = (querySnapshot) => {
const data = [];
querySnapshot.forEach((doc) => {
const { title, image, url, description } = doc.data();
data.push({
key: doc.id,
doc, // DocumentSnapshot
title,
image,
description,
url
});
});
this.setState({
data,
loading: false
});
}
render() {
if (this.state.loading) {
return <Spinner />; //RETURN A LOADING ICON
}
return (
<List containerStyle={styles.listStyle}>
<FlatList
data={this.state.data}
renderItem={({ item }) => <ChildList {...item} />}
/>
</List>
);
}
}
ChildList.js
export default class ChildListRow2 extends React.PureComponent {
render() {
return (
<ListItem
title={
<View>
<Image source={{ uri: this.props.image }} style={styles.imageStyle} />
<Text style={styles.titleTextStyle}>{this.props.title}</Text>
</View>
}
subtitle={
<View>
<Text style={styles.subTitleTextStyle}>{this.props.description}</Text>
</View>
}
hideChevron
onPress={() => Linking.openURL(this.props.url)}
containerStyle={styles.listItemStyle}
/>
);
}
}

Answer 1

You can use onLoadEnd and onLoadStart properties of Image component to show and hide the rest of the data. You can show a loading spinner till the file loads and then show the complete component when it finishes.
Example
export default class ChildListRow2 extends React.PureComponent {
constructor() {
super();
this.state = {
loaded: false
};
}
imageLoaded = () => {
this.setState({ loaded: true })
}
render() {
return (
<ListItem
title={
<View>
<Image
source={{ uri: this.props.image }}
style={styles.imageStyle}
onLoadEnd={this.imageLoaded}
/>
<Text style={styles.titleTextStyle}>{this.props.title}</Text>
</View>
}
subtitle={
<View>
<Text style={styles.subTitleTextStyle}>{this.props.description}</Text>
</View>
}
hideChevron={this.state.loaded}
onPress={() => Linking.openURL(this.props.url)}
containerStyle={styles.listItemStyle}
/>
);
}
}