Socket
Socket
Sign inDemoInstall

react-native-progressive-image

Package Overview
Dependencies
0
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-progressive-image

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


Version published
Maintainers
1
Weekly downloads
57
decreased by-28.75%

Weekly downloads

Readme

Source

react-native-progressive-image

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

react-native-progressive-image demo

Based on Sharath Prabhal's blog post.

Installation

npm i -S 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

PropDescriptionDefault
imageSourceImage source (e.g. { uri: 'https://facebook.github.io/react/img/logo_og.png' }).None
thumbnailSourceShould be a low resolution version of the image used in imageSource.None
thumbnailBlurRadiusBlur radius for the low resolution thumbnail (iOS only).5
styleMake sure to include width and height, or use flex.None
imageFadeDurationFade-in duration for the image in ms.250
thumbnailFadeDurationFade-in duration for the thumbnail in ms.250
onLoadThumbnailCallback function that gets called when the thumbnail is loaded.noop
onLoadImageCallback function that gets called when the main image is loaded.noop

Keywords

FAQs

Last updated on 24 Nov 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc