import React, { Component } from "react";
import { View, Image, StyleSheet, Text } from "react-native";
class DisplayAnImageWithStyle extends Component {
render() {
return (
<View style={styles.container}>
<View>
<Image
style={{
resizeMode: "cover",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>resizeMode : cover</Text>
</View>
<View>
<Image
style={{
resizeMode: "contain",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>resizeMode : contain</Text>
</View>
<View>
<Image
style={{
resizeMode: "stretch",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>resizeMode : stretch</Text>
</View>
<View>
<Image
style={{
resizeMode: "repeat",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>resizeMode : repeat</Text>
</View>
<View>
<Image
style={{
resizeMode: "center",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>resizeMode : center</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
display: "flex",
flexDirection: "vertical",
justifyContent: "space-around",
alignItems: "center",
height: "100%",
textAlign: "center"
}
});
export default DisplayAnImageWithStyle;