Caching Image in Expo

smart_image.js

import React from 'react';
import { Image } from 'react-native';
import { FileSystem } from 'expo';

import { hashOf } from '../../utils/';

class SmartImage extends React.PureComponent {
  state = { source: this.props.source };

  componentDidMount() {
    this.mounted = true;
    if (typeof this.props.source === 'number') {
      return;
    }

    const remoteUri = this.props.source.uri;
    const fileUri = FileSystem.documentDirectory + hashOf(remoteUri) + '.jpg';
    FileSystem.getInfoAsync(fileUri)
      .then(({ exists, uri }) => {
        if (exists) {
            this.loadCacheImage(uri);
        } else {
          FileSystem.downloadAsync(remoteUri, fileUri)
          .catch(e => console.log(e));
        }
      }
    );
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  loadCacheImage = (uri) => {
    if (this.mounted) {
      this.setState({ source: { uri } });
    }
  }

  render() {
    const newProps = { ...this.props, source: this.state.source };
    return (
      <Image {...newProps} />
    );
  }
}

export default SmartImage;