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.
