@dwqs/react-native-image-viewer v2.0.0

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 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

Feature

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

License

MIT