react-native-image-progress
Progress indicator for networked images in React Native
NOTE: This module requires React Native 0.9+
Installation
npm install --save react-native-image-progress
Usage
var Image = require('react-native-image-progress');
<Image
source={{ uri: 'http://loremflickr.com/640/480/dog' }}
indicator='bar'
style={{
width: 320,
height: 240,
}}/>
Properties
Any Image
property and the following:
Prop | Description | Default |
---|---|---|
indicator |
Style of the indicator, can be bar or spinner |
bar |
renderIndicator(progress) |
Function to render your own custom indicator, the progress argument is a number between 0 and 1 |
None |
color |
Color of the indicator. | #333 for bar, gray for spinner |
backgroundColor |
Color of the background (only applies to bar) | rgba(255, 255, 255, 0.5) |
Note: onLoad*
events are bubbled up, so if you wan't to do some custom thing when the image is loaded for example.
Demo
Example
Check full example in the Example
folder.
Todo
- Progress bar indicator
- Circular loading indicator
- Animate progress
- Optionally fade in images on completion
License
MIT License. © Joel Arvidsson