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.
importImagefrom'react-native-image-progress';importProgressBarfrom'react-native-progress/Bar';<Imagesource={{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. | ActivityIndicator or ProgressBarAndroid |
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.
importImagefrom'react-native-image-progress';importProgressfrom'react-native-progress';<Imagesource={{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