ImageImage wrapper with extra functionality like source transform and assets support

UX Guidelines

Dev

PlaygroundCode Example

INFO

This component support margin modifiers.

TIP

This component extends the Image props.

APIThis is the list of additional props for the component

aspectRatio

number

The aspect ratio for the image

assetGroup

string

the asset group, default is icons

assetName

string

if provided image source will be driven from asset name

cover

boolean

Show image as a cover, full width, image (according to aspect ratio, default: 16:8)

customOverlayContent

JSX.Element

Render an overlay with custom content

errorSource

ImageSourcePropType

Default image source in case of an error

imageId

string

An imageId that can be used in sourceTransformer logic

overlayColor

string

Pass a custom color for the overlay

overlayIntensity

LOW | MEDIUM | HIGH

OverlayIntensityType. Default is Image.overlayIntensityType.LOW

overlayType

VERTICAL | TOP | BOTTOM | SOLID

The type of overlay to place on top of the image.the image MUST have proper size, see examples in: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/OverlaysScreen.tsx

recorderTag

'mask' | 'unmask'

Recorder Tag

sourceTransformer

(props: any) => ImageSourcePropType

custom source transform handler for manipulating the image source (great for size control)

supportRTL

boolean

whether the image should flip horizontally on RTL locals

tintColor

string

the asset tint

useBackgroundContainer

boolean

Use a container for the Image, this can solve issues on Android when animation needs to be performed on the same view; i.e. animation related crashes on Android.