Image Style Props
Examples
+Image Style Props
Examples
+Image Resize Mode
- @@ -158,7 +159,7 @@ const styles = StyleSheet.create({ export default DisplayAnImageWithStyle;
Image Border
+-
+
- + Function Component Example + +
- + Class Component Example + +
Image Border Radius
- @@ -445,117 +557,7 @@ export default DisplayAnImageWithStyle; width: 100%; " >
-
-
- - Function Component Example - -
- - Class Component Example - -
Image Tint
- @@ -591,7 +593,7 @@ const styles = StyleSheet.create({ container: { display: "flex", flexDirection: "vertical", - justifyContent: "space-around", + justifyContent: "center", alignItems: "center", height: "100%", textAlign: "center" @@ -602,7 +604,7 @@ export default DisplayAnImageWithStyle;
Reference
Props
-borderTopRightRadius
-| Type | Required |
|---|---|
| number | No |
backfaceVisibility
+The property defines whether or not the back face of a rotated image should be visible.
| Type | Required |
|---|---|
| Type | Default |
| enum('visible', 'hidden') | No |
-
borderBottomLeftRadius
-| Type | Required |
|---|---|
| number | No |
-
borderBottomRightRadius
-| Type | Required |
|---|---|
| number | No |
-
borderColor
-| Type | Required |
|---|---|
| color | No |
-
borderRadius
-| Type | Required |
|---|---|
| number | No |
-
borderTopLeftRadius
-| Type | Required |
|---|---|
| number | No |
enum('visible', 'hidden') | 'visible' |
backgroundColor
| Type | Required |
|---|---|
| Type | |
| color | No |
| color |
+
borderBottomLeftRadius
+| Type |
|---|
| number |
+
borderBottomRightRadius
+| Type |
|---|
| number |
+
borderColor
+| Type |
|---|
| color |
+
borderRadius
+| Type |
|---|
| number |
+
borderTopLeftRadius
+| Type |
|---|
| number |
+
borderTopRightRadius
+| Type |
|---|
| number |
borderWidth
| Type | Required |
|---|---|
| Type | |
| number | No |
| number |
opacity
+Set an opacity value for the image. The number should be in the range from 0.0 to 1.0.
| Type | Required |
|---|---|
| Type | Default |
| number | No |
| number | 1.0 |
overflow
| Type | Required |
|---|---|
| Type | Default |
| enum('visible', 'hidden') | No |
enum('visible', 'hidden') | 'visible' |
+
overlayColor Android
+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 Fresco documentation.
+| Type |
|---|
| string |
resizeMode
| Type | Required |
|---|---|
| Type | Default |
| enum('cover', 'contain', 'stretch', 'repeat', 'center') | No |
enum('cover', 'contain', 'stretch', 'repeat', 'center') | 'cover' |
@@ -791,30 +812,13 @@ export default DisplayAnImageWithStyle;
Changes the color of all the non-transparent pixels to the tintColor.
| Type | Required |
|---|---|
| Type | |
| color | No |
| color |
-
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
-| Type | Required | Platform |
|---|---|---|
| string | No | Android |