ProgressiveImageLoadable.js

// @flow

import React, { Component } from 'react';
import { View, StyleSheet, Animated } from 'react-native';
import styled from 'styled-components';

const Wrapper = styled(View)`
  background-color: #e1e4e8;
`;

const styles = StyleSheet.create({
  container: {
    height: '100%',
    width: '100%',
  },

  imageOverlay: {
    bottom: 0,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
  },
});

type Props = {
  thumbnailSource: string,
  source: string,
};

class ProgressiveImageLoadable extends Component<Props, {}> {
  thumbnailOpacity = new Animated.Value(0);
  imageOpacity = new Animated.Value(0);

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

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

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

    return (
      <Wrapper>
        <Animated.Image
          style={[styles.container, { opacity: this.thumbnailOpacity }]}
          onLoad={this.onThumbnailLoaded}
          source={thumbnailSource}
          resizeMode="cover"
          blurRadius={1}
        />
        <Animated.Image
          style={[
            styles.imageOverlay,
            { opacity: this.imageOpacity },
            styles.container,
          ]}
          onLoad={this.onImageLoaded}
          resizeMode="cover"
          source={source}
        />
      </Wrapper>
    );
  }
}

export default ProgressiveImageLoadable;

const styles = StyleSheet.create({
  container: {
    height: 280,
    width: 280,
  },
});

class App extends Component {
  render() {
    return (
      <View
        style={styles.container}
      >
        <ProgressiveImageLoadable
          source={{
            uri: `https://images.pexels.com/photos/671557/pexels-photo-671557.jpeg?w=${w.width
              * 2}&buster=${Math.random()}`,
          }}
          thumbnailSource={{
            uri: `https://images.pexels.com/photos/671557/pexels-photo-671557.jpeg?w=50&buster=${Math.random()}`,
          }}
        />
      </View>
    );
  }
}