@escher/image

Image

This package contains React Native Web's <Image /> and <ImageBackground />. They share the same props, however, you should NOT put children inside of `.

Installation

yarn add @escher/image

Then include the styles in your application. Make sure to autoprefix as these components (and RNW) relies on flexbox.

import '@escher/image/style.css';

If you are targeting IE 11, AND you want to take advantage of the inline prop (which is ideal for placing an <Image> within an inline element), you should include the style.css file to be safe. Be sure that your build system has vendor prefixing as these styles rely on flexbox support.

Props

source: string | ImageSourceURI

The image source URI. This can be a string or an object with uri, height, and width specified.

<Image source="https://google.com/favicon.ico" />

<Image
  source={{
    uri: 'https://google.com/favicon.ico',
  }}
/>

<Image
  source={{
    uri: 'https://google.com/favicon.ico',
    height: 10,
    width: 20,
  }}
/>

defaultSource?: string | ImageSourceURI = ''

The default image source. This is used if the source fails to load.

Default: ''

<Image defaultSource="https://google.com/favicon.ico" />

<Image
  defaultSource={{
    uri: 'https://google.com/favicon.ico',
    height: 10,
    width: 20,
  }}
/>

resizeMode?: ImageResizeMode = 'cover'

Image resize mode. Allowed values include:

// this is exported for your convenience
export type ImageResizeMode =
  | 'none'
  | 'cover'
  | 'contain'
  | 'stretch'
  | 'repeat'
  | 'center';

accessibilityLabel: string

This is the equivalent of alt text for your image.

Required.

onLayout?: (e: { nativeEvent: Event }) => void;

Callback for when the image has finished layout. Will only fire if resizeMode is set to center, repeat,

onLoad?: (e: { nativeEvent: Event }) => void;

Callback for when the image has completed loading.

onLoadStart?: (e: { nativeEvent: Event }) => void;

Callback for when the image has started loading.

onLoadEnd?: (e: { nativeEvent: Event }) => void;

Callback for when the image has finished loading.

onError?: (e: { nativeEvent: Event }) => void;

Callback for when and if the image has errored when attempting to load.

Style Overrides

<Image style> and <Image className /> will be applied to the outer <div>. This is usually what you want to do. However, you can also override styles with your own css with these selectors:

[data-escher-image-root] {
  /* this is the outer div */
}

[data-escher-image-image] {
  /* this is inner div with the background-image */
}