/react-native-image-blur-loading

React Native component for progressive image loading.

Primary LanguageTypeScript

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