Skip to content

Instantly share code, notes, and snippets.

@josenaves
Created March 26, 2018 21:35
Show Gist options
  • Save josenaves/968b98b7a18ccf43444dc9763a8d38a0 to your computer and use it in GitHub Desktop.
Save josenaves/968b98b7a18ccf43444dc9763a8d38a0 to your computer and use it in GitHub Desktop.
Show how different Image resizeMode works
import React, { Component } from 'react';
import { View, StyleSheet, Image } from 'react-native';
import { Constants } from 'expo';
const mallandro = require('./assets/rah.png');
const HEIGHT = 170;
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.photoContainer}>
<Image
style={{ flex: 1, height: HEIGHT, width: null }}
resizeMode="cover"
source={mallandro}
/>
</View>
<View style={styles.photoContainer}>
<Image
style={{ flex: 1, height: HEIGHT, width: null }}
resizeMode="contain"
source={mallandro}
/>
</View>
<View style={styles.photoContainer}>
<Image
style={{ flex: 1, height: HEIGHT, width: null }}
resizeMode="stretch"
source={mallandro}
/>
</View>
<View style={styles.photoContainer}>
<Image
style={{ flex: 1, height: HEIGHT, width: null }}
resizeMode="center"
source={mallandro}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
photoContainer: {
flexDirection: 'row',
height: HEIGHT,
backgroundColor: 'cyan',
marginTop: 20,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment