{"_id":"react-native-svg-pan-zoom","_rev":"4-db18e3b37e7ef223338b43a7bbe7fae4","name":"react-native-svg-pan-zoom","description":"Pan-zoom for react-native-svg via 'Google Maps'-style pinch and drag gestures","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"react-native-svg-pan-zoom","version":"0.1.0","description":"Pan-zoom for react-native-svg via 'Google Maps'-style pinch and drag gestures","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/garblovians/react-native-svg-pan-zoom.git"},"keywords":["react-native","react","react-native-svg","svg","map","canvas","pinch","zoom","pan","typescript","javascript"],"authors":["Lukas Hedegaard <lxhdgd@gmail.com> (https://github.com/LukasHedegaard)","Søren Peter Andersen (https://github.com/sorenpa)"],"license":"MIT","bugs":{"url":"https://github.com/garblovians/react-native-svg-pan-zoom/issues"},"homepage":"https://github.com/garblovians/react-native-svg-pan-zoom#readme","dependencies":{"@types/react":"^16.0.26","lodash":"^4.17.4","react":"^16.0.0","react-native":"^0.50.0","react-native-svg":"^6.0.0"},"devDependencies":{"@types/lodash":"^4.14.87","typescript":"^2.6.2"},"gitHead":"6c332f67f436022e9d7366e7eda788380e94e8b8","_id":"react-native-svg-pan-zoom@0.1.0","_shasum":"1956bd11c231ea9bb0d04cc9acaead8c4482c5e8","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.12.0","_npmUser":{"name":"lukashedegaard","email":"lxhdgd@gmail.com"},"dist":{"shasum":"1956bd11c231ea9bb0d04cc9acaead8c4482c5e8","tarball":"https://registry.npmjs.org/react-native-svg-pan-zoom/-/react-native-svg-pan-zoom-0.1.0.tgz","integrity":"sha512-tlbRsVSkz/2+9z9wI+bWIsVyMbGmQBnmiuvrzQjHqackvpjdqQjjXVuq7y7tldY9QkJzpHdYI98fOGTqRQo7Mw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuOHBor4xGDdgPCgiu6RhIBLT+H4q+/rPSEbWjLzsbLgIgExTacHial14xg+1xSrZuHdyBdke+e6zTARrX8e71Dz8="}]},"maintainers":[{"name":"lukashedegaard","email":"lxhdgd@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-pan-zoom-0.1.0.tgz_1512394940434_0.12526358431205153"}},"0.1.1":{"name":"react-native-svg-pan-zoom","version":"0.1.1","description":"Pan-zoom for react-native-svg via 'Google Maps'-style pinch and drag gestures","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/garblovians/react-native-svg-pan-zoom.git"},"keywords":["react-native","react","react-native-svg","svg","map","canvas","pinch","zoom","pan","typescript","javascript"],"authors":["Lukas Hedegaard <lxhdgd@gmail.com> (https://github.com/LukasHedegaard)","Søren Peter Andersen (https://github.com/sorenpa)"],"license":"MIT","bugs":{"url":"https://github.com/garblovians/react-native-svg-pan-zoom/issues"},"homepage":"https://github.com/garblovians/react-native-svg-pan-zoom#readme","devDependencies":{"@types/react":"^16.0.27","react":"^16.2.0","react-native":"^0.50.0","react-native-svg":"^6.0.0","typescript":"^2.6.2"},"dependencies":{},"gitHead":"1a23bfef2544f03d3a0bbd2d96f57d41417afef0","_id":"react-native-svg-pan-zoom@0.1.1","_shasum":"b333aa72fdaa6d91cb49aa2625851c2ba97f6cd4","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.12.0","_npmUser":{"name":"lukashedegaard","email":"lxhdgd@gmail.com"},"dist":{"shasum":"b333aa72fdaa6d91cb49aa2625851c2ba97f6cd4","tarball":"https://registry.npmjs.org/react-native-svg-pan-zoom/-/react-native-svg-pan-zoom-0.1.1.tgz","integrity":"sha512-WDliX6PREOiIsBQm+ulFgJ+ktSHNvLosn159rHjPEbVLf2m7Esw//4sH7A9BcNirHP0aWxlXyMAQIMYft/qixA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDcEjoUEUuLVy12kpPDtalXR35cEtz8ixFSqgw7Li2QwIhAI2JU6gyRsy4zWdWLW8Gfg4iFX6LD7BNaJrESNQhFqLF"}]},"maintainers":[{"name":"lukashedegaard","email":"lxhdgd@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-pan-zoom-0.1.1.tgz_1512552343392_0.19998745038174093"}},"0.1.2":{"name":"react-native-svg-pan-zoom","version":"0.1.2","description":"Pan-zoom for react-native-svg via 'Google Maps'-style pinch and drag gestures","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/garblovians/react-native-svg-pan-zoom.git"},"keywords":["react","react-native","react-native-svg","svg","map","canvas","pinch","pan","zoom","typescript","javascript"],"authors":["Lukas Hedegaard <lxhdgd@gmail.com> (https://github.com/LukasHedegaard)","Søren Peter Andersen (https://github.com/sorenpa)"],"license":"MIT","bugs":{"url":"https://github.com/garblovians/react-native-svg-pan-zoom/issues"},"homepage":"https://github.com/garblovians/react-native-svg-pan-zoom#readme","devDependencies":{"@types/react":"^16.0.27","react":"^16.2.0","react-native":"^0.50.0","react-native-svg":"^6.0.0","typescript":"^2.6.2"},"dependencies":{},"gitHead":"874e97ff4f707abbfa64c464fae8c4134c94d032","_id":"react-native-svg-pan-zoom@0.1.2","_shasum":"d86ff1b25e8dabdd75439d77dc55060bb413d9de","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.12.0","_npmUser":{"name":"lukashedegaard","email":"lxhdgd@gmail.com"},"dist":{"shasum":"d86ff1b25e8dabdd75439d77dc55060bb413d9de","tarball":"https://registry.npmjs.org/react-native-svg-pan-zoom/-/react-native-svg-pan-zoom-0.1.2.tgz","integrity":"sha512-tut65E3e/+SQJHaSta5KadUFT22gtwYxGQHNZw7SEFN8LhFDnwOWtUelC8gOi4NAVu9TcgKkPCfwVeQ9pqHniw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDSnm9mu+ewfUlqyGsgoCUJNyEgc5OYjUVfn6h+G4PsqAiEAr/aQxDxyuCvIlIUhOZz+V1JAMbHGXlQhcd9M471lWp8="}]},"maintainers":[{"name":"lukashedegaard","email":"lxhdgd@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg-pan-zoom-0.1.2.tgz_1512654439273_0.21949310041964054"}}},"readme":"# react-native-svg-pan-zoom\nPan-zoom for [react-native-svg](https://github.com/react-native-community/react-native-svg) via \"Google Maps\"-style pinch and drag gestures.\n\n\n## Getting Started\n\n### Installing\n\n```\nnpm install --save react-native-svg-pan-zoom\n```\n\n## Usage\nSimply use SvgPanZoom as a wrapper and begin dropping components. Plain react-native-svg components will not react to clicks per default. To make things clickable, use the react-native PanResponder or wrap them in the included SvgPanZoomElement as shown below\n```js\nimport React, { Component } from 'react';\nimport { Circle } from 'react-native-svg';\nimport SvgPanZoom, { SvgPanZoomElement } from 'react-native-svg-pan-zoom';\n\nclass Example extends Component {\n\n  render() {\n    return (\n      <View style = {{ width: '100%', height:'100%' }}>\n\n        <SvgPanZoom\n          canvasHeight  = {500}\n          canvasWidth   = {500}\n          minScale      = {0.5}\n          initialZoom   = {0.7}\n          onZoom        = {(zoom) => { console.log('onZoom:' + zoom) }}\n          canvasStyle   = {{ backgroundColor: 'yellow' }}\n          viewStyle     = {{ backgroundColor: 'green'  }}\n        >\n\n          {/* Doesn't consume or respond to clicks */}\n          <Circle\n            cx          = {100}\n            cy          = {100}\n            r           = {42} \n            stroke      = \"red\"\n            strokeWidth = \"2.5\"\n            fill        = \"blue\"\n          />\n\n          {/* Responds to clicks */}\n          <SvgPanZoomElement\n            x ={50}\n            y ={50}\n            onClick         = {()=>{ console.log('onClick!') }}\n            onClickCanceled = {()=>{ console.log('onClickCanceled!') }}\n            onClickRelease  = {()=>{ console.log('onClickRelease!') }}\n            onDrag          = {()=>{ console.log('onDrag!') }}\n          >\n            <Circle\n              cx          = {42}\n              cy          = {42}\n              r           = {42} \n              stroke      = \"blue\"\n              strokeWidth = \"2.5\"\n              fill        = \"red\"\n            />\n          </SvgPanZoomElement>\n\n        </SvgPanZoom>\n\n      </View>\n    );\n  }\n}\n```\n\n## Additional notes\nThe drag and zoom gestures are constrained to never leave the SvgPanZoom canvas. It's size as well as scaling constraints can be set through props as shown in the above example.\n\nIt is recommended not to set maxScale above 1 as this results in blurred react-native-svg elements. Instead, increase your SVG element dimensions and set minScale lower.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n","maintainers":[{"name":"lukashedegaard","email":"lxhdgd@gmail.com"}],"time":{"modified":"2022-06-26T07:08:49.335Z","created":"2017-12-04T13:42:21.555Z","0.1.0":"2017-12-04T13:42:21.555Z","0.1.1":"2017-12-06T09:25:44.479Z","0.1.2":"2017-12-07T13:47:20.402Z"},"homepage":"https://github.com/garblovians/react-native-svg-pan-zoom#readme","keywords":["react","react-native","react-native-svg","svg","map","canvas","pinch","pan","zoom","typescript","javascript"],"repository":{"type":"git","url":"git+https://github.com/garblovians/react-native-svg-pan-zoom.git"},"bugs":{"url":"https://github.com/garblovians/react-native-svg-pan-zoom/issues"},"license":"MIT","readmeFilename":"README.md"}