ProgressiveImage.tsx

import React from "react";
import { StyleSheet, Animated } from "react-native";

const styles = StyleSheet.create({
  imageOverlay: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    top: 0,
  },
});

class ProgressiveImage extends React.Component {
  thumbnailAnimated = new Animated.Value(0);

  imageAnimated = new Animated.Value(0);

  handleThumbnailLoad = () => {
    Animated.timing(this.thumbnailAnimated, {
      toValue: 1,
      useNativeDriver: true,
    }).start();
  };

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

  render() {
    const self: any = this;

    const {
      thumbnailSource,
      source,
      style,
      originalHeight,
      originalWidth,
      width,
      ...props
    } = self.props;

    const sizeDifferenceInPercent = width / originalWidth;
    const height = originalWidth * sizeDifferenceInPercent;

    return (
      <>
        <Animated.Image
          {...props}
          source={thumbnailSource}
          style={[
            {
              opacity: this.imageAnimated ? 0 : this.thumbnailAnimated,
              width: width,
              height: height,
            },
            style,
          ]}
          onLoad={this.handleThumbnailLoad}
          blurRadius={2}
        />
        <Animated.Image
          {...props}
          source={source}
          style={[
            styles.imageOverlay,
            { opacity: this.imageAnimated, width: width, height: height },
            style,
          ]}
          onLoad={this.onImageLoad}
        />
      </>
    );
  }
}

export default ProgressiveImage;