ImageViewer

!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 install ImageViewer --save-dev
`

Or in package.json:

`
"dependencies": {
"ImageViewer": "version"
}
`

Then use it:

`
// ES6 mudule
import ImageViewer from 'ImageViewer';
`

Usage


There are some code from example/src/index.js:

`
let imgsArr = [
'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',
'http://facebook.github.io/react/img/logo_og.png',
'http://scimg.jb51.net/allimg/160815/103-160Q509544OC.jpg'
];

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

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

``

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