Skip to content

Latest commit

 

History

History
156 lines (119 loc) · 3.8 KB

README.md

File metadata and controls

156 lines (119 loc) · 3.8 KB
Raw

react-native-pinch-zoom-image

Getting started

This module is based on react-native-photo-view. It seems "dead" adn we make some modifications to solve some problems

$ npm install react-native-pinch-zoom-image --save

Or

$ yarn add react-native-pinch-zoom-image

Mostly automatic installation

$ react-native link react-native-pinch-zoom-image

Manual installation

iOS

  1. Add this line to your podfile pod RNPinchZoomImage, path: ../node_modules/react-native-pinch-zoom-image
  2. Run pod install

Android

  1. Open up android/app/src/main/java/[...]/MainActivity.java
  • Add import info.moonjava.RNPinchZoomLayoutPackage; to the imports at the top of the file
  • Add new RNPinchZoomLayoutPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle: 
    include ':react-native-pinch-zoom-image'
project(':react-native-pinch-zoom-image').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-pinch-zoom-image/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle: 
      implementation project(':react-native-pinch-zoom-image')

Dependencies

Install and link react-native-fast-image. To install and link it, run:

yarn add react-native-fast-image
react-native link react-native-fast-image

Usage

import React,{Component} from 'react';
import PinchZoomImage from 'react-native-pinch-zoom-image';
import {
    Image
} from 'react-native';

export default class ImageViewer extends Component {
    pinZoomLayoutRef=React.createRef();
    render() {
       return(<PinchZoomImage
                          style={{flex:1}}
                          ref={this.pinZoomLayoutRef}
                          onZoom={this.onZoom}
                          onTap={this.onTap}
                      >
                          <Image
                                style={{width:56,height:56}}
                                source={{
                                  uri:'https://facebook.github.io/react-native/img/header_logo.png'
                              }}
                          />
                      </PinchZoomImage>)
    }
    
    onZoom=event=>{
        const {
            containerWidth,
            containerHeight,
            contentWidth,
            contentHeight,
            zoomScale
        }=event;
    }
    
    onTap=()=>{
        
    }
}

Configurable props

Event props

Methods

Configurable props

enabled

Indicates whether the layout allows zoom.

  • true (default) - allow zoom
  • false - Disable zoom

panEnabled

Indicates whether the layout can pan when the zoomed content is bigger than the container.

  • true (default) - Allow pan
  • false - Disable pan

zoomDuration

Animation duration of zoom.

  • default - 400 Platforms: Android

minimumZoomScale

The minimum zoom level.

  • default - 1

maximumZoomScale

The maximum zoom level.

  • default - 3

onZoom

Callback function that is called when the view is zoomed. The event params is

const { 
  containerWidth,
  containerHeight,
  contentWidth,
  contentHeight,
  zoomScale
} = event;

onTap

Callback function that is called when the view is taped

zoom()

zoom({zoomScale, animated})

Zoom the content view to specific value.

Example:

this.pinZoomLayoutRef.current.zoom({zoomScale:2.5, animated:true}); // Zoom content view to 2.5 with animation