status-im/react-native-fast-image
1
0
Fork 0
mirror of https://github.com/status-im/react-native-fast-image.git synced 2026-09-01 14:21:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix example margins and add labels to resizeMode example.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
ReactNativeFastImageExample/src/ResizeModeExample.js
+41 -22
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)