Skip to content

Image.stories.mdx

Latest commit

 

History

History
214 lines (160 loc) · 4.83 KB

Image.stories.mdx

File metadata and controls

214 lines (160 loc) · 4.83 KB

import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import * as Stories from './examples';

Image

An accessible and responsive image component.

Props

Name Type Default
...ViewProps
blurRadius ?number
defaultSource ?Source
draggable ?boolean false
onError ?Function
onLoad ?Function false
onLoadEnd ?Function false
onLoadStart ?Function false
onProgress ?Function false
resizeMode ?ResizeMode 'cover'
source Source false
style ?Style

blurRadius

The blur radius of the blur filter added to the image.

defaultSource

The source uri is a string representing a placeholder to display while the main image is being loaded.

type Source = { uri: string, width: number, height: number }

draggable

This is a web-only prop that indicates whether the image can be dragged with native browser behavior. The default is false.

onError

Called on load error with {nativeEvent: {error}}.

onLoad

Called when load completes successfully.

onProgress

Invoked on download progress.

resizeMode

Determines how to resize the image when the frame doesn't match the raw image dimensions.

type ResizeMode = 'center' | 'contain' | 'cover' | 'none' | 'repeat' | 'stretch';

source

The source uri is a string representing the resource identifier for the image, which could be an http address or a base64 encoded image.

type Source = { uri: string, width: number, height: number, method?: string, headers?: object }

style

{
  ...ViewProps.style
  resizeMode: ResizeMode
  tintColor: Color
}

shadows

Image shadows are derived exactly from the pixels.

tintColor

Tint color is applied to all opaque pixels.

Static methods

getSize(url, callback)

type GetSize = (url: string, success: (width, height) => {}, failure: function) => void

Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download.

(In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however, it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data.)

const uri = 'https://www.domain.com/img-1.jpg';
Image.getSize(uri, ((width, height) => {
  // image size is available
});

prefetch(url)

type 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.

const uri = 'https://www.domain.com/img-1.jpg';
Image.prefetch(uri).then(() => {
  // image is now prefetched
});

queryCache(list)

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.

Image.queryCache([
  'https://www.domain.com/img-1.jpg',
  'https://www.domain.com/img-2.missing',
  'https://www.domain.com/img-3.jpg'
]).then(res => {
  expect(res).toEqual({
    'https://www.domain.com/img-1.jpg': 'disk/memory',
    'https://www.domain.com/img-3.jpg': 'disk/memory'
  });
});