All Projects → DylanVann → React Native Progressive Image

DylanVann / React Native Progressive Image

Licence: mit
🌁 ProgressiveImage, progressively load images with React Native.

Projects that are alternatives of or similar to React Native Progressive Image

Sharemeow
😻 text shots service
Stars: ✭ 180 (-8.63%)
Mutual labels:  image
Ddperspectivetransform
🔲 Warp image transformation
Stars: ✭ 186 (-5.58%)
Mutual labels:  image
Video Thumbnail Generator
📷 Generate thumbnail sprites from videos.
Stars: ✭ 190 (-3.55%)
Mutual labels:  image
Goiv
Small and simple image viewer written in pure Go.
Stars: ✭ 182 (-7.61%)
Mutual labels:  image
Uploadcare Widget
Uploadcare Widget, an ultimate tool for HTML5 file upload supporting multiple file upload, drag&drop, validation by file size/file extension/MIME file type, progress bar for file uploads, image preview.
Stars: ✭ 183 (-7.11%)
Mutual labels:  image
Retini
A super simple retina (2x, 3x) image converter.
Stars: ✭ 187 (-5.08%)
Mutual labels:  image
Material Ui Image
Material style image with loading animation
Stars: ✭ 178 (-9.64%)
Mutual labels:  image
Qimage Win
Windows 版本 Markdown 一键贴图工具,支持本地文件、截图、网络图片一键上传七牛云并返回图片引用,让 Markdown 中贴图变成一种享受。
Stars: ✭ 196 (-0.51%)
Mutual labels:  image
Lantern
基于Swift的高可用视图框架
Stars: ✭ 181 (-8.12%)
Mutual labels:  image
Cropiwa
📐 Configurable Custom Crop widget for Android
Stars: ✭ 2,185 (+1009.14%)
Mutual labels:  image
Seashore
easy to use mac osx image editing application for the rest of us
Stars: ✭ 182 (-7.61%)
Mutual labels:  image
Imantics
📷 Reactive python package for managing, creating and visualizing different deep-learning image annotation formats
Stars: ✭ 184 (-6.6%)
Mutual labels:  image
Pixel
📷 A composable image editor using Core Image and Metal.
Stars: ✭ 2,495 (+1166.5%)
Mutual labels:  image
Flutter image editor
Flutter plugin, support android/ios.Support crop, flip, rotate, color martix, mix image, add text. merge multi images.
Stars: ✭ 181 (-8.12%)
Mutual labels:  image
Croppie
A Javascript Image Cropper
Stars: ✭ 2,330 (+1082.74%)
Mutual labels:  image
Hxphotopicker
图片/视频选择器 - 支持LivePhoto、GIF图片选择、3DTouch预览、在线下载iCloud上的资源、编辑图片/视频、浏览网络图片 功能 Imitation wx photo/image picker - support for LivePhoto, GIF image selection, 3DTouch preview, Download the resources on iCloud online, browse the web image function
Stars: ✭ 2,363 (+1099.49%)
Mutual labels:  image
Atgmediabrowser
Image slide-show viewer with multiple predefined transition styles, with ability to create new transitions with ease.
Stars: ✭ 186 (-5.58%)
Mutual labels:  image
Arbitrary Text To Image Papers
A collection of arbitrary text to image papers with code (constantly updating)
Stars: ✭ 196 (-0.51%)
Mutual labels:  image
Picasso
A Go image composer
Stars: ✭ 196 (-0.51%)
Mutual labels:  image
Stackblur Go
A fast, almost Gaussian Blur implementation in Go
Stars: ✭ 189 (-4.06%)
Mutual labels:  image

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].