Files
react-native-fast-image/ReactNativeFastImageExample/src/ResizeModeExample.tsx
T

74 lines
2.0 KiB
TypeScript
Raw Normal View History

2018-09-23 18:40:18 -04:00
import React from 'react'
import { StyleSheet, View } from 'react-native'
2018-09-23 18:40:18 -04:00
import SectionFlex from './SectionFlex'
2020-07-16 23:31:44 -04:00
import { FastImage } from 'react-native-fast-image'
2018-09-23 18:40:18 -04:00
import Section from './Section'
import FeatureText from './FeatureText'
import BulletText from './BulletText'
const IMAGE_URL = 'https://media.giphy.com/media/GEsoqZDGVoisw/giphy.gif'
2020-03-12 02:27:37 -04:00
const Col = (p: any) => <View style={styles.col} {...p} />
2018-09-23 18:40:18 -04:00
const ResizeModeExample = () => (
<View>
<Section>
<FeatureText text="• resizeMode." />
</Section>
<SectionFlex style={styles.container}>
<Col>
<FastImage
style={styles.image}
2020-07-16 23:31:44 -04:00
resizeMode="contain"
2018-09-23 18:40:18 -04:00
source={{ uri: IMAGE_URL }}
/>
<BulletText>contain</BulletText>
</Col>
<Col>
<FastImage
style={styles.image}
2020-07-16 23:31:44 -04:00
resizeMode="center"
2018-09-23 18:40:18 -04:00
source={{ uri: IMAGE_URL }}
/>
<BulletText>center</BulletText>
</Col>
<Col>
<FastImage
style={styles.image}
2020-07-16 23:31:44 -04:00
resizeMode="stretch"
2018-09-23 18:40:18 -04:00
source={{ uri: IMAGE_URL }}
/>
<BulletText>stretch</BulletText>
</Col>
<Col>
<FastImage
style={styles.image}
2020-07-16 23:31:44 -04:00
resizeMode="cover"
2018-09-23 18:40:18 -04:00
source={{ uri: IMAGE_URL }}
/>
<BulletText>cover</BulletText>
</Col>
</SectionFlex>
</View>
)
const styles = StyleSheet.create({
image: {
height: 100,
width: 50,
backgroundColor: '#ddd',
margin: 20,
marginTop: 0,
marginBottom: 10,
flex: 0,
},
container: {
padding: 20,
},
col: {
alignItems: 'center',
},
})
export default ResizeModeExample