@dwqs/react-native-image-viewer

A pure JavaScript image viewer component for react-native apps

Stats

StarsIssuesVersionUpdatedCreatedSize
@dwqs/react-native-image-viewer
6552.0.03 years ago3 years agoMinified + gzip package size for @dwqs/react-native-image-viewer in KB

Readme

download npm-version license

Overview

A pure JavaScript image viewer component for react-native apps with pan, pinch.etc, supporting both iOS and Android.

React Native required 0.33+

Show Cases

On IOS:

viewer-ios

On Android:

viewer-android

Installation

First, install react-native-image-viewer from npm:

npm i @dwqs/react-native-image-viewer --save

Or yarn:

yarn add @dwqs/react-native-image-viewer

Then use it:

// ES6 mudule
import ImageViewer from '@dwqs/react-native-image-viewer';

Usage

There are some code from example/App.js:

let imgsArr = [
    'https://facebook.github.io/react/logo-og.png',
    'http://scimg.jb51.net/allimg/160815/103-160Q509544OC.jpg',
    'http://img.sc115.com/uploads1/sc/jpgs/1508/apic22412_sc115.com.jpg',
    'http://h.hiphotos.baidu.com/zhidao/pic/item/0df431adcbef7609bca7d58a2adda3cc7cd99e73.jpg'
];

closeViewer(){
    this.setState({
        shown:false,
        curIndex:0
    })
}

<ImageViewer shown={this.state.shown}
             imageUrls={imgsArr}
             onClose={this.closeViewer.bind(this)}
             index={this.state.curIndex}>
</ImageViewer>

Configuration

Opthion Description isRequired
shown whether the ImageViewer is show required
imageUrls it's a array of images' url required
onClose hidden the ImageViewer when click on ImageViewer required
index the index of image url(in imageUrls) when open the ImageViewer required
failedUrl the url for image preview loaded failure not required

Feature

  • pan to image toggling
  • double click for image zooming
  • pinch for zoom image
  • animation for image showing

License

MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.