Progressive Image from https://medium.com/react-native-training/progressive-image-loading-in-react-native-e7a01827feb7 updated for typescript

ProgressiveImage.tsx

import * as React from "react"
import { View, StyleSheet, Animated } from "react-native"

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

interface IProps {
  thumbnailSource: string
  source: string
  style: object
}

class ProgressiveImage extends React.Component<IProps> {
  private thumbnailAnimated = new Animated.Value(0)
  private imageAnimated = new Animated.Value(0)

  public render() {
    const { thumbnailSource, source, style, ...props } = this.props

    return (
      <View style={styles.container}>
        <Animated.Image
          {...props}
          source={thumbnailSource}
          style={[style, { opacity: this.thumbnailAnimated }]}
          onLoad={this.handleThumbnailLoad}
          blurRadius={1}
        />
        <Animated.Image
          {...props}
          source={source}
          style={[styles.imageOverlay, { opacity: this.imageAnimated }, style]}
          onLoad={this.onImageLoad}
        />
      </View>
    )
  }

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

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

export default ProgressiveImage