Skip to main content

Image Style Props

Examplesโ€‹

Image Resize Modeโ€‹

Image Borderโ€‹

Image Border Radiusโ€‹

Image Tintโ€‹

Reference

Propsโ€‹

backfaceVisibilityโ€‹

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

TypeDefault
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.

TypeDefault
number1.0

overflowโ€‹

TypeDefault
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โ€‹

TypeDefault
enum('cover', 'contain', 'stretch', 'repeat', 'center')'cover'

tintColorโ€‹

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

Type
color