{"_id":"@ayyun/react-native-image-zoom-video-viewer","_rev":"4-1130f2256e39418cf4349bd3ff8e7940","name":"@ayyun/react-native-image-zoom-video-viewer","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@ayyun/react-native-image-zoom-video-viewer","version":"1.0.0","keywords":["image-viewer"],"author":{"name":"ascoders"},"license":"MIT","_id":"@ayyun/react-native-image-zoom-video-viewer@1.0.0","maintainers":[{"name":"ayyun","email":"ayyunmufti@gmail.com"}],"homepage":"https://github.com/ascoders/react-native-image-viewer#readme","bugs":{"url":"https://github.com/ascoders/react-native-image-viewer/issues"},"dist":{"shasum":"ca3e027451088f84a5e91f5a3dd9c2c8d5e2ff60","tarball":"https://registry.npmjs.org/@ayyun/react-native-image-zoom-video-viewer/-/react-native-image-zoom-video-viewer-1.0.0.tgz","fileCount":13,"integrity":"sha512-Hrn2CR7ctrTL2uF7SV1eXlkDUL/y+Zlrlq9eam398QdPQtjnlRL5kXXUA/8F+q00wxSouCcXCp5yRQkAEApV8Q==","signatures":[{"sig":"MEUCIHwBIEDPVrJFMFHdnxTk7wtg+sMdXf63ya6sikeE66UYAiEAgTzI2FvGmwiR+1eLwbw8pueD+T/B/7QBOxpIbuEtwqo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":98612},"main":"built/index.js","types":"built/index.d.ts","gitHead":"f711000709dfeb48608c3286ea05e4e9c26a214d","scripts":{"start":"tsc -w --outDir demo/built","prepare":"rm -rf built"},"_npmUser":{"name":"ayyun","email":"ayyunmufti@gmail.com"},"repository":{"url":"git+https://github.com/ascoders/react-native-image-viewer.git","type":"git"},"_npmVersion":"10.8.3","description":"react native image video viewer","directories":{},"_nodeVersion":"22.9.0","dependencies":{"react-native-image-pan-zoom":"^2.1.12"},"_hasShrinkwrap":false,"devDependencies":{"react":"*","tslint":"^5.8.0","typescript":"^2.9.2","@types/react":"*","react-native":"*","@types/react-native":"*","ascoders-tslint-config":"^1.0.2","tslint-config-prettier":"^1.13.0"},"peerDependencies":{"react":"*","react-native":"*"},"_npmOperationalInternal":{"tmp":"tmp/react-native-image-zoom-video-viewer_1.0.0_1747128389030_0.24738520653113838","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@ayyun/react-native-image-zoom-video-viewer","version":"1.0.2","keywords":["image-viewer"],"author":{"name":"ascoders"},"license":"MIT","_id":"@ayyun/react-native-image-zoom-video-viewer@1.0.2","maintainers":[{"name":"ayyun","email":"ayyunmufti@gmail.com"}],"homepage":"https://github.com/ascoders/react-native-image-viewer#readme","bugs":{"url":"https://github.com/ascoders/react-native-image-viewer/issues"},"dist":{"shasum":"2a806546ec84a755d291f6563eee251bf30b08a1","tarball":"https://registry.npmjs.org/@ayyun/react-native-image-zoom-video-viewer/-/react-native-image-zoom-video-viewer-1.0.2.tgz","fileCount":22,"integrity":"sha512-jgfQmrjafgLoDEYZlpzpZW5rxev1XtNLRAH09ZJFdwkIkcr6aE+AERQUp9Ql/LqRzLL5qtbk7q7tErpdpzfJ0g==","signatures":[{"sig":"MEUCIAFoju+RusCtrxuMxw4g38M7/keLFitCrXZl4MHUEiBaAiEA/kFX3jGymRStffXOewpPOEINMutbaotGaI21ZtlYoZ0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":127343},"main":"built/index.js","types":"built/index.d.ts","gitHead":"f711000709dfeb48608c3286ea05e4e9c26a214d","scripts":{"start":"tsc -w --outDir demo/built","prepare":"rm -rf built && tsc"},"_npmUser":{"name":"ayyun","email":"ayyunmufti@gmail.com"},"repository":{"url":"git+https://github.com/ascoders/react-native-image-viewer.git","type":"git"},"_npmVersion":"10.8.3","description":"react native image video viewer","directories":{},"_nodeVersion":"22.9.0","dependencies":{"react-native-image-pan-zoom":"^2.1.12"},"_hasShrinkwrap":false,"devDependencies":{"react":"*","tslint":"^5.8.0","typescript":"^2.9.2","@types/react":"*","react-native":"*","@types/react-native":"*","ascoders-tslint-config":"^1.0.2","tslint-config-prettier":"^1.13.0"},"peerDependencies":{"react":"*","react-native":"*"},"_npmOperationalInternal":{"tmp":"tmp/react-native-image-zoom-video-viewer_1.0.2_1747130888277_0.6788727653828559","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@ayyun/react-native-image-zoom-video-viewer","version":"1.0.3","keywords":["image-viewer"],"author":{"name":"ascoders"},"license":"MIT","_id":"@ayyun/react-native-image-zoom-video-viewer@1.0.3","maintainers":[{"name":"ayyun","email":"ayyunmufti@gmail.com"}],"homepage":"https://github.com/ascoders/react-native-image-viewer#readme","bugs":{"url":"https://github.com/ascoders/react-native-image-viewer/issues"},"dist":{"shasum":"a9a6fd50e50cc86ba52d0e0f9e07351f61eaecc4","tarball":"https://registry.npmjs.org/@ayyun/react-native-image-zoom-video-viewer/-/react-native-image-zoom-video-viewer-1.0.3.tgz","fileCount":22,"integrity":"sha512-Tm6b400zp+coIEaz2UAd1Yr3y6n+dHtWh+MS0r/gqeHpU0xLtZc2LujRgWf8acciEaatLGtGJcbTzW2BPRbZ5A==","signatures":[{"sig":"MEUCIQCHl9jpUDa7XgmcICdCU3LZ/zD3ayvnBKvRC0fDKBa+nAIgZHcFH0ayG3w7ypGOktEAYLSWc4MNwzxjyhY+K3n9tRk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":127324},"main":"built/index.js","types":"built/index.d.ts","gitHead":"f711000709dfeb48608c3286ea05e4e9c26a214d","scripts":{"start":"tsc -w --outDir demo/built","prepare":"rm -rf built && tsc"},"_npmUser":{"name":"ayyun","email":"ayyunmufti@gmail.com"},"repository":{"url":"git+https://github.com/ascoders/react-native-image-viewer.git","type":"git"},"_npmVersion":"10.8.3","description":"react native image video viewer","directories":{},"_nodeVersion":"22.9.0","dependencies":{"react-native-image-pan-zoom":"^2.1.12"},"_hasShrinkwrap":false,"devDependencies":{"react":"*","tslint":"^5.8.0","typescript":"^2.9.2","@types/react":"*","react-native":"*","@types/react-native":"*","ascoders-tslint-config":"^1.0.2","tslint-config-prettier":"^1.13.0"},"peerDependencies":{"react":"*","react-native":"*"},"_npmOperationalInternal":{"tmp":"tmp/react-native-image-zoom-video-viewer_1.0.3_1747131423704_0.24037057636380976","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@ayyun/react-native-image-zoom-video-viewer","version":"1.0.4","description":"react native image video viewer","main":"built/index.js","types":"built/index.d.ts","scripts":{"prepare":"rm -rf built && tsc","start":"tsc -w --outDir demo/built"},"repository":{"type":"git","url":"git+https://github.com/ascoders/react-native-image-viewer.git"},"keywords":["image-viewer"],"author":{"name":"ascoders"},"license":"MIT","dependencies":{"react-native-image-pan-zoom":"^2.1.12"},"peerDependencies":{"react":"*","react-native":"*"},"devDependencies":{"@types/react":"*","@types/react-native":"*","ascoders-tslint-config":"^1.0.2","react":"*","react-native":"*","tslint":"^5.8.0","tslint-config-prettier":"^1.13.0","typescript":"^2.9.2"},"_id":"@ayyun/react-native-image-zoom-video-viewer@1.0.4","gitHead":"f711000709dfeb48608c3286ea05e4e9c26a214d","bugs":{"url":"https://github.com/ascoders/react-native-image-viewer/issues"},"homepage":"https://github.com/ascoders/react-native-image-viewer#readme","_nodeVersion":"22.9.0","_npmVersion":"10.8.3","dist":{"integrity":"sha512-1Dcns7xYjaNXg4OPWGUjdtVuKhGc1DgWXq1QBrUGWyHZZw6l75JT2YIwEHPswFfkVtGjeDg8fW/cHNZWmyU3qw==","shasum":"5c4e59eff02acedac87e9afdfea9e268d1bfe875","tarball":"https://registry.npmjs.org/@ayyun/react-native-image-zoom-video-viewer/-/react-native-image-zoom-video-viewer-1.0.4.tgz","fileCount":22,"unpackedSize":127309,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHhmkZAGDzRonBzY7apdw1vVC8nZzECS8hBkp//n9SEcAiEA7ZhuuB2ULW3aCPcyOFcFrgj7fPtx2zvD9NgXlw5KM2w="}]},"_npmUser":{"name":"ayyun","email":"ayyunmufti@gmail.com"},"directories":{},"maintainers":[{"name":"ayyun","email":"ayyunmufti@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-image-zoom-video-viewer_1.0.4_1747132210000_0.6936742472389128"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-13T09:26:28.963Z","modified":"2025-05-13T10:30:10.374Z","1.0.0":"2025-05-13T09:26:29.190Z","1.0.2":"2025-05-13T10:08:08.457Z","1.0.3":"2025-05-13T10:17:03.928Z","1.0.4":"2025-05-13T10:30:10.200Z"},"bugs":{"url":"https://github.com/ascoders/react-native-image-viewer/issues"},"author":{"name":"ascoders"},"license":"MIT","homepage":"https://github.com/ascoders/react-native-image-viewer#readme","keywords":["image-viewer"],"repository":{"type":"git","url":"git+https://github.com/ascoders/react-native-image-viewer.git"},"description":"react native image video viewer","maintainers":[{"name":"ayyun","email":"ayyunmufti@gmail.com"}],"readme":"## Show Cases\n\n**Swiper image**\n\n![](https://cloud.githubusercontent.com/assets/7970947/21086300/388dedfc-c056-11e6-955e-0a2a0b541f7f.gif)\n\n**Zoom while sliding**\n\n![](https://cloud.githubusercontent.com/assets/7970947/21086323/7355face-c056-11e6-8d68-384000d41d47.gif)\n\n**Swipe down**\n\n![](https://user-images.githubusercontent.com/7970947/37651584-8b642458-2c73-11e8-9ecc-ef7c72aca1be.gif)\n\n## Getting Started\n\n### Installation\n\n```bash\nnpm i @ayyun/react-native-image-zoom-video-viewer --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 { Modal } from 'react-native';\nimport ImageViewer from '@ayyun/react-native-image-zoom-video-viewer';\nimport Video from 'react-native-video';\nconst images = [{\n    // Simplest usage.\n    url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',\n\n    // width: number\n    // height: number\n    // Optional, if you know the image size, you can set the optimization performance\n\n    // You can pass props to <Image />.\n    props: {\n        // headers: ...\n    }\n}, {\n    url: '',\n    props: {\n        // Or you can set source directory.\n        source: require('../background.png')\n    }\n}]\n\nconst App = () => {\n  return (\n    <Modal visible={true} transparent={true}>\n      <ImageViewer imageUrls={images} renderVideo={() => <Video />} />\n    </Modal>\n  );\n};\n```\n\n### Props\n\n| parameter              | type                                                                                   | required | description                                                                                                                                                                                                                          | default                                                   |\n| :--------------------- | :------------------------------------------------------------------------------------- | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------- |\n| imageUrls              | array                                                                                  | yes      | Image Source                                                                                                                                                                                                                         |                                                           |\n| enableImageZoom        | boolean                                                                                | no       | Enable image zoom                                                                                                                                                                                                                    | `true`                                                    |\n| onShowModal            | function<br><br>`(content?: JSX.Element) => void`                                      | no       | The callback for show modal                                                                                                                                                                                                          | `() => {}`                                                |\n| onCancel               | function<br><br>`() => void`                                                           | no       | The callback for cancel modal                                                                                                                                                                                                        | `() => {}`                                                |\n| flipThreshold          | number                                                                                 | no       | Swipe threshold of the next page                                                                                                                                                                                                     | `80`                                                      |\n| maxOverflow            | number                                                                                 | no       | The X position maximum, that current page can slide to the next page                                                                                                                                                                 | `300`                                                     |\n| index                  | number                                                                                 | no       | Init index of images                                                                                                                                                                                                                 | `0`                                                       |\n| failImageSource        | string, object<br><br>`{url: string}`                                                  | no       | placeholder for fail                                                                                                                                                                                                                 | `''`                                                      |\n| loadingRender          | function<br><br>`() => React.ReactElement<any>`                                        | no       | placeholder for loading                                                                                                                                                                                                              | `() => null`                                              |\n| onSaveToCamera         | function<br><br>`(index?: number => void`                                              | no       | The callback for save to camera                                                                                                                                                                                                      | `() => {}`                                                |\n| onChange               | function<br><br>`(index?: number => void`                                              | no       | When the image changed                                                                                                                                                                                                               | `() => {}`                                                |\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| saveToLocalByLongPress | boolean                                                                                | no       | Enable save to camera when long press                                                                                                                                                                                                | `true`                                                    |\n| onClick                | function<br><br>`(onCancel?: function) => void`                                        | no       | Onclick                                                                                                                                                                                                                              | `(onCancel) => {onCancel()}`                              |\n| onDoubleClick          | function<br><br>`(onCancel?: function) => void`                                        | no       | OnDoubleClick                                                                                                                                                                                                                        | `(onCancel) => {onCancel()}`                              |\n| onSave                 | function<br><br>`(url: string) => void`                                                | no       | The picture is saved to the local method, if you write this method will not call the system default method for Android does not support saveToCameraRoll remote picture, you can call this callback in Android call native interface |                                                           |\n| renderHeader           | function<br><br>`(currentIndex?: number) => React.ReactElement<any>`                   | no       | Custom header                                                                                                                                                                                                                        | `() => null`                                              |\n| renderFooter           | function<br><br>`(currentIndex?: number) => React.ReactElement<any>`                   | no       | Custom footer                                                                                                                                                                                                                        | `() => null`                                              |\n| renderIndicator        | function<br><br>`(currentIndex?: number, allSize?) => React.ReactElement<any>`: number | no       | Custom indicator                                                                                                                                                                                                                     | `(currentIndex, allSize) => currentIndex + \"/\" + allSize` |\n| renderImage            | function<br><br>`(props: any) => React.ReactElement<any>`                              | no       | Custom image component                                                                                                                                    \n| renderVideo            | function<br><br>`(props: any) => React.ReactElement<any>`                              | yes       | Custom Video component                                                                                                                                                                                                              | `(props) => <Video  />`                         |\n| renderArrowLeft        | function<br><br>`() => React.ReactElement<any>`                                        | no       | Custom left arrow                                                                                                                                                                                                                    | `() => null`                                              |\n| renderArrowRight       | function<br><br>`() => React.ReactElement<any>`                                        | no       | Custom right arrow                                                                                                                                                                                                                   | `() => null`                                              |\n| onSwipeDown            | function<br><br>`() => void`                                                           | no       | Callback for swipe down                                                                                                                                                                                                              | `() => null`                                              |\n| footerContainerStyle   | object<br><br>`{someStyle: someValue}`                                                 | no       | custom style props for container that will be holding your footer that you pass                                                                                                                                                      | `bottom: 0, position: \"absolute\", zIndex: 9999`           |\n| backgroundColor        | string<br><br>`white`                                                                  | no       | Component background color                                                                                                                                                                                                           | `black`                                                   |\n| enableSwipeDown        | boolean                                                                                | no       | Enable swipe down to close image viewer. When swipe down, will trigger onCancel.                                                                                                                                                     | `false`                                                   |\n| swipeDownThreshold     | number                                                                                 | no       | Threshold for firing swipe down function                                                                                                                                                                                             |                                                           |\n| doubleClickInterval    | number                                                                                 | no       | Double click interval.                                                                                                                                                                                                               |                                                           |\n| pageAnimateTime        | number                                                                                 | no       | Set the animation time for page flipping.                                                                                                                                                                                            | `100`                                                     |\n| enablePreload          | boolean                                                                                | no       | Preload the next image                                                                                                                                                                                                               | `false`                                                   |\n| useNativeDriver        | boolean                                                                                | no       | Whether to animate using [`useNativeDriver`](https://reactnative.dev/docs/animations#using-the-native-driver)                                                                                                                        | `false`                                                   |\n| menus                  | function<br><br>`({cancel,saveToLocal}) => React.ReactElement<any>`                    | no       | Custom menus, with 2 methods:`cancel` to hide menus and `saveToLocal` to save image to camera\n| menuContext            | object<br><br>`{someKey: someValue}`                                                   | no       | Custom menu context.                              | `{ saveToLocal: 'save to the album', cancel: 'cancel' }`\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\n### Dependence\n\nDepend on `react-native-image-pan-zoom`\n","readmeFilename":"README.md"}