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.
If headers contains ‘Cache-Control: max-stale’ with no value specified and the image fails to load, the component tries again passing cache: ‘only-if-cached’ to the underlying native Image (iOS only). This way the app can render otherwise inaccessible stale cached images.
// 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
// Note: In Web version, 'auto' doesn't scale down image
// if width/height smaller than the original image size
resizeMode: 'stretch' | 'contain' | 'cover' | 'auto' | 'repeat' = 'contain';
// URL to image
source: string = undefined;
// See below for supported styles
style: ImageStyleRuleSet | ImageStyleRuleSet[] = [];
// ID that can be used to identify the instantiated element for testing purposes.
testId: string = undefined;
// Tooltip for image
title: string = undefined;
// 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;
// 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>;
// Similarly to [prefetch], this method loads a remote image and stores it in
// a cache. If prefetching was successful it will also get image dimensions. It will be
// useful if you need [getNativeHeight] or [getNativeWidth] after image
// was loaded because you will get this info together with prefetching and before
// you actually need to show the image.
getMetadata(url: string): Promise<ImageMetadata>