react-native-progressive-image

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

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 |