markdown-body entry-content container-lg" itemprop="text">

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:

gif: http://onasvjoyz.bkt.clouddn.com/viewer-ios.gif

On Android:

gif: http://onasvjoyz.bkt.clouddn.com/viewer-android.gif

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

License

dwqs/react-native-image-viewer

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 3

Uh oh!

Languages

Error
Looks like something went wrong!

Packages