Skip to content

Instantly share code, notes, and snippets.

@lucasfeijo
Created July 5, 2019 16:43
Show Gist options
  • Save lucasfeijo/8dc8cdb52558744103cbc3bfe1c617f8 to your computer and use it in GitHub Desktop.
Save lucasfeijo/8dc8cdb52558744103cbc3bfe1c617f8 to your computer and use it in GitHub Desktop.
react-native-fast-image placeholder wrapper component
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
};
@fukemy
Copy link

fukemy commented Jul 29, 2022

it's took more performance

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment