Progress indicator for networked images in React Native
npm install --save react-native-image-progress
Note: Progress indicators has been broken out to a separate component; react-native-progress. To use them, please follow installation instructions for that package.
var Image = require('react-native-image-progress');
var ProgressBar = require('react-native-progress/Bar');
<Image
source={{ uri: 'http://loremflickr.com/640/480/dog' }}
indicator={ProgressBar}
style={{
width: 320,
height: 240,
}}/>
Any Image
property and the following:
Prop | Description | Default |
---|---|---|
indicator |
A component to display progress, will be passed a progress prop with a number between 0 and 1 and indeterminate a boolean wether or not component has started recieveing data. |
ActivityIndicatorIOS |
indicatorProps |
An object of props being passed to the indicator component. To disable indeterminate state, pass {indeterminate: false} . |
None |
renderIndicator(progress, indeterminate) |
Function to render your own custom indicator, useful for something very simple. If not, consider breaking it out to a separate component and use indicator prop instead. |
None |
threshold |
Number of milliseconds after mount to wait before displaying the indicator. Basically a workaround for cached images not to flash a spinner. Set to 0 to disable. |
50 |
Note: onLoad*
events are bubbled up, so if you wan't to do some custom thing when the image is loaded for example.
Check full example in the Example
folder.
var Image = require('react-native-image-progress');
var Progress = require('react-native-progress');
<Image
source={{ uri: 'http://loremflickr.com/640/480/dog' }}
indicator={Progress.Pie}
indicatorProps={{
size: 80,
borderWidth: 0,
color: 'rgba(150, 150, 150, 1)',
unfilledColor: 'rgba(200, 200, 200, 0.2)'
}}
style={{
width: 320,
height: 240,
}}/>
MIT License. © Joel Arvidsson