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'
|
|
|
|
|
2017-04-18 15:26:55 +00:00
|
|
|
const getImageUrl = (id, width, height) =>
|
|
|
|
`https://source.unsplash.com/${id}/${width}x${height}`
|
2017-06-20 04:53:32 +00:00
|
|
|
|
2017-04-18 15:26:55 +00:00
|
|
|
const IMAGE_SIZE = 150
|
2017-07-04 01:58:24 +00:00
|
|
|
const IMAGE_SIZE_PX = PixelRatio.getPixelSizeForLayoutSize(IMAGE_SIZE)
|
|
|
|
|
2017-06-20 07:10:56 +00:00
|
|
|
// The server is used to test that sending headers is working correctly.
|
2017-04-18 15:26:55 +00:00
|
|
|
const USE_SERVER = false
|
2017-06-20 04:53:32 +00:00
|
|
|
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),
|
2017-06-20 04:53:32 +00:00
|
|
|
'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif',
|
|
|
|
]
|
2017-04-18 15:26:55 +00:00
|
|
|
}
|
2017-04-13 04:13:44 +00:00
|
|
|
|
2017-07-27 01:33:21 +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}`,
|
|
|
|
),
|
2017-07-27 01:33:21 +00:00
|
|
|
onLoad: () => console.log(`${label} - onLoad`),
|
|
|
|
onError: () => console.log(`${label} - onError`),
|
|
|
|
onLoadEnd: () => console.log(`${label} - onLoadEnd`),
|
|
|
|
})
|
|
|
|
|
2017-06-20 04:53:32 +00:00
|
|
|
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}`
|
2017-06-20 07:10:56 +00:00
|
|
|
// 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={{
|
2017-06-20 04:53:32 +00:00
|
|
|
uri: images[0] + bust,
|
2017-04-13 04:13:44 +00:00
|
|
|
headers: {
|
2017-06-20 04:53:32 +00:00
|
|
|
token: TOKEN,
|
2017-04-13 04:13:44 +00:00
|
|
|
},
|
|
|
|
priority: FastImage.priority.low,
|
|
|
|
}}
|
2017-07-27 01:33:21 +00:00
|
|
|
{...getTestProgressCallbacks('1')}
|
2017-04-13 04:13:44 +00:00
|
|
|
/>
|
|
|
|
<FastImage
|
|
|
|
style={styles.image}
|
|
|
|
source={{
|
2017-06-20 04:53:32 +00:00
|
|
|
uri: images[1] + bust,
|
2017-04-13 04:13:44 +00:00
|
|
|
headers: {
|
2017-06-20 04:53:32 +00:00
|
|
|
token: TOKEN,
|
2017-04-13 04:13:44 +00:00
|
|
|
},
|
|
|
|
priority: FastImage.priority.normal,
|
|
|
|
}}
|
2017-07-27 01:33:21 +00:00
|
|
|
{...getTestProgressCallbacks('2')}
|
2017-04-13 04:13:44 +00:00
|
|
|
/>
|
|
|
|
<FastImage
|
|
|
|
style={styles.image}
|
|
|
|
source={{
|
2017-06-20 04:53:32 +00:00
|
|
|
uri: images[2] + bust,
|
2017-04-13 04:13:44 +00:00
|
|
|
headers: {
|
2017-06-20 04:53:32 +00:00
|
|
|
token: TOKEN,
|
2017-04-13 04:13:44 +00:00
|
|
|
},
|
|
|
|
priority: FastImage.priority.high,
|
|
|
|
}}
|
2017-07-27 01:33:21 +00:00
|
|
|
{...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
|