status-im/react-native-fast-image
1
0
Fork 0
mirror of https://github.com/status-im/react-native-fast-image.git synced 2026-08-31 13:51:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use prettier config file.

Browse Source
This commit is contained in:
Dylan Vann
2018-05-06 19:04:28 -04:00
parent 3e692b901d
commit b2fb48bbe3
21 changed files with 627 additions and 609 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ReactNativeFastImageExample/FastImage/ProgressExample.js
+63 -61
View File
@@ -9,71 +9,73 @@ import FeatureText from './FeatureText'
const IMAGE_URL = 'https://media.giphy.com/media/GEsoqZDGVoisw/giphy.gif'
class ProgressExample extends Component {
state = {
mount: new Date(),
start: undefined,
progress: undefined,
end: undefined,
}
state = {
mount: new Date(),
start: undefined,
progress: undefined,
end: undefined,
}
render() {
const { onPressReload, bust } = this.props
const { mount, start, progress, end } = this.state
return (
<View>
<Section>
<FeatureText text="• Progress callbacks." />
</Section>
<SectionFlex
onPress={onPressReload}
style={{
flexDirection: 'column',
alignItems: 'center',
paddingBottom: 20,
}}
>
<FastImage
style={styles.image}
source={{
uri: IMAGE_URL + bust,
}}
onLoadStart={() => this.setState({ start: Date.now() })}
onProgress={e =>
this.setState({
progress: Math.round(
100 * (e.nativeEvent.loaded / e.nativeEvent.total),
),
})
}
onLoad={() => this.setState({ end: Date.now() })}
onLoadEnd={() => {}}
/>
<Text>
onLoadStart
{start !== undefined && ` - ${start - mount} ms`}
</Text>
<Text>
onProgress
{progress !== undefined && ` - ${progress} %`}
</Text>
<Text>
onLoad
{end !== undefined && ` - ${end - mount} ms`}
</Text>
</SectionFlex>
</View>
)
}
render() {
const { onPressReload, bust } = this.props
const { mount, start, progress, end } = this.state
return (
<View>
<Section>
<FeatureText text="• Progress callbacks." />
</Section>
<SectionFlex
onPress={onPressReload}
style={{
flexDirection: 'column',
alignItems: 'center',
paddingBottom: 20,
}}
>
<FastImage
style={styles.image}
source={{
uri: IMAGE_URL + bust,
}}
onLoadStart={() => this.setState({ start: Date.now() })}
onProgress={e =>
this.setState({
progress: Math.round(
100 *
(e.nativeEvent.loaded /
e.nativeEvent.total),
),
})
}
onLoad={() => this.setState({ end: Date.now() })}
onLoadEnd={() => {}}
/>
<Text>
onLoadStart
{start !== undefined && ` - ${start - mount} ms`}
</Text>
<Text>
onProgress
{progress !== undefined && ` - ${progress} %`}
</Text>
<Text>
onLoad
{end !== undefined && ` - ${end - mount} ms`}
</Text>
</SectionFlex>
</View>
)
}
}
const styles = StyleSheet.create({
image: {
height: 100,
backgroundColor: '#ddd',
margin: 20,
width: 100,
flex: 0,
},
image: {
height: 100,
backgroundColor: '#ddd',
margin: 20,
width: 100,
flex: 0,
},
})
export default withCacheBust(ProgressExample)