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

Move example files to src.

Browse Source 
I don't remember why I put these in FastImage in the first place.
This commit is contained in:
Dylan Vann
2018-05-09 22:13:18 -04:00
parent 6c6526e4e7
commit b206c50028
18 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ReactNativeFastImageExample/src/App.js
+32
View File
@@ -0,0 +1,32 @@
import React from 'react'
import { TabNavigator, TabBarBottom } from 'react-navigation'
import FastImageExamples from './FastImageExamples'
import FastImageGrid from './FastImageGrid'
import DefaultImageGrid from './DefaultImageGrid'
const App = TabNavigator(
{
fastImageExample: {
screen: FastImageExamples,
},
image: {
screen: DefaultImageGrid,
},
fastImage: {
screen: FastImageGrid,
},
},
{
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
tabBarOptions: {
style: {
backgroundColor: 'white',
},
},
},
)
export default App
ReactNativeFastImageExample/src/BorderRadiusExample.js
+60
View File
@@ -0,0 +1,60 @@
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 BorderRadiusExample = ({ onPressReload, bust }) => (
<View>
<Section>
<FeatureText text="• Border radius." />
</Section>
<SectionFlex onPress={onPressReload}>
<FastImage
style={styles.imageSquare}
source={{
uri: IMAGE_URL + bust,
}}
/>
<FastImage
style={styles.imageRectangular}
source={{
uri: IMAGE_URL + bust,
}}
/>
</SectionFlex>
</View>
)
const styles = StyleSheet.create({
imageSquare: {
borderRadius: 50,
height: 100,
backgroundColor: '#ddd',
margin: 20,
width: 100,
flex: 0,
},
imageRectangular: {
borderRadius: 50,
borderTopLeftRadius: 10,
borderBottomRightRadius: 10,
height: 100,
backgroundColor: '#ddd',
margin: 20,
flex: 1,
},
plus: {
width: 30,
height: 30,
position: 'absolute',
bottom: 0,
right: 0,
},
})
export default withCacheBust(BorderRadiusExample)
ReactNativeFastImageExample/src/Button.js
+28
View File
@@ -0,0 +1,28 @@
import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
const Button = ({ text, onPress }) => (
<TouchableOpacity onPress={onPress}>
<View style={styles.button}>
<Text style={styles.text}>{text}</Text>
</View>
</TouchableOpacity>
)
const styles = StyleSheet.create({
button: {
backgroundColor: 'black',
margin: 5,
height: 44,
paddingLeft: 10,
paddingRight: 10,
borderRadius: 10,
alignItems: 'center',
justifyContent: 'center',
},
text: {
color: 'white',
},
})
export default Button
ReactNativeFastImageExample/src/DefaultImageGrid.js
+16
View File
@@ -0,0 +1,16 @@
// @flow
import React from 'react'
import { Image } from 'react-native'
import Icon from './Icons/Icon'
import ImageGrid from './ImageGrid'
const DefaultImageGrid = () => <ImageGrid ImageComponent={Image} />
DefaultImageGrid.navigationOptions = {
tabBarLabel: 'Image Grid',
tabBarIcon: props => (
<Icon name="ios-image-outline" focusedName="ios-image" {...props} />
),
}
export default DefaultImageGrid
ReactNativeFastImageExample/src/FastImageExamples.js
+81
View File
@@ -0,0 +1,81 @@
import React from 'react'
import { ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
import Icon from './Icons/Icon'
import Section from './Section'
import PriorityExample from './PriorityExample'
import GifExample from './GifExample'
import BorderRadiusExample from './BorderRadiusExample'
import FeatureText from './FeatureText'
import ProgressExample from './ProgressExample'
import PreloadExample from './PreloadExample'
import StatusBarUnderlay, { STATUS_BAR_HEIGHT } from './StatusBarUnderlay'
const FastImageExample = () => (
<View style={styles.container}>
<StatusBar
translucent
barStyle="dark-content"
backgroundColor="transparent"
/>
<ScrollView
style={styles.scrollContainer}
contentContainerStyle={styles.scrollContentContainer}
>
<View style={styles.contentContainer}>
<Section>
<Text style={styles.titleText}>🚩 FastImage</Text>
<FeatureText text="Tap images to reload examples." />
</Section>
<PriorityExample />
<GifExample />
<BorderRadiusExample />
<ProgressExample />
<PreloadExample />
</View>
</ScrollView>
<StatusBarUnderlay />
</View>
)
FastImageExample.navigationOptions = {
tabBarLabel: 'FastImage Example',
tabBarIcon: props => (
<Icon
name="ios-information-circle-outline"
focusedName="ios-information-circle"
{...props}
/>
),
}
const styles = StyleSheet.create({
titleText: {
fontWeight: '900',
marginBottom: 20,
color: '#222',
},
contentContainer: {
marginTop: 20,
marginBottom: 20,
},
image: {
flex: 1,
height: 100,
backgroundColor: '#ddd',
margin: 10,
},
container: {
flex: 1,
alignItems: 'stretch',
backgroundColor: '#fff',
},
scrollContainer: {
marginTop: STATUS_BAR_HEIGHT,
},
scrollContentContainer: {
alignItems: 'stretch',
flex: 0,
},
})
export default FastImageExample
ReactNativeFastImageExample/src/FastImageGrid.js
+15
View File
@@ -0,0 +1,15 @@
import React from 'react'
import FastImage from 'react-native-fast-image'
import Icon from './Icons/Icon'
import ImageGrid from './ImageGrid'
const FastImageGrid = () => <ImageGrid ImageComponent={FastImage} />
FastImageGrid.navigationOptions = {
tabBarLabel: 'FastImage Grid',
tabBarIcon: props => (
<Icon name="ios-photos-outline" focusedName="ios-photos" {...props} />
),
}
export default FastImageGrid
ReactNativeFastImageExample/src/FeatureText.js
+10
View File
@@ -0,0 +1,10 @@
import React from 'react'
import { StyleSheet, Text } from 'react-native'
export default ({ text }) => <Text style={styles.style}>{text}</Text>
const styles = StyleSheet.create({
style: {
color: '#222',
},
})
ReactNativeFastImageExample/src/GifExample.js
+33
View File
@@ -0,0 +1,33 @@
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 GIF_URL =
'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif'
const GifExample = ({ onPressReload, bust }) => (
<View>
<Section>
<FeatureText text="• GIF support." />
</Section>
<SectionFlex onPress={onPressReload}>
<FastImage style={styles.image} source={{ uri: GIF_URL + bust }} />
</SectionFlex>
</View>
)
const styles = StyleSheet.create({
image: {
backgroundColor: '#ddd',
margin: 10,
height: 100,
width: 100,
flex: 0,
},
})
export default withCacheBust(GifExample)
ReactNativeFastImageExample/src/Icons/Icon.js
+17
View File
@@ -0,0 +1,17 @@
import React from 'react'
import Base from 'react-native-vector-icons/Ionicons'
const Icon = ({ size, name, focusedName, focused, tintColor }) => (
<Base
name={focused ? focusedName : name}
size={size}
style={{ width: size, height: size }}
color={tintColor}
/>
)
Icon.defaultProps = {
size: 26,
}
export default Icon
ReactNativeFastImageExample/src/ImageGrid.js
+125
View File
@@ -0,0 +1,125 @@
import React, { Component } from 'react'
import { FlatList, StyleSheet, Text, View } from 'react-native'
import StatusBarUnderlay, { STATUS_BAR_HEIGHT } from './StatusBarUnderlay'
const getImageUrl = (id, width, height) =>
`https://unsplash.it/${width}/${height}?image=${id}`
class ImageGrid extends Component {
constructor(props: Object) {
super(props)
fetch('https://unsplash.it/list')
.then(res => res.json())
.then(this._onFetchImagesSuccess)
.catch(this._onFetchImagesError)
}
state = {
images: [],
itemHeight: 0,
}
_onLayout = e => {
const width = e.nativeEvent.layout.width
this.setState({
itemHeight: width / 4,
})
}
_onFetchImagesError = () => {
this.setState({
error: true,
})
}
_onFetchImagesSuccess = images => {
this.setState({
images,
})
}
_getItemLayout = (data, index) => {
const { itemHeight } = this.state
return { length: itemHeight, offset: itemHeight * index, index }
}
_renderItem = ({ item }) => {
const ImageComponent = this.props.ImageComponent
const uri = getImageUrl(item.id, 100, 100)
return (
<View style={styles.imageContainer}>
<ImageComponent source={{ uri }} style={styles.image} />
</View>
)
}
_extractKey = item => {
return item.id
}
render() {
if (this.state.error) {
return (
<View style={styles.container}>
<Text style={styles.text}>Error fetching images.</Text>
</View>
)
}
return (
<View style={styles.container}>
<FlatList
onLayout={this._onLayout}
style={styles.list}
columnWrapperStyle={[
styles.columnWrapper,
{ height: this.state.itemHeight },
]}
data={this.state.images}
renderItem={this._renderItem}
numColumns={4}
keyExtractor={this._extractKey}
getItemLayout={this._getItemLayout}
/>
<StatusBarUnderlay />
</View>
)
}
}
const MARGIN = 2
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'stretch',
justifyContent: 'center',
},
text: {
textAlign: 'center',
},
list: {
marginTop: STATUS_BAR_HEIGHT,
flex: 1,
},
columnWrapper: {
flex: 1,
flexDirection: 'row',
marginLeft: -MARGIN,
marginRight: -MARGIN,
},
image: {
flex: 1,
width: null,
height: null,
margin: MARGIN,
backgroundColor: '#eee',
},
imageContainer: {
flex: 1,
alignItems: 'stretch',
},
})
export default ImageGrid
ReactNativeFastImageExample/src/PreloadExample.js
+92
View File
@@ -0,0 +1,92 @@
import React, { Component } from 'react'
import { StyleSheet, View } from 'react-native'
import SectionFlex from './SectionFlex'
import FastImage from 'react-native-fast-image'
import Section from './Section'
import FeatureText from './FeatureText'
import uuid from 'uuid/v4'
import Button from './Button'
import { createImageProgress } from 'react-native-image-progress'
const IMAGE_URL =
'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif'
const Image = createImageProgress(FastImage)
class PreloadExample extends Component {
state = {
show: false,
url: IMAGE_URL,
}
bustCache = () => {
const key = uuid()
const bust = `?bust=${key}`
// Preload images. This can be called anywhere.
const url = IMAGE_URL + bust
this.setState({
url,
show: false,
})
}
preload = () => {
FastImage.preload([{ uri: this.state.url }])
}
showImage = () => {
this.setState({ show: true })
}
render() {
return (
<View>
<Section>
<FeatureText text="• Preloading." />
<FeatureText text="• Progress indication using react-native-image-progress." />
</Section>
<SectionFlex
style={styles.section}
onPress={this.props.onPressReload}
>
{this.state.show ? (
<Image
style={styles.image}
source={{ uri: this.state.url }}
/>
) : (
<View style={styles.image} />
)}
<View
style={{ flexDirection: 'row', marginHorizontal: 10 }}
>
<View style={{ flex: 1 }}>
<Button text="Bust" onPress={this.bustCache} />
</View>
<View style={{ flex: 1 }}>
<Button text="Preload" onPress={this.preload} />
</View>
<View style={{ flex: 1 }}>
<Button text="Render" onPress={this.showImage} />
</View>
</View>
</SectionFlex>
</View>
)
}
}
const styles = StyleSheet.create({
section: {
flexDirection: 'column',
alignItems: 'center',
},
image: {
backgroundColor: '#ddd',
margin: 10,
height: 100,
width: 100,
},
})
export default PreloadExample
ReactNativeFastImageExample/src/PriorityExample.js
+59
View File
@@ -0,0 +1,59 @@
import React from 'react'
import { PixelRatio, StyleSheet, View } from 'react-native'
import withCacheBust from './withCacheBust'
import FastImage from 'react-native-fast-image'
import Section from './Section'
import SectionFlex from './SectionFlex'
import FeatureText from './FeatureText'
const getImageUrl = (id, width, height) =>
`https://source.unsplash.com/${id}/${width}x${height}`
const IMAGE_SIZE = 1024
const IMAGE_SIZE_PX = PixelRatio.getPixelSizeForLayoutSize(IMAGE_SIZE)
const IMAGE_URLS = [
getImageUrl('x58soEovG_M', IMAGE_SIZE_PX, IMAGE_SIZE_PX),
getImageUrl('yPI7myL5eWY', IMAGE_SIZE_PX, IMAGE_SIZE_PX),
getImageUrl('S7VCcp6KCKE', IMAGE_SIZE, IMAGE_SIZE),
]
const PriorityExample = ({ onPressReload, bust }) => (
<View>
<Section>
<FeatureText text="• Prioritize images (low, normal, high)." />
</Section>
<SectionFlex onPress={onPressReload}>
<FastImage
style={styles.image}
source={{
uri: IMAGE_URLS[0] + bust,
priority: FastImage.priority.low,
}}
/>
<FastImage
style={styles.image}
source={{
uri: IMAGE_URLS[1] + bust,
priority: FastImage.priority.normal,
}}
/>
<FastImage
style={styles.image}
source={{
uri: IMAGE_URLS[2] + bust,
priority: FastImage.priority.high,
}}
/>
</SectionFlex>
</View>
)
const styles = StyleSheet.create({
image: {
flex: 1,
height: 100,
backgroundColor: '#ddd',
margin: 10,
},
})
export default withCacheBust(PriorityExample)
ReactNativeFastImageExample/src/ProgressExample.js
+81
View File
@@ -0,0 +1,81 @@
import React, { Component } from 'react'
import { StyleSheet, View, Text } 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'
class ProgressExample extends Component {
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>
)
}
}
const styles = StyleSheet.create({
image: {
height: 100,
backgroundColor: '#ddd',
margin: 20,
width: 100,
flex: 0,
},
})
export default withCacheBust(ProgressExample)
ReactNativeFastImageExample/src/Section.js
+13
View File
@@ -0,0 +1,13 @@
import React from 'react'
import { StyleSheet, View } from 'react-native'
export default ({ children }) => <View style={styles.section}>{children}</View>
const styles = StyleSheet.create({
section: {
marginTop: 10,
marginBottom: 10,
marginLeft: 40,
marginRight: 40,
},
})
ReactNativeFastImageExample/src/SectionFlex.js
+20
View File
@@ -0,0 +1,20 @@
import React from 'react'
import { StyleSheet, TouchableOpacity } from 'react-native'
export default ({ children, onPress, style }) => (
<TouchableOpacity style={[styles.sectionFlex, style]} onPress={onPress}>
{children}
</TouchableOpacity>
)
const styles = StyleSheet.create({
sectionFlex: {
backgroundColor: '#eee',
flexDirection: 'row',
justifyContent: 'center',
marginTop: 10,
marginBottom: 10,
marginLeft: -10,
marginRight: -10,
},
})
ReactNativeFastImageExample/src/StatusBarUnderlay.js
+18
View File
@@ -0,0 +1,18 @@
import React from 'react'
import { Platform, StatusBar, StyleSheet, View } from 'react-native'
import { getStatusBarHeight } from 'react-native-status-bar-height'
export const STATUS_BAR_HEIGHT = getStatusBarHeight()
export default () => <View style={styles.statusBarUnderlay} />
const styles = StyleSheet.create({
statusBarUnderlay: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
height: STATUS_BAR_HEIGHT,
backgroundColor: 'white',
},
})
ReactNativeFastImageExample/src/withCacheBust.js
+28
View File
@@ -0,0 +1,28 @@
import React, { Component } from 'react'
import uuid from 'uuid/v4'
export default BaseComponent => {
class WithCacheBust extends Component {
state = { bust: '?bust' }
onPressReload = () => {
// Force complete re-render and bust image cache.
const key = uuid()
const bust = `?bust=${key}`
this.setState({ bust })
}
render() {
return (
<BaseComponent
bust={this.state.bust}
onPressReload={this.onPressReload}
/>
)
}
}
WithCacheBust.displayName = `withCacheBust${BaseComponent.displayName}`
return WithCacheBust
}