ImageViewer

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:

On 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
    })
}

<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