## Show Cases [![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-) > Zoom while sliding ![3.gif](https://cloud.githubusercontent.com/assets/7970947/18501092/87d5efe8-7a80-11e6-9234-516b2be1e729.gif) > Intelligent zoom ![2.gif](https://cloud.githubusercontent.com/assets/7970947/18501091/87b14d8c-7a80-11e6-904d-8c434e1904ce.gif) ## Getting Started ### Installation ```bash npm i react-native-image-pan-zoom --save ``` ### Basic Usage - Install create-react-native-app first ```bash $ npm install -g create-react-native-app ``` - Initialization of a react-native project ```bash $ create-react-native-app AwesomeProject ``` - Then, edit `AwesomeProject/App.js`, like this: ```typescript import { Image, Dimensions } from 'react-native'; import ImageZoom from 'react-native-image-pan-zoom'; export default class App extends React.Component { render: function() { return ( ) } } ``` ### Document | Props | Type | Description | DefaultValue | | --- | --- | --- | --- | | **cropWidth(required)** | number | operating area width | 100 | | **cropHeight(required)** | number | operating area height | 100 | | **imageWidth(required)** | number | picture width | 100 | | **imageHeight(required)** | number | picture height | 100 | | onClick | (eventParams: [IOnClick](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts))=>void | onClick | ()=>{} | | onDoubleClick | (eventParams: [IOnClick](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts))=>void | onDoubleClick | ()=>{} | | panToMove | boolean | allow to move picture with one finger | true | | pinchToZoom | boolean | allow scale with two fingers | true | | clickDistance | number | how many finger movement can also trigger `onClick` | 10 | | horizontalOuterRangeOffset | (offsetX?: number)=>void | horizontal beyond the distance, the parent to do picture switching, you can listen to this function. When this function is triggered, you can do the switch operation | ()=>{} | | onDragLeft | ()=>void | trigger to switch to the left of the graph, the left sliding speed exceeds the threshold when triggered | ()=>{} | | responderRelease | (vx: number)=>void | let go but do not cancel | ()=>{} | | maxOverflow | number | maximum sliding threshold | 100 | | longPressTime | number | long press threshold | 800 | | onLongPress | (eventParams: [IOnClick](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts))=>void | on longPress | ()=> {} | | doubleClickInterval | number | time allocated for second click to be considered as doublClick event | 175 | | onMove | ( position: [IOnMove](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts) )=>void | reports movement position data (helpful to build overlays) | ()=> {} | | centerOn | { x: number, y: number, scale: number, duration: number } | if given this will cause the map to pan and zoom to the desired location | undefined | | enableSwipeDown | boolean | for enabling vertical movement if user doesn't want it | false | | enableCenterFocus | boolean | for disabling focus on image center if user doesn't want it | true | | onSwipeDown | () => void | function that fires when user swipes down | null | | swipeDownThreshold | number | threshold for firing swipe down function | 230 | | minScale | number | minimum zoom scale | 0.6 | | maxScale | number | maximum zoom scale | 10 | | useNativeDriver | boolean | Whether to animate using [`useNativeDriver`](https://reactnative.dev/docs/animations#using-the-native-driver) | false | | onStartShouldSetPanResponder | () => boolean | Override onStartShouldSetPanResponder behavior | () => true | | onMoveShouldSetPanResponder | () => boolean | Override onMoveShouldSetPanResponder behavior | undefined | | onPanResponderTerminationRequest | () => boolean | Override onMoveShouldSetPanResponder behavior | () => false | | useHardwareTextureAndroid | boolean | for disabling rendering to hardware texture on Android | true | | Method | params | Description | | --- | --- | --- | | reset | | Reset the position and the scale of the image | | resetScale | | Reset the scale of the image | | centerOn | ICenterOn | Centers the image in the position indicated. ICenterOn={ x: number, y: number, scale: number, duration: number } | ## Development pattern ### Step 1, run TS listener After clone this repo, then: ```bash npm install npm start ``` ### Step 2, run demo ```bash cd demo npm install npm start ``` Then, scan the QR, use your [expo app](https://expo.io./). ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

_Darius
💻

_{Thomas P.}
💻

_{Juan Di Toro}
💻

_{Alhaytham Elhassan}
💻

_{Alexander Pataridze}
💻

_{Peter Xu}
💻

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

	Stars	Issues	Version	Updated	Created
react-native-image-pan-zoom	632	73	2.1.12	4 years ago	8 years ago
react-native-image-viewing	849	112	0.2.2	2 years ago	4 years ago
react-native-img-cache	729	47	1.6.0	5 years ago	7 years ago

react-native-image-pan-zoom vs react-native-image-viewing vs react-native-img-cache

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past