react-native-fast-image placeholder wrapper component

FastImagePlaceholder.js

import React, { Component } from 'react';
import { Image, View, ViewPropTypes } from 'react-native';
import PropTypes from 'prop-types';
import FastImage from 'react-native-fast-image';

export default class FastImagePlaceholder extends Component {
  constructor(props) {
    super(props);
    this.state = { loaded: false };
  }

  onLoadEnd() {
    this.setState({ loaded: true });
  }

  render() {
    return (
      <View>
        {!this.state.loaded && <Image source={this.props.placeholder} style={this.props.style} />}
        <FastImage
          source={this.props.source}
          style={[this.props.style, this.state.loaded ? {} : { width: 0, height: 0 }]}
          onLoadEnd={this.onLoadEnd.bind(this)}
          resizeMode={this.props.resizeMode}
        />
      </View>
    );
  }
}

FastImagePlaceholder.defaultProps = {
  resizeMode: 'contain'
};

FastImagePlaceholder.propTypes = {
  placeholder: PropTypes.shape({
    uri: PropTypes.string.isRequired
  }).isRequired,
  source: PropTypes.shape({
    uri: PropTypes.string.isRequired
  }).isRequired,
  style: ViewPropTypes.style,
  resizeMode: PropTypes.string
};

if there is a loading error, the placeholder will not be display

it's took more performance