Image

An accessible and responsive image component.

This component renders images with flexbox layout and cover object-fit (rather than stretch) by default.

import { Image } from 'react-native';

<Image {...props} />;

API #

Props #

...ViewProps ?ViewProps

All the props supported by View.

blurRadius ?number

The radius of the blur filter added to the image

defaultSource ?Source

A static image to display while loading the image source.

draggable ?boolean = false

Set whether the image can be dragged with native browser behavior. (Web-only)

onError ?({ nativeEvent: { error } }) => void

Called when the image fails to load.

onLoad ?({ nativeEvent: LoadEvent ) => void

Called when the image successfully loads.

onLoadEnd ?() => void

Called when image loading ends.

onLoadStart ?() => void

Called when the image loading starts.

resizeMode ?("center" | "cover" | "contain" | "none" | "stretch") = "cover"

Determines how the image source is resized to fit the layout of the image element.

source ?(string | Source)

The image source. The string can be a path to an external resource or a base64 encoded resource.

Source

height ?number

Set the styles of the view.

uri ?string

Set the styles of the view.

width ?number

Set the styles of the view.

Statics #

getSize ?(url: string, complete, failure) => void

Download an image and measure the width and height (in pixels) prior to displaying it. This method can fail if the image cannot be found, or fails to download.
Complete callback: (width: number, height: number) => void.
Failure callback: () => void.

prefetch ?(url: string) => Promise

Prefetches a remote image for later use by downloading it. Once an image has been prefetched it is assumed to be in native browser caches and available for immediate rendering.

queryCache ?(urls: Array<string>) => Promise

Performs cache interrogation. Returns a mapping from URL to cache status: “disk”, “memory”, “disk/memory”. If a requested URL is not in the mapping, it means it’s not in the cache.


Examples #

Updated
Edit
React Native for WebCopyright © Nicolas Gallagher and Facebook Inc.