Image

This component displays an image, which can come from a local source or from the network. It supports JPEG, GIF and PNG formats.

If child elements are specified, the image acts as a background, and the children are rendered on top of it.

Props

// Alternate text to display if the image cannot be loaded
// or by screen readers
accessibilityLabel: string = undefined;

// HTTP headers to include when fetching the URL.
headers: { [headerName: string]: string } = undefined;

// Called when an error occurs that prevents the image from loading
onError: (err?: Error) => void;

// Called when the image successfully loads
onLoad: (size: Dimensions) => void;

// Android-specific resize property
resizeMethod: 'auto' | 'resize' | 'scale' = 'auto'; // Android only

// Determines how to resize the image if its natural size
// does not match the size of the container
resizeMode: 'stretch' | 'contain' | 'cover' | 'auto' | 'repeat' = 'stretch';

// Rasterize contents using offscreen bitmap (perf optimization)
shouldRasterizeIOS: boolean = false; // iOS only

// URL to image
source: string = undefined;

// See below for supported styles
style: ImageStyleRuleSet | ImageStyleRuleSet[] = [];

// Tooltip for image
title: string = undefined;

Styles

Flexbox Styles

View Styles

Transform Styles

Methods

// Returns the native width and height of the image. Can be called only after
// the onLoad has been called and only while the component is mounted.
getNativeHeight(): number;
getNativeWidth(): number;

Static Methods

// Prefetches a remote image and stores it in a cache. This can decrease the
// amount of time it takes when you later want to show the image because the
// image only has to be fetched from the local cache rather than over the
// network.
prefetch(url: string): Promise<boolean>;