React Native component for progressive image loading.
Run in your root project directory
$ npm install react-native-image-blur-loading --save
import React, { Component } from 'react';
import { View } from 'react-native';
import ImageBlurLoading from 'react-native-image-blur-loading'
// ...
class MyComponent extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<ImageBlurLoading
withIndicator
thumbnailSource={{ uri: 'https://picsum.photos/id/1/50/50' }}
source={{ uri: 'https://picsum.photos/id/1/1000/1000' }}
style={{ flex: 1, width: null, height: null, resizeMode: 'contain' }}
/>
</View>
}
}
Props | Description | Type | Required |
---|---|---|---|
Image props ... | It accepts all the Image props | - | - |
thumbnailSource |
The source of the thumbnail image. Should be a low resolution version of the image used in source . |
ImageSourcePropType | No |
withIndicator |
Displaying ActivityIndicator component while the image is still loading. |
bool | No |
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.