react-native-pinch-zoom-layout
Getting started
$ npm install react-native-pinch-zoom-layout --save
Or
$ yarn add react-native-pinch-zoom-layout
Mostly automatic installation
$ react-native link react-native-pinch-zoom-layout
Manual installation
iOS
No action required
Android
- 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 thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-pinch-zoom-layout' project(':react-native-pinch-zoom-layout').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-pinch-zoom-layout/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:implementation project(':react-native-pinch-zoom-layout')
Dependencies
Install and link react-native-gesture-handler. To install and link it, run:
yarn add react-native-gesture-handler
react-native link react-native-gesture-handler
Usage
;;; pinZoomLayoutRef=React; { return<PinchZoomLayout style=flex:1 ref=thispinZoomLayoutRef onZoom=thisonZoom onTap=thisonTap > <Image style=width:56height:56 source= uri:'https://facebook.github.io/react-native/img/header_logo.png' /> </PinchZoomLayout> } { const containerWidth containerHeight contentWidth contentHeight zoomScale }=event; { }}
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