vuongductuanktmt / react-native-image-blur-loading

React Native component for progressive image loading.

React Native Image Blur Loading

React Native component for progressive image loading.

Installation

Run in your root project directory

$ npm install react-native-image-blur-loading --save

Usage

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>
  }
}

Properties

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

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT