@dwqs/react-native-image-viewer

    2.0.0 • Public • Published

    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

    Install

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

    DownloadsWeekly Downloads

    197

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    36.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • dwqs