lzok / react-native-progressive-image

🌁 ProgressiveImage, progressively load images with React Native.

ProgressiveImage

🌁 ProgressiveImage, progressively load images with React Native.

Demo of ProgressiveImage.

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

Installation

yarn add 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

Credits

Based on Sharath Prabhal's blog post.