JSPM – react-native-image-zoom-viewer@2.0.17

Package Exports

react-native-image-zoom-viewer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-image-zoom-viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Show Cases

Swiper image

Zoom while sliding

Getting Started

Installation

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

Basic Usage

Install create-react-native-app first

$ npm install -g create-react-native-app

Initialization of a react-native project

$ create-react-native-app AwesomeProject

Then, edit AwesomeProject/App.js, like this:

import { Modal } from 'react-native';
import ImageViewer from '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'
}]

export default class App extends React.Component {
    render: function() {
        return (
            <Modal visible={true} transparent={true}>
                <ImageViewer imageUrls={images}/>
            </Modal>
        )
    }
}

Document

Development pattern

Step 1, run TS listener

After clone this repo, then:

npm install
npm start

Step 2, run demo

cd demo
npm install
npm start

Then, scan the QR, use your expo app.

Dependence

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