status-im
/
react-native-fast-image
mirror of https://github.com/status-im/react-native-fast-image.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix example margins and add labels to resizeMode example.

This commit is contained in:
Dylan Vann 2018-05-09 23:23:59 -04:00
parent bb1f3293c8
commit 60511af352
5 changed files with 52 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ReactNativeFastImageExample/src/Button.js
View File

@ -12,7 +12,7 @@ const Button = ({ text, onPress }) => (
const styles = StyleSheet.create({
button: {
backgroundColor: 'black',
margin: 5,
margin: 10,
height: 44,
paddingLeft: 10,
paddingRight: 10,

2
ReactNativeFastImageExample/src/GifExample.js
View File

@ -23,7 +23,7 @@ const GifExample = ({ onPressReload, bust }) => (
const styles = StyleSheet.create({
image: {
backgroundColor: '#ddd',
margin: 10,
margin: 20,
height: 100,
width: 100,
flex: 0,

12
ReactNativeFastImageExample/src/PreloadExample.js
View File

@ -57,9 +57,7 @@ class PreloadExample extends Component {
) : (
<View style={styles.image} />
)}
<View
style={{ flexDirection: 'row', marginHorizontal: 10 }}
>
<View style={styles.buttons}>
<View style={{ flex: 1 }}>
<Button text="Bust" onPress={this.bustCache} />
</View>
@ -81,9 +79,15 @@ const styles = StyleSheet.create({
flexDirection: 'column',
alignItems: 'center',
},
buttons: {
flexDirection: 'row',
marginHorizontal: 20,
marginBottom: 10,
},
image: {
backgroundColor: '#ddd',
margin: 10,
margin: 20,
marginBottom: 10,
height: 100,
width: 100,
},

1
ReactNativeFastImageExample/src/PriorityExample.js
View File

@ -53,6 +53,7 @@ const styles = StyleSheet.create({
height: 100,
backgroundColor: '#ddd',
margin: 10,
marginVertical: 20,
},
})

63
ReactNativeFastImageExample/src/ResizeModeExample.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { StyleSheet, View, Text } from 'react-native'
import withCacheBust from './withCacheBust'
import SectionFlex from './SectionFlex'
import FastImage from 'react-native-fast-image'
@ -8,32 +8,46 @@ import FeatureText from './FeatureText'
const IMAGE_URL = 'https://media.giphy.com/media/GEsoqZDGVoisw/giphy.gif'
const Label = ({ children }) => <Text style={styles.text}>{children}</Text>
const BorderRadiusExample = ({ onPressReload, bust }) => (
<View>
<Section>
<FeatureText text="• resizeMode." />
</Section>
<SectionFlex onPress={onPressReload}>
<FastImage
style={styles.image}
resizeMode={FastImage.resizeMode.contain}
source={{ uri: IMAGE_URL }}
/>
<FastImage
style={styles.image}
resizeMode={FastImage.resizeMode.center}
source={{ uri: IMAGE_URL }}
/>
<FastImage
style={styles.image}
resizeMode={FastImage.resizeMode.stretch}
source={{ uri: IMAGE_URL }}
/>
<FastImage
style={styles.image}
resizeMode={FastImage.resizeMode.cover}
source={{ uri: IMAGE_URL }}
/>
<View>
<FastImage
style={styles.image}
resizeMode={FastImage.resizeMode.contain}
source={{ uri: IMAGE_URL }}
/>
<Label>contain</Label>
</View>
<View>
<FastImage
style={styles.image}
resizeMode={FastImage.resizeMode.center}
source={{ uri: IMAGE_URL }}
/>
<Label>center</Label>
</View>
<View>
<FastImage
style={styles.image}
resizeMode={FastImage.resizeMode.stretch}
source={{ uri: IMAGE_URL }}
/>
<Label>stretch</Label>
</View>
<View>
<FastImage
style={styles.image}
resizeMode={FastImage.resizeMode.cover}
source={{ uri: IMAGE_URL }}
/>
<Label>cover</Label>
</View>
</SectionFlex>
</View>
)
@ -43,9 +57,14 @@ const styles = StyleSheet.create({
height: 100,
width: 50,
backgroundColor: '#ddd',
margin: 5,
margin: 20,
marginBottom: 10,
flex: 0,
},
text: {
textAlign: 'center',
marginBottom: 20,
},
})
export default withCacheBust(BorderRadiusExample)