Examples

Image Resize Mode

• Function Component
• Class Component

Image Border

• Function Component
• Class Component

Image Border Radius

• Function Component
• Class Component

Image Tint

• Function Component
• Class Component

Reference

Props

backfaceVisibility

The property defines whether or not the back face of a rotated image should be visible.

Type	Default
enum('visible', 'hidden')	'visible'

---

backgroundColor

Type
color

---

borderBottomLeftRadius

Type
number

---

borderBottomRightRadius

Type
number

---

borderColor

Type
color

---

borderRadius

Type
number

---

borderTopLeftRadius

Type
number

---

borderTopRightRadius

Type
number

---

borderWidth

Type
number

---

opacity

Set an opacity value for the image. The number should be in the range from 0.0 to 1.0.

Type	Default
number	1.0

---

overflow

Type	Default
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	Default
enum('cover', 'contain', 'stretch', 'repeat', 'center')	'cover'

---

tintColor

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

Type
color