{"size": 1341, "ext": "js", "max_stars_repo_path": "ReactNativeFastImageExample/FastImage/ProgressExample.js", "max_stars_repo_name": "wangsiyuan0215/react-native-fast-image", "max_stars_repo_stars_event_min_datetime": "2018-04-13T07:05:01.000Z", "max_stars_repo_stars_event_max_datetime": "2018-08-06T05:16:35.000Z", "max_issues_repo_path": "ReactNativeFastImageExample/FastImage/ProgressExample.js", "max_issues_repo_name": "wangsiyuan0215/react-native-fast-image", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "ReactNativeFastImageExample/FastImage/ProgressExample.js", "max_forks_repo_name": "wangsiyuan0215/react-native-fast-image", "max_forks_repo_forks_event_min_datetime": "2017-12-14T02:36:44.000Z", "max_forks_repo_forks_event_max_datetime": "2019-06-18T11:06:56.000Z"}
{"max_stars_count": 3, "max_issues_count": null, "max_forks_count": 3, "avg_line_length": 26.82, "max_line_length": 78, "alphanum_fraction": 0.6413124534}
import React from 'react'
import { StyleSheet, View } from 'react-native'
import withCacheBust from './withCacheBust'
import SectionFlex from './SectionFlex'
import FastImage from 'react-native-fast-image'
import Section from './Section'
import FeatureText from './FeatureText'

const IMAGE_URL = 'https://media.giphy.com/media/GEsoqZDGVoisw/giphy.gif'

const getTestProgressCallbacks = label => ({
  onLoadStart: () => console.log(`${label} - onLoadStart`),
  onProgress: e =>
    console.log(
      `${label} - onProgress - ${e.nativeEvent.loaded / e.nativeEvent.total}`,
    ),
  onLoad: e => console.log(`${label} - onLoad`, e.nativeEvent),
  onError: () => console.log(`${label} - onError`),
  onLoadEnd: () => console.log(`${label} - onLoadEnd`),
})

const ProgressExample = ({ onPressReload, bust }) => (
  <View>
    <Section>
      <FeatureText text="• Progress callbacks." />
    </Section>
    <SectionFlex onPress={onPressReload}>
      <FastImage
        style={styles.image}
        source={{
          uri: IMAGE_URL + bust,
        }}
        {...getTestProgressCallbacks('ProgressExample')}
      />
    </SectionFlex>
  </View>
)

const styles = StyleSheet.create({
  image: {
    height: 100,
    backgroundColor: '#ddd',
    margin: 20,
    width: 100,
    flex: 0,
  },
})

export default withCacheBust(ProgressExample)
