{"_id":"@daroldso/react-native-image-pan-zoom","_rev":"1-b085e686884066e297b55d594652d1e1","name":"@daroldso/react-native-image-pan-zoom","dist-tags":{"latest":"2.1.14"},"versions":{"2.1.14":{"name":"@daroldso/react-native-image-pan-zoom","version":"2.1.14","description":"react native image pan zoom","main":"built/index.js","types":"built/index.d.ts","scripts":{"prepare":"trash built && tsc","start":"tsc -w --outDir demo/built"},"repository":{"type":"git","url":"git+https://github.com/daroldso/react-native-image-zoom.git"},"keywords":["image-zoom"],"author":{"name":"kingdaro"},"license":"ISC","peerDependencies":{"react":"*","react-native":"*"},"devDependencies":{"@types/react":"*","@types/react-native":"*","ascoders-tslint-config":"^1.0.2","react":"*","react-native":"*","trash-cli":"^3.0.0","tslint":"^5.8.0","tslint-config-prettier":"^1.13.0","typescript":"^2.9.2"},"bugs":{"url":"https://github.com/daroldso/react-native-image-zoom/issues"},"homepage":"https://github.com/daroldso/react-native-image-zoom#readme","dependencies":{},"gitHead":"12eb18bd56c6f0a0c07b42b5e1b7734fc359362e","_id":"@daroldso/react-native-image-pan-zoom@2.1.14","_nodeVersion":"10.16.3","_npmVersion":"6.11.3","dist":{"integrity":"sha512-aH5NTbYZs1GGOj/bcLv3X0bzmA4NMUXwl1Z4zLd+AqoGPoMyqO8thcXnJSz6FbbGVyh1EtGjlh5Hjk37s0PgIw==","shasum":"c3a979bfa3d92136dc3bd21c97d7b58f7dc239a1","tarball":"https://registry.npmjs.org/@daroldso/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.14.tgz","fileCount":22,"unpackedSize":100509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6InoCRA9TVsSAnZWagAASw8P/ilclZOMdBB0nlOo8LO9\n1a1IH0ggcmHzcp9LMk4vE77XpgXZNdOJjdkI1a73eB3v96qgcvt3/f9elb5T\n8aiT3LiYkxVCRu5in1Qjks5W0BhDNS+Qr1B3u/iANFwt7CeyyXNwsOoQbcDX\nnDmPr3bl74fCrIL3xAyD3Cj2Bfp7c0FudeddeFfWkVPVxfBXLPtWVWxaiZbW\nmiNoEnQy8FyiIE1hJs46WgS0Cng12uFVvMhiLwo5PhiPUkulHC1mC+wTuYWg\n29uS2yFizalxq608+x7fF24rJVzqYNMQlxainxMKBm5vkSqswoOd2MSftwc2\nkqqZjefVCYBqPKUlHAIxEEZLm95ElcZhPwQbOzZnjB3bXe9CcSUVgT0Z4OFP\n81zXHHiFaBinCaVwPyidZThQ2vks2CT7AJVlD4/iA0RIlro2epi0WzWaUH/o\nrYHH7pvkeJrGLwxn0hrE3JB3eR7TIcF9knXb08uO7wkabVLCuBb2sVRE4Wod\nFEbdTrI5sF9DW2fYPGhqSWYyYjq92cMk8c22Pw6isfWjOJZzn3yPqV9X4kvr\nstjmtVQc46sDPzx6Gfy+vlsN6AhVVo2/DPcYnzAeAMTlQFPc0e+tGBiTksXi\nRQuatm/RiIgdhkcigOTKtDdJdcpkypahUsh1mblpvXXBMGgGm3WVgd8ucIpD\nv8rV\r\n=edAn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyW80xjIpwXoxlr5sxQlrIr2d39JlWyEftAKAuGEmllAIhAKM07MIZDJGJpMZIpK2Dv6C380x2vLbVuK4t+a1KdCLV"}]},"maintainers":[{"name":"daroldso","email":"daroldso@gmail.com"}],"_npmUser":{"name":"daroldso","email":"daroldso@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-image-pan-zoom_2.1.14_1575520743616_0.4994020730052189"},"_hasShrinkwrap":false}},"time":{"created":"2019-12-05T04:39:03.589Z","2.1.14":"2019-12-05T04:39:03.753Z","modified":"2022-04-05T02:45:48.798Z"},"maintainers":[{"name":"daroldso","email":"daroldso@gmail.com"}],"description":"react native image pan zoom","homepage":"https://github.com/daroldso/react-native-image-zoom#readme","keywords":["image-zoom"],"repository":{"type":"git","url":"git+https://github.com/daroldso/react-native-image-zoom.git"},"author":{"name":"kingdaro"},"bugs":{"url":"https://github.com/daroldso/react-native-image-zoom/issues"},"license":"ISC","readme":"## Show Cases\n\n> Zoom while sliding\n\n![3.gif](https://cloud.githubusercontent.com/assets/7970947/18501092/87d5efe8-7a80-11e6-9234-516b2be1e729.gif)\n\n> Intelligent zoom\n\n![2.gif](https://cloud.githubusercontent.com/assets/7970947/18501091/87b14d8c-7a80-11e6-904d-8c434e1904ce.gif)\n\n## Getting Started\n\n### Installation\n\n```bash\nnpm i react-native-image-pan-zoom --save\n```\n\n### Basic Usage\n\n- Install create-react-native-app first\n\n```bash\n$ npm install -g create-react-native-app\n```\n\n- Initialization of a react-native project\n\n```bash\n$ create-react-native-app AwesomeProject\n```\n\n- Then, edit `AwesomeProject/App.js`, like this:\n\n```typescript\nimport { Image, Dimensions } from 'react-native';\nimport ImageZoom from 'react-native-image-pan-zoom';\n\nexport default class App extends React.Component {\n    render: function() {\n        return (\n            <ImageZoom cropWidth={Dimensions.get('window').width}\n                       cropHeight={Dimensions.get('window').height}\n                       imageWidth={200}\n                       imageHeight={200}>\n                <Image style={{width:200, height:200}}\n                       source={{uri:'http://v1.qzone.cc/avatar/201407/07/00/24/53b9782c444ca987.jpg!200x200.jpg'}}/>\n            </ImageZoom>\n        )\n    }\n}\n```\n\n### Document\n\n| Props | Type | Description | DefaultValue |\n| --- | --- | --- | --- |\n| **cropWidth(required)** | number | operating area width | 100 |\n| **cropHeight(required)** | number | operating area height | 100 |\n| **imageWidth(required)** | number | picture width | 100 |\n| **imageHeight(required)** | number | picture height | 100 |\n| onClick | (eventParams: [IOnClick](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts))=>void | onClick | ()=>{} |\n| panToMove | boolean | allow to move picture with one finger | true |\n| pinchToZoom | boolean | allow scale with two fingers | true |\n| clickDistance | number | how many finger movement can also trigger `onClick` | 10 |\n| 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 | ()=>{} |\n| onDragLeft | ()=>void | trigger to switch to the left of the graph, the left sliding speed exceeds the threshold when triggered | ()=>{} |\n| responderRelease | (vx: number)=>void | let go but do not cancel | ()=>{} |\n| maxOverflow | number | maximum sliding threshold | 100 |\n| longPressTime | number | long press threshold | 800 |\n| onLongPress | ()=>void | on longPress | ()=> {} |\n| doubleClickInterval | number | time allocated for second click to be considered as doublClick event | 175 |\n| 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) | ()=> {} |\n| 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 |\n| enableSwipeDown | boolean | for enabling vertical movement if user doesn't want it | false |  | false |\n| enableCenterFocus | boolean | for disabling focus on image center if user doesn't want it | true |\n| onSwipeDown | () => void | function that fires when user swipes down | null |\n| swipeDownThreshold | number | threshold for firing swipe down function | 230 |\n| minScale | number | minimum zoom scale | 0.6 |\n| maxScale | number | maximum zoom scale | 10 |\n| onStartShouldSetPanResponder | () => boolean | Override onStartShouldSetPanResponder behavior | () => true |\n| onMoveShouldSetPanResponder | () => boolean | Override onMoveShouldSetPanResponder behavior | undefined |\n| onPanResponderTerminationRequest | () => boolean | Override onMoveShouldSetPanResponder behavior | () => false |\n\n| Method | params | Description |\n| --- | --- | --- |\n| reset |  | Reset the position and the scale of the image |\n| resetScale |  | Reset the scale of the image |\n| centerOn | ICenterOn | Centers the image in the position indicated. ICenterOn={ x: number, y: number, scale: number, duration: number } |\n\n## Development pattern\n\n### Step 1, run TS listener\n\nAfter clone this repo, then:\n\n```bash\nnpm install\nnpm start\n```\n\n### Step 2, run demo\n\n```bash\ncd demo\nnpm install\nnpm start\n```\n\nThen, scan the QR, use your [expo app](https://expo.io./).\n","readmeFilename":"readme.md"}