Progress indicator for networked images in React Native
yarn add https://github.com/fendorio/react-native-image-progress.git
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 |
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 |
renderError(error) | Function to render your own custom error message or image fallback. | 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,}}/>For some use cases such as better GIF support or more granular control over caching you might want to use a custom image component, to do this simply use the createImageProgress function:
import{createImageProgress}from'react-native-image-progress';importFastImagefrom'react-native-fast-image';constImage=createImageProgress(FastImage);NOTE: the alternative image implementation must conform to the core Image component life cycle props, notably onProgress, onError, onLoad and onLoadStart.
MIT License. © Joel Arvidsson