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