ProgressiveImage
Demo of ProgressiveImage.
Progressively load images. Loads a small thumbnail first. Includes fade and blur effects.
Installation
yarn add react-native-progressive-imageUsage
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.