Skip to content

katanyaJATI/react-native-image-blur-loading

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

React Native component for progressive image loading.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published