seer-react-native-image-zoom-viewer
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    fork from react-native-image-zoom-viewer

    Show Cases

    Swiper image

    1.gif

    Zoom while sliding

    2.gif

    Getting Started

    Installation

    npm i seer-react-native-image-zoom-viewer --save

    Basic Usage

    • Install react-native first
    $ npm i react-native -g
    • Initialization of a react-native project
    $ react-native init myproject
    • Then, edit myproject/index.ios.js, like this:
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      Modal
    } from 'react-native';
     
    import ImageViewer from 'seer-react-native-image-zoom-viewer';
     
    const images = [{
        url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460'
    }, {
        url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460'
    }, {
        url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460'
    }]
     
    class ImageViewer extends React.Component {
        render: function() {
            return (
                <Modal visible={true} transparent={true}>
                    <ImageViewer imageUrls={images}/>
                </Modal>
            )
        }
    }
     
    AppRegistry.registerComponent('myproject', () => ImageViewer);

    Document

    image

    Dependence

    Depend on react-native-image-pan-zoom: https://github.com/ascoders/react-native-image-zoom

    Keywords

    Install

    npm i seer-react-native-image-zoom-viewer

    DownloadsWeekly Downloads

    6

    Version

    2.0.0

    License

    ISC

    Last publish

    Collaborators

    • michaelxu