Image

Blur Radius

A number between 1 and 100 that determines the blur radius of the blur filter added to the image. Defaults to 0.

On IOS, you will need to set higher than 5 for any effect.

Component Name

Set the name of the component. The name is reflected in the Components tree. Defaults to Image.

Resize Mode

Determines how the image should be resized to fit its container. This property tells the image to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible". It mirrors the CSS object-fit property.

cover - The image is sized to maintain its aspect ratio while filling the container box. If the image's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.

contain - The image is scaled down or up to maintain its aspect ratio while fitting within the container box.

fill - The image is sized to entirely fill the container box. If necessary, the image will be stretched or squished to fit.

none - The image is not resized and is centered by default. When specified, the exact position can be controlled with contentPosition prop.

scale-down - The image is sized as if none or contain were specified, whichever would result in a smaller concrete image size.

Content Position

It is used together with Content Fit to specify how the image should be positioned with x/y coordinates inside its own container. An equivalent of the CSS object-position property.

Transition Effect

Set how the image view should transition the contents when switching the image source. On Android, only 'cross-dissolve' is supported. On Web, 'curl-up' and 'curl-down' effects are not supported.

Transition Duration

The duration of the Transition Effect in milliseconds

Transition Timing

Specifies the speed curve of the Transition Effect and how intermediate values are calculated.

Cache Policy

Determines whether to cache the image and where

none - Image is not cached at all.

disk - Image is queried from the disk cache if exists, otherwise it's downloaded and then stored on the disk.

memory - Image is cached in memory. Might be useful when you render a high-resolution picture many times. Memory cache may be purged very quickly to prevent high memory usage and the risk of out of memory exceptions.

memory-disk - Image is cached in memory, but with a fallback to the disk cache.

Allow Downscaling

Whether the image should be downscaled to match the size of the view container. Turning off this functionality could negatively impact the application's performance, particularly when working with large assets. However, it would result in smoother image resizing, and end-users would always have access to the highest possible asset quality.

Downscaling is never used when the Content Fit prop is set to none or fill.

Source Type

Select the type of source to use for the image

Static: Use when the image source is an uploaded Asset that will be bundled with your app's code.

Remote Url: Use when the image source is a static URL that won't change.

Data: Use when the image URL is dynamic and coming from an REST API Endpoint.

Source

Set the source to use for the image depending on which Source Type you selected.

For Static, you'll be able to select one of your uploaded assets as the image source.

For Remote Url, you'll be able to enter a URL to use as the image source.

For Data you'll be able to pass a dynamic value such as a value from a Fetch or List.

Cache Key

A unique identifier for the image used to invalidate the cache. When this key changes, the cache is invalidated and image is reloaded. Defaults to image url.

Blur Hash

A string used to generate the image placeholder. https://blurha.sh/