Package Exports

react-native-progressive-image

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-progressive-image) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-progressive-image

Progressively load images. Loads a small thumbnail first. Includes fade and blur effects.

react-native-progressive-image demo

Based on Sharath Prabhal's blog post.

Installation

npm i -S react-native-progressive-image

Usage

import ProgressiveImage from 'react-native-progressive-image'

const TheProgressiveImage = () =>
  <ProgressiveImage
    thumbnailSource={{ uri: 'http://i.imgur.com/O249H4P.png?bust' + Math.random() }}
    imageSource={{ uri: 'http://i.imgur.com/741u15U.png?bust' + Math.random() }}
    style={{ flex: 1, alignItems: 'stretch' }}
  />

Properties

Prop	Description	Default
`imageSource`	Image source (e.g. { uri: 'https://facebook.github.io/react/img/logo_og.png' }).	None
`thumbnailSource`	Should be a low resolution version of the image used in `imageSource`.	None
`thumbnailBlurRadius`	Blur radius for the low resolution thumbnail (iOS only).	`5`
`style`	Make sure to include width and height, or use flex.	None
`imageFadeDuration`	Fade-in duration for the image in ms.	`250`
`thumbnailFadeDuration`	Fade-in duration for the thumbnail in ms.	`250`
`onLoadThumbnail`	Callback function that gets called when the thumbnail is loaded.	`noop`
`onLoadImage`	Callback function that gets called when the main image is loaded.	`noop`