ProgressiveImageComponent.js

class ProgressiveImage extends React.Component {
  constructor(props) {
    super(props);
    this.placeholderAnimated = new Animated.Value(0);
    this.imageAnimated = new Animated.Value(0);
  }

  handlePlaceholderLoad = () => {
    Animated.timing(this.placeholderAnimated, {
      toValue: 1
    }).start();
  };

  onImageLoad = () => {
    Animated.timing(this.imageAnimated, {
      toValue: 1
    }).start();
  };

  render() {
    const { source, style } = this.props;
    return (
      <View style={{ backgroundColor: "#e1e4e8" }}>
        <Animated.Image
          source={require("/assests/Images/img-placeholder.jpg")}
          style={style}
          blurRadius={2.5}
          onLoad={this.handlePlaceholderLoad}
        />
        <Animated.Image
          source={source}
          style={[
            style,
            { position: "absolute", top: 0, bottom: 0, right: 0, left: 0 }
          ]}
          onLoad={this.onImageLoad}
        />
      </View>
    );
  }
}