ImageRenders images responsively, offers an optional contrast overlay, and displays placeholder on load errors.

UX Guidelines

Overview

Image OverlaysOverlays are added on top of an image in cases when extra contrast is needed to increase legebility of the content above the image.

Usage Examples

Types

Type	Preview
Black Overlay (default)
White Overlay

Overlay Types

Type	Black Overlay (default)	White Overlay
Gradient Top markdown: **Black height:** 75% of image **White height:** 70% of image
Gradient Bottom markdown: **Black height:** 75% of image **White height:** 70% of image
Gradient Both markdown: **Black height:** 40% of image **White height:** 50% of image
Flat Overlay markdown: **Black opacity:** 45% **White opacity:** 40%

Overlay intensity

Property	Black Overlay (default)	White Overlay
Low Intensity Image: GradientOverlay.png
Medium Intensity image: GradientOverlayMedium.png
High Intensity Image: GradientOverlayHigh.png

Image ErrorAdd a fallback to the Image component that displays the “placeholderMissingImage” illustration, in one of the following scenarios: - URL is invalid (broken) - Image that is not cached + offline mode - Failed fetching from server

Usage Examples

Spec

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.