react-native-fast-image/example/FastImageExample.js

172 lines
4.4 KiB
JavaScript
Raw Normal View History

2017-04-13 04:13:44 +00:00
// @flow
import React, { Component } from 'react'
2017-07-04 01:58:24 +00:00
import {
PixelRatio,
ScrollView,
StatusBar,
StyleSheet,
Text,
View,
} from 'react-native'
2017-04-13 04:13:44 +00:00
import Icon from 'react-native-vector-icons/Ionicons'
import FastImage from 'react-native-fast-image'
import timeout from 'react-timeout'
import uuid from 'uuid/v4'
const getImageUrl = (id, width, height) =>
`https://source.unsplash.com/${id}/${width}x${height}`
const IMAGE_SIZE = 150
2017-07-04 01:58:24 +00:00
const IMAGE_SIZE_PX = PixelRatio.getPixelSizeForLayoutSize(IMAGE_SIZE)
// The server is used to test that sending headers is working correctly.
const USE_SERVER = false
const TOKEN = 'someToken'
const getImages = () => {
if (USE_SERVER) {
const baseUrl = '192.168.2.11'
return [
`http://${baseUrl}:8080/pictures/ahmed-saffu-235616.jpg`,
`http://${baseUrl}:8080/pictures/alex-bertha-236361.jpg`,
`http://${baseUrl}:8080/pictures/jaromir-kavan-233699.jpg`,
]
}
return [
2017-07-04 01:58:24 +00:00
getImageUrl('x58soEovG_M', IMAGE_SIZE_PX, IMAGE_SIZE_PX),
getImageUrl('yPI7myL5eWY', IMAGE_SIZE_PX, IMAGE_SIZE_PX),
'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif',
]
}
2017-04-13 04:13:44 +00:00
const getTestProgressCallbacks = label => ({
onLoadStart: () => console.log(`${label} - onLoadStart`),
2017-07-27 02:25:23 +00:00
onProgress: e =>
console.log(
`${label} - onProgress - ${e.nativeEvent.loaded / e.nativeEvent.total}`,
),
onLoad: () => console.log(`${label} - onLoad`),
onError: () => console.log(`${label} - onError`),
onLoadEnd: () => console.log(`${label} - onLoadEnd`),
})
const images = getImages()
2017-04-13 04:13:44 +00:00
class FastImageExample extends Component {
componentDidMount() {
// Forcing an update every 5s to demonstrate loading.
this.props.setInterval(() => {
this.forceUpdate()
}, 5000)
}
render() {
// Force complete re-render.
const key = uuid()
// Busting image cache.
const bust = `?bust=${key}`
// Preload images.
FastImage.preload([
{
uri: 'https://facebook.github.io/react/img/logo_og.png',
headers: { Authorization: 'someAuthToken' },
},
{
uri: 'https://facebook.github.io/react/img/logo_og.png',
headers: { Authorization: 'someAuthToken' },
},
])
2017-04-13 04:13:44 +00:00
return (
2017-04-18 05:52:09 +00:00
<View style={styles.container} key={key}>
<StatusBar
translucent
barStyle="dark-content"
backgroundColor="transparent"
/>
2017-04-13 04:13:44 +00:00
<ScrollView
style={styles.scrollContainer}
contentContainerStyle={styles.scrollContentContainer}
>
2017-04-18 05:52:09 +00:00
<View style={styles.textContainer}>
<Text style={styles.bold}>FastImage</Text>
2017-04-13 04:13:44 +00:00
<Text> priority (low, normal, high)</Text>
<Text> authentication (token)</Text>
</View>
<FastImage
style={styles.image}
source={{
uri: images[0] + bust,
2017-04-13 04:13:44 +00:00
headers: {
token: TOKEN,
2017-04-13 04:13:44 +00:00
},
priority: FastImage.priority.low,
}}
{...getTestProgressCallbacks('1')}
2017-04-13 04:13:44 +00:00
/>
<FastImage
style={styles.image}
source={{
uri: images[1] + bust,
2017-04-13 04:13:44 +00:00
headers: {
token: TOKEN,
2017-04-13 04:13:44 +00:00
},
priority: FastImage.priority.normal,
}}
{...getTestProgressCallbacks('2')}
2017-04-13 04:13:44 +00:00
/>
<FastImage
style={styles.image}
source={{
uri: images[2] + bust,
2017-04-13 04:13:44 +00:00
headers: {
token: TOKEN,
2017-04-13 04:13:44 +00:00
},
priority: FastImage.priority.high,
}}
{...getTestProgressCallbacks('3')}
2017-04-13 04:13:44 +00:00
/>
</ScrollView>
</View>
)
}
}
FastImageExample = timeout(FastImageExample)
FastImageExample.navigationOptions = {
tabBarLabel: 'FastImage Example',
tabBarIcon: ({ focused, tintColor }) => {
2017-04-18 05:52:09 +00:00
if (focused)
return <Icon name="ios-information-circle" size={26} color={tintColor} />
return (
<Icon name="ios-information-circle-outline" size={26} color={tintColor} />
)
2017-04-13 04:13:44 +00:00
},
}
const styles = StyleSheet.create({
bold: {
fontWeight: '900',
},
textContainer: {
marginTop: 40,
marginBottom: 20,
},
image: {
height: IMAGE_SIZE,
width: IMAGE_SIZE,
backgroundColor: '#eee',
margin: 2,
},
container: {
flex: 1,
},
scrollContainer: {},
scrollContentContainer: {
alignItems: 'center',
flex: 0,
},
})
export default FastImageExample