How can I put gif while Image loading from uri in react native

Question

I have FlatList that contains Image is FlatListItem. The image is loading from uri. Here is FlatListItem:

 <View style={styles.autoListView}>
   <Image style={styles.imageOfItem} source={{uri: this.props.item.PICTURE}}/>
   <Image style={styles.isNewImage} source={require("../assets/sticker_new.png")}  />
   <Image style={styles.stockImage} source={require("../assets/sticker_stock.png")}  />
   {this.renderItemBottom()}
  </View>

When weight of the image is bigger it loads slowly. It loads after a few seconds:

I have loading gif. I want to show this gif till the image loaded from uri. How can I do that?

Answer 1

For progress we have use react-native-progress. We have used react-native-fast-image instead of Image

<View style={imageStyle}>
  <Image
    style={imageStyle}
    source={displayImage}
    resizeMode={resizeMode}
    onProgress={progress => this.setState({ progressState: Math.abs(progress.nativeEvent.loaded / progress.nativeEvent.total) })}
    onLoadStart={() => { this.setState({ isLoading: true }) }}
    onError={() => this.setState({ displayImage: this.state.placeHolderImage })}
    onLoadEnd={() => this.setState({ isLoading: false })}
  />
  {this.state.isLoading && <Progress.CircleSnail
    style={[styles.progressBar, (this.props.progressBarStyle || {})]}
    progress={this.state.progressState}
    color={this.props.progressIndicatorColor || this.state.progressIndicatorColor}
    direction='clockwise'
    progressBarSize={this.props.progressBarSize || this.state.progressBarSize}
  />}
</View>