PlaceHolderFastImage.js

PlaceHolderFastImage.js

import React, { PureComponent } from 'react';
import FastImage from 'react-native-fast-image';
import { PLACEHOLDER_IMAGE } from '../const/app';

export default class PlaceHolderFastImage extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      hasError: false
    };
  }

  onLoadEnd = () => {
    this.setState({ loading: false });
  }

  onLoadError = () => {
    this.setState({
      hasError: true
    });
  }

  render() {
    const { loading, hasError } = this.state;
    const { source, style } = this.props;
    return <>
      {
        (loading || hasError) && <FastImage
          source={{ uri: PLACEHOLDER_IMAGE }}
          style={[style, { position: 'absolute', top: 0, left: 0 }]}
        />
      }
      <FastImage
        source={source}
        style={[style]}
        onLoadEnd={this.onLoadEnd}
        onError={this.onLoadError}
      />
    </>
  }
}