Progressively load images. Loads a small thumbnail first. Includes fade and blur effects.
Based on Sharath Prabhal's blog post.
npm i -S react-native-progressive-image
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' }}
/>| 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 |