Skip to content

eseQ/react-native-image-viewer

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Show Cases

Swiper image

1.gif

Zoom while sliding

2.gif

Getting Started

Installation

npm i 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 '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

How to build

yarn
npm run tsc

Dependence

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

About

React native image viewer with pan and zoom

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%