Created
June 18, 2018 15:16
-
-
Save codingwaysarg/1115a6365eff654800b9dd3428104512 to your computer and use it in GitHub Desktop.
FastImage placeholder wrapper
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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>
);
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Consider in a chat app , in a whole timeline where uncounted images are loaded , how would I set loading var for each image ?