Skip to content

eseQ/react-native-image-zoom

 
 

Repository files navigation

Show Cases

Zoom while sliding

3.gif

Intelligent zoom

2.gif

Getting Started

Installation

npm i react-native-image-pan-zoom --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 ImageZoom from 'react-native-image-pan-zoom';

class ImageZoom extends React.Component {
    render: function() {
        return (
            <ImageZoom cropWidth={Dimensions.get('window').width}
                       cropHeight={Dimensions.get('window').height}
                       imageWidth={200}
                       imageHeight={200}>
                <Image style={{width:200, height:200}}
                       source={{uri:'http://v1.qzone.cc/avatar/201407/07/00/24/53b9782c444ca987.jpg!200x200.jpg'}}/>
            </ImageZoom>
        )
    }
}

AppRegistry.registerComponent('myproject', () => ImageZoom);

Document

image

About

react native image pan and zoom

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%