Image

Image wrapper with extra functionality like source transform and assets support
(code example)

info

This component extends Image props.

tip

This component support margin modifiers.

note

please note that for SVG support you need to add both react-native-svg and react-native-svg-transformer and also configure them (see metro.config.js)

Usage

<Image source={{uri: 'https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg'}}/>

API

aspectRatio

The aspect ratio for the image
number

assetGroup

the asset group, default is icons
string

assetName

if provided image source will be driven from asset name
string

cover

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

customOverlayContent

Render an overlay with custom content
JSX.Element

errorSource

Default image source in case of an error
ImageSourcePropType

imageId

An imageId that can be used in sourceTransformer logic
string

overlayColor

Pass a custom color for the overlay
string

overlayIntensity

OverlayIntensityType
LOW | MEDIUM | HIGH

overlayType

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

The type of overlay to place on top of the image.
VERTICAL | TOP | BOTTOM | SOLID

recorderTag

Recorder Tag
'mask' | 'unmask'

sourceTransformer

custom source transform handler for manipulating the image source (great for size control)
(props: any) => ImageSourcePropType

supportRTL

whether the image should flip horizontally on RTL locals
boolean

tintColor

the asset tint
string

useBackgroundContainer

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