Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-native-progressive-image

1.0.4 • Public • Published

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

Install

npm i react-native-progressive-image

DownloadsWeekly Downloads

68

Version

1.0.4

License

MIT

Last publish

Collaborators

  • avatar