Image Style Props
import React from "react";
import { View, Image, Text, StyleSheet } from "react-native";
const DisplayAnImageWithStyle = () => (
<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;
import React from "react";
import { View, Image, StyleSheet, Text } from "react-native";
const DisplayAnImageWithStyle = () => (
<View style={styles.container}>
<View>
<Image
style={{
borderTopRightRadius: 20,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>borderTopRightRadius</Text>
</View>
<View>
<Image
style={{
borderBottomRightRadius: 20,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>borderBottomRightRadius</Text>
</View>
<View>
<Image
style={{
borderBottomLeftRadius: 20,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>borderBottomLeftRadius</Text>
</View>
<View>
<Image
style={{
borderTopLeftRadius: 20,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>borderTopLeftRadius</Text>
</View>
</View>
);
const styles = StyleSheet.create({
container: {
display: "flex",
flexDirection: "vertical",
justifyContent: "space-around",
alignItems: "center",
height: "100%",
textAlign: "center"
}
});
export default DisplayAnImageWithStyle;
import React from "react";
import { View, Image, StyleSheet, Text } from "react-native";
const DisplayAnImageWithStyle = () => (
<View style={styles.container}>
<Image
style={{
borderColor: "red",
borderWidth: 5,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>
<Text>borderColor & borderWidth</Text>
</Text>
</View>
);
const styles = StyleSheet.create({
container: {
display: "flex",
flexDirection: "vertical",
justifyContent: "center",
alignItems: "center",
height: "100%",
textAlign: "center"
}
});
export default DisplayAnImageWithStyle;
import React from "react";
import { View, Image, StyleSheet, Text } from "react-native";
const DisplayAnImageWithStyle = () => (
<View style={styles.container}>
<Image
style={{
tintColor: "#000000",
resizeMode: "contain",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>tintColor</Text>
</View>
);
const styles = StyleSheet.create({
container: {
display: "flex",
flexDirection: "vertical",
justifyContent: "space-around",
alignItems: "center",
height: "100%",
textAlign: "center"
}
});
export default DisplayAnImageWithStyle;
Reference
Type | Required |
---|
enum('visible', 'hidden') | No |
Type | Required |
---|
enum('visible', 'hidden') | No |
Type | Required |
---|
enum('cover', 'contain', 'stretch', 'repeat', 'center') | No |
Changes the color of all the non-transparent pixels to the tintColor.
When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners:
- Certain resize modes, such as 'contain'
- Animated GIFs
A typical way to use this prop is with images displayed on a solid background and setting the overlayColor
to the same color as the background.
Type | Required | Platform |
---|
string | No | Android |