React Native Image Blur Loading

React Native component for progressive image loading.

Installation

Run in your root project directory

using NPM

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

or using yarn

$ yarn add react-native-image-blur-loading

Usage

import React, { Component } from 'react';
import { View } from 'react-native';
import ImageBlurLoading from 'react-native-image-blur-loading'

// ...
const MyComponent = () => {
  return (
    <View style={{ flex: 1 }}>
      <ImageBlurLoading
        thumbnailSource={{ uri: 'https://picsum.photos/id/1/50/50' }}
        source={{ uri: 'https://picsum.photos/id/1/1000/1000' }}
        style={{ flex: 1, width: 'auto', height: 'auto', resizeMode: 'contain' }}
      />
    </View>
  )
}

Properties

Props	Description	Type	Required	Default
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.	boolean	No	true
fastImage	uses the FastImage component (react-native-fast-image) to handle image caching.	boolean	No	false
resizeMode	Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to cover.	ResizeMode	No	cover

Contributing

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

License

MIT