Image Style Props

Examples

Function Component

Class Component

Function Component

Class Component

Function Component

Class Component

Function Component

Class Component

Reference

Props

borderTopRightRadius

Type	Required
number	No

---

backfaceVisibility

Type	Required
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

---

backgroundColor

Type	Required
color	No

---

borderWidth

Type	Required
number	No

---

opacity

Type	Required
number	No

---

overflow

Type	Required
enum('visible', 'hidden')	No

---

resizeMode

Determines how to resize the image when the frame doesn't match the raw image dimensions.

• cover: Scale the image uniformly (maintain the image's aspect ratio) so that:

  • Both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding)
  • At least one dimension of the scaled image will be equal to the corresponding dimension of the view (minus padding)

• contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

• stretch: Scale width and height independently, This may change the aspect ratio of the src.

• repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.

• center: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.

Type	Required
enum('cover', 'contain', 'stretch', 'repeat', 'center')	No

---

tintColor

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

Type	Required
color	No

---

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