Image Style Props

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