FastImage placeholder wrapper

PlaceHolderFastImage.js

import React, { Component } from 'react'
import { ActivityIndicator, View, StyleSheet } from 'react-native'
import { Images, Metrics } from '../Themes'
import FastImage from 'react-native-fast-image'

export default class PlaceHolderFastImage extends Component {
  constructor(props){
    super(props)

    this.state = {
      loaded: false,
      style: StyleSheet.flatten(props.style)
    }
  }

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

  render() {
    const top = (this.state.style.height / 2) - 15
    const left = this.state.style.width == 'auto' ? (Metrics.screenWidth / 2 - 30) : (this.state.style.width / 2 - 15)

    return <View style={this.props.style}>
      {
        !this.state.loaded &&
        <View>
          <FastImage 
            source={Images.placeholder}
            style={this.props.style}
          />
          <View style={{
            position:'absolute',
            top: top,
            left: left}}>
            <ActivityIndicator size="large" color="#ccc" />
          </View>
        </View>
      }
      <FastImage 
        source={this.props.source}
        style={[this.props.style, this.state.loaded ? {} : {width: 0, height: 0}]}
        onLoadEnd={this.onLoadEnd.bind(this)}
      />
    </View>
  }
}

This is the best example of having placeholder but I had to change onLoadEnd to onLoad as onLoadEnd will called when the image finishes loading, whether it was successful or an error.

import React, { useState } from "react";
import { View } from "react-native";
import FastImage from "react-native-fast-image";
import { AppTheme } from "src/utils/appTheme";
import Images from "src/assets/images";

export default function Image(props) {
	const { style, source, tintColor, placeholder } = props;
	const [loaded, setLoaded] = useState(false);

	const onLoad = () => {
		setLoaded(true);
	}

	return (
		<View>
			{
				(!loaded) && (
					<View>
						<FastImage 
							source={placeholder || Images.common.placeholder}
							style={style}
						/>
					</View>
				)
			}
			<FastImage
				style={[style, loaded ? {} : {width: 0, height: 0}]}
				source={source}
				tintColor={tintColor}
				onLoad={onLoad}
			/>
		</View>
	);
}