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

2. 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')
   

3. 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

• enabled
• panEnabled
• zoomDuration
• minimumZoomScale
• maximumZoomScale

Event props

• onZoom
• onTap

Methods

• zoom

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