react-native-image-progress

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