progressive image example RN

gistfile1.txt

import React from 'react'
import PropTypes from 'prop-types'
import {
  Animated, 
  View, 
  Image, 
  StyleSheet 
} from 'react-native'

// import AutoHeightImage from 'react-native-auto-height-image'

export default class ProgressiveImage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      imageOpacity: new Animated.Value(0),
      thumbnailOpacity: new Animated.Value(0),
    }
  }

  onLoadThumbnail() {
    Animated.timing(this.state.thumbnailOpacity, {
      toValue: 1,
      duration: this.props.thumbnailFadeDuration,
    }).start()
    this.props.onLoadThumbnail()
  }

  onLoadImage() {
    Animated.timing(this.state.imageOpacity, {
      toValue: 1,
      duration: this.props.imageFadeDuration,
    }).start()
    this.props.onLoadImage()
  }

  render() {
    return (
      <View style={[this.props.style]}>
        <View style={[styles.image, this.props.style, {backgroundColor: 'rgba(0, 0, 0, 0.1)'}]} />
        {/* <Image
          resizeMode="cover"
          style={[styles.image, this.props.style]}
          source={this.props.placeHolderSource}
        /> */}
        <Animated.View style={{opacity: this.state.thumbnailOpacity}}>
          <Image
            resizeMode="cover"
            style={[styles.image, this.props.style]}
            source={this.props.thumbnailSource}
            onLoad={() => this.onLoadThumbnail()}
            blurRadius={this.props.thumbnailBlurRadius}
          />
        </Animated.View>
        <Animated.View style={{opacity: this.state.imageOpacity}}>
          <Image
            resizeMode="cover"
            source={this.props.imageSource}
            style={[styles.image, this.props.style]}
            onLoad={() => this.onLoadImage()} />
        </Animated.View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
   image: {
     position: 'absolute',
     top: 0,
     bottom: 0,
     left: 0,
     right: 0,
   },
 })

ProgressiveImage.propTypes = {
  placeHolderColor: PropTypes.string,
  placeHolderSource: PropTypes.number,
  imageSource: PropTypes.any.isRequired,
  imageFadeDuration: PropTypes.number.isRequired,
  onLoadThumbnail: PropTypes.func.isRequired,
  onLoadImage: PropTypes.func.isRequired,
  thumbnailSource: PropTypes.any.isRequired,
  thumbnailFadeDuration: PropTypes.number.isRequired,
  thumbnailBlurRadius: PropTypes.number,
}

ProgressiveImage.defaultProps = {
  thumbnailFadeDuration: 250,
  imageFadeDuration: 250,
  thumbnailBlurRadius: 5,
  onLoadThumbnail: Function.prototype,
  onLoadImage: Function.prototype,
}