Version: 0.63

Image Style Props

Examples

import React from "react";
import { View, Image, Text, StyleSheet } from "react-native";
const DisplayAnImageWithStyle = () => {
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;
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;
import React from "react";
import { View, Image, StyleSheet, Text } from "react-native";
const DisplayAnImageWithStyle = () => {
return (
<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, { Component } from "react";
import { View, Image, StyleSheet, Text } from "react-native";
class DisplayAnImageWithStyle extends Component {
render() {
return (
<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 = () => {
return (
<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, { Component } from "react";
import { View, Image, StyleSheet, Text } from "react-native";
class DisplayAnImageWithStyle extends Component {
render() {
return (
<View style={styles.container}>
<Image
style={{
borderColor: "red",
borderWidth: 5,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>borderColor & borderWidth</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 = () => {
return (
<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;
import React, { Component } from "react";
import { View, Image, StyleSheet, Text } from "react-native";
class DisplayAnImageWithStyle extends Component {
render() {
return (
<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

Props

borderTopRightRadius

TypeRequired
numberNo

backfaceVisibility

TypeRequired
enum('visible', 'hidden')No

borderBottomLeftRadius

TypeRequired
numberNo

borderBottomRightRadius

TypeRequired
numberNo

borderColor

TypeRequired
colorNo

borderRadius

TypeRequired
numberNo

borderTopLeftRadius

TypeRequired
numberNo

backgroundColor

TypeRequired
colorNo

borderWidth

TypeRequired
numberNo

opacity

TypeRequired
numberNo

overflow

TypeRequired
enum('visible', 'hidden')No

resizeMode

TypeRequired
enum('cover', 'contain', 'stretch', 'repeat', 'center')No

tintColor

Changes the color of all the non-transparent pixels to the tintColor.

TypeRequired
colorNo

overlayColor

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.

For details of how this works under the hood, see https://frescolib.org/docs/rounded-corners-and-circles.html

TypeRequiredPlatform
stringNoAndroid
Last updated on by teikjun