Skip to content
This repository has been archived by the owner on Feb 3, 2024. It is now read-only.

๐ŸŒ ProgressiveImage, progressively load images with React Native.

License

Notifications You must be signed in to change notification settings

DylanVann/react-native-progressive-image

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

21 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

ProgressiveImage

๐ŸŒ ProgressiveImage, progressively load images with React Native.

npm license


Demo of ProgressiveImage.

Progressively load images. Loads a small thumbnail first. Includes fade and blur effects.

Installation

yarn add react-native-progressive-image

Usage

import ProgressiveImage from 'react-native-progressive-image'

const TheProgressiveImage = () =>
  <ProgressiveImage
    thumbnailSource={{ uri: 'http://i.imgur.com/O249H4P.png?bust' + Math.random() }}
    imageSource={{ uri: 'http://i.imgur.com/741u15U.png?bust' + Math.random() }}
    style={{ flex: 1, alignItems: 'stretch' }}
  />

Properties

Prop Description Default
imageSource Image source (e.g. { uri: 'https://facebook.github.io/react/img/logo_og.png' }). None
thumbnailSource Should be a low resolution version of the image used in imageSource. None
thumbnailBlurRadius Blur radius for the low resolution thumbnail (iOS only). 5
style Make sure to include width and height, or use flex. None
imageFadeDuration Fade-in duration for the image in ms. 250
thumbnailFadeDuration Fade-in duration for the thumbnail in ms. 250
onLoadThumbnail Callback function that gets called when the thumbnail is loaded. noop
onLoadImage Callback function that gets called when the main image is loaded. noop

Credits

Based on Sharath Prabhal's blog post.