{"_id":"@dreamwalk-os/react-native-image-modal","_rev":"6-30eea73b14af58562dd1008b4bfcbe10","name":"@dreamwalk-os/react-native-image-modal","dist-tags":{"latest":"2.2.1"},"versions":{"2.1.2":{"name":"@dreamwalk-os/react-native-image-modal","version":"2.1.2","keywords":["react-native","react-component","react-native-component","react","ios","android","ui","imagebox","image","gallery"],"author":{"name":"dev-yakuza","email":"dev.yakuza@gmail.com"},"license":"MIT","_id":"@dreamwalk-os/react-native-image-modal@2.1.2","maintainers":[{"name":"paolobenini","email":"paolo@dreamwalk.com.au"},{"name":"jmargenberg","email":"jdm0096@gmail.com"},{"name":"dreamwalk-apps-admin","email":"operations@dreamwalk.com.au"},{"name":"dreamwalk","email":"systems@dreamwalk.com.au"},{"name":"brycepavey","email":"bryce@dreamwalk.com.au"}],"homepage":"https://github.com/dreamwalk-os/react-native-image-modal#readme","bugs":{"url":"https://github.com/dreamwalk-os/react-native-image-modal/issues"},"dist":{"shasum":"4b3b0269f8137941dda7a818739f030db52a6b78","tarball":"https://registry.npmjs.org/@dreamwalk-os/react-native-image-modal/-/react-native-image-modal-2.1.2.tgz","fileCount":23,"integrity":"sha512-O9Tlys3yxfvLotMycvzgY+IPKd0tAEsA8/6Moeg/SLwKxfkW+FoUxAed6ag1labwQmY4+olZ8gtOZpIVa4n+8A==","signatures":[{"sig":"MEUCIH8baMisXRSmVaz9KV5WKla8t/QQiUL5aF9Ex/+h5yaBAiEAzLYK9VnkGSi4wdb+X7iwmVvn8BOHYs7s0V3lPCLlrJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113810},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"f8950c7bae809ab8c60f4fe7b31cacf76c1f74c7","scripts":{"lint":"eslint --ext .tsx --ext .ts src/","start":"rm -rf Develop/dist && tsc -w --outDir Develop/dist","format":"prettier --check ./src","prepare":"rm -rf dist && tsc"},"_npmUser":{"name":"brycepavey","email":"bryce@dreamwalk.com.au"},"repository":{"url":"git+https://github.com/dreamwalk-os/react-native-image-modal.git","type":"git"},"_npmVersion":"8.1.0","description":"image fullscreen modal for react native","directories":{},"_nodeVersion":"16.13.0","_hasShrinkwrap":false,"devDependencies":{"eslint":"7.9.0","prettier":"2.6.2","typescript":"4.6.4","@types/react":"18.0.9","@arkweid/lefthook":"^0.7.7","@types/react-native":"0.67.7","eslint-plugin-react":"7.29.4","eslint-plugin-prettier":"3.4.1","@typescript-eslint/parser":"4.33.0","eslint-plugin-react-hooks":"4.5.0","@typescript-eslint/eslint-plugin":"4.33.0"},"peerDependencies":{"react":"17.0.2","react-native":"0.68.1","react-native-fast-image":"8.5.11"},"_npmOperationalInternal":{"tmp":"tmp/react-native-image-modal_2.1.2_1686705187755_0.2372502506988563","host":"s3://npm-registry-packages"}},"2.1.3":{"name":"@dreamwalk-os/react-native-image-modal","version":"2.1.3","keywords":["react-native","react-component","react-native-component","react","ios","android","ui","imagebox","image","gallery"],"author":{"name":"dev-yakuza","email":"dev.yakuza@gmail.com"},"license":"MIT","_id":"@dreamwalk-os/react-native-image-modal@2.1.3","maintainers":[{"name":"paolobenini","email":"paolo@dreamwalk.com.au"},{"name":"jmargenberg","email":"jdm0096@gmail.com"},{"name":"dreamwalk-apps-admin","email":"operations@dreamwalk.com.au"},{"name":"dreamwalk","email":"systems@dreamwalk.com.au"},{"name":"brycepavey","email":"bryce@dreamwalk.com.au"}],"homepage":"https://github.com/dreamwalk-os/react-native-image-modal#readme","bugs":{"url":"https://github.com/dreamwalk-os/react-native-image-modal/issues"},"dist":{"shasum":"45f87ffd9f47d9a4ec63d1a00d4bf36151bb9410","tarball":"https://registry.npmjs.org/@dreamwalk-os/react-native-image-modal/-/react-native-image-modal-2.1.3.tgz","fileCount":23,"integrity":"sha512-/4N2I+mPPeRmqkMN4Ep76QUqEIKh9FbqANbzSRvvdMqJk7Axw0DcLwzwS19sCpQgCfaIWVfZmkg/kvEo9zSJBQ==","signatures":[{"sig":"MEUCIQD7Md91l040Ir3L7hkO+mfYWWHag2VZxu5Y6tfdSYzVuQIgR0Es5qx6HCxhrwJPDdAT/1QPH6ywhrbr2HBTzziefmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113810},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"a428bd5b9e2eac8bf853efa90f8c8e2053a86ac0","scripts":{"lint":"eslint --ext .tsx --ext .ts src/","start":"rm -rf Develop/dist && tsc -w --outDir Develop/dist","format":"prettier --check ./src","prepare":"rm -rf dist && tsc"},"_npmUser":{"name":"brycepavey","email":"bryce@dreamwalk.com.au"},"repository":{"url":"git+https://github.com/dreamwalk-os/react-native-image-modal.git","type":"git"},"_npmVersion":"8.1.0","description":"image fullscreen modal for react native","directories":{},"_nodeVersion":"16.13.0","_hasShrinkwrap":false,"devDependencies":{"eslint":"7.9.0","prettier":"2.6.2","typescript":"4.6.4","@types/react":"18.0.9","@arkweid/lefthook":"^0.7.7","@types/react-native":"0.67.7","eslint-plugin-react":"7.29.4","eslint-plugin-prettier":"3.4.1","@typescript-eslint/parser":"4.33.0","eslint-plugin-react-hooks":"4.5.0","@typescript-eslint/eslint-plugin":"4.33.0"},"peerDependencies":{"react":"17.0.2","react-native":"0.68.1","react-native-fast-image":"8.5.11"},"_npmOperationalInternal":{"tmp":"tmp/react-native-image-modal_2.1.3_1686706521432_0.3687664327012259","host":"s3://npm-registry-packages"}},"2.1.4":{"name":"@dreamwalk-os/react-native-image-modal","version":"2.1.4","keywords":["react-native","react-component","react-native-component","react","ios","android","ui","imagebox","image","gallery"],"author":{"name":"dev-yakuza","email":"dev.yakuza@gmail.com"},"license":"MIT","_id":"@dreamwalk-os/react-native-image-modal@2.1.4","maintainers":[{"name":"paolobenini","email":"paolo@dreamwalk.com.au"},{"name":"jmargenberg","email":"jdm0096@gmail.com"},{"name":"dreamwalk-apps-admin","email":"operations@dreamwalk.com.au"},{"name":"dreamwalk","email":"systems@dreamwalk.com.au"},{"name":"brycepavey","email":"bryce@dreamwalk.com.au"}],"homepage":"https://github.com/dreamwalk-os/react-native-image-modal#readme","bugs":{"url":"https://github.com/dreamwalk-os/react-native-image-modal/issues"},"dist":{"shasum":"b5f462dd85d11e997184e609bb5eda60a798f8db","tarball":"https://registry.npmjs.org/@dreamwalk-os/react-native-image-modal/-/react-native-image-modal-2.1.4.tgz","fileCount":23,"integrity":"sha512-ZbO9L1jyKnTv+n/1D3TFXueFNaX5XiA6pLh9CDBUTEJVSwcwGQW7ks08Q+J7rJ0xkGppDZa2n1T6raDowijTCw==","signatures":[{"sig":"MEUCIGPDd8dv/zO0u5leEZ/pTSHspBXGw8P284UqiQ1pzDYgAiEA2yF8yF1fAjalDtA/vckTN+57Nc2cNbrPSNG0r6Yb9II=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":114259},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"90f4d46326b7d91a15d50b130a9f9b80f583d360","scripts":{"lint":"eslint --ext .tsx --ext .ts src/","start":"rm -rf Develop/dist && tsc -w --outDir Develop/dist","format":"prettier --check ./src","prepare":"rm -rf dist && tsc"},"_npmUser":{"name":"brycepavey","email":"bryce@dreamwalk.com.au"},"repository":{"url":"git+https://github.com/dreamwalk-os/react-native-image-modal.git","type":"git"},"_npmVersion":"8.1.0","description":"image fullscreen modal for react native","directories":{},"_nodeVersion":"16.13.0","_hasShrinkwrap":false,"devDependencies":{"eslint":"7.9.0","prettier":"2.6.2","typescript":"4.6.4","@types/react":"18.0.9","@arkweid/lefthook":"^0.7.7","@types/react-native":"0.67.7","eslint-plugin-react":"7.29.4","eslint-plugin-prettier":"3.4.1","@typescript-eslint/parser":"4.33.0","eslint-plugin-react-hooks":"4.5.0","@typescript-eslint/eslint-plugin":"4.33.0"},"peerDependencies":{"react":"17.0.2","react-native":"0.68.1","react-native-fast-image":"8.5.11"},"_npmOperationalInternal":{"tmp":"tmp/react-native-image-modal_2.1.4_1686716073087_0.5499482135154392","host":"s3://npm-registry-packages"}},"2.2.0":{"name":"@dreamwalk-os/react-native-image-modal","version":"2.2.0","keywords":["react-native","react-component","react-native-component","react","ios","android","ui","imagebox","image","gallery"],"author":{"name":"dev-yakuza","email":"dev.yakuza@gmail.com"},"license":"MIT","_id":"@dreamwalk-os/react-native-image-modal@2.2.0","maintainers":[{"name":"paolobenini","email":"paolo@dreamwalk.com.au"},{"name":"jmargenberg","email":"jdm0096@gmail.com"},{"name":"dreamwalk-apps-admin","email":"operations@dreamwalk.com.au"},{"name":"dreamwalk","email":"systems@dreamwalk.com.au"},{"name":"brycepavey","email":"bryce@dreamwalk.com.au"}],"homepage":"https://github.com/dreamwalk-os/react-native-image-modal#readme","bugs":{"url":"https://github.com/dreamwalk-os/react-native-image-modal/issues"},"dist":{"shasum":"eee0d764d45aedbade0b8af43bf594d19b7b8ad0","tarball":"https://registry.npmjs.org/@dreamwalk-os/react-native-image-modal/-/react-native-image-modal-2.2.0.tgz","fileCount":23,"integrity":"sha512-YS5FFTto91fmteQ/p2xnCrgiOj/KR96JmkBjqwMTlCF2qKiQGjDYCtmWYKF0rtl0AJLb0kI27EUJSOlJ7ZSb9A==","signatures":[{"sig":"MEQCICm7lXTacHbsUdMZzv86TBhwde010XXWmjE3YvLMSGh/AiBv1PkScVXx6Gt9FGyu31hrU0Nxc6o9rwLLzqtgJV36UA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115257},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"e7fa1954590b18128b684f02a591b9d1fdd6e98a","scripts":{"lint":"eslint --ext .tsx --ext .ts src/","start":"rm -rf Develop/dist && tsc -w --outDir Develop/dist","format":"prettier --check ./src","prepare":"rm -rf dist && tsc"},"_npmUser":{"name":"brycepavey","email":"bryce@dreamwalk.com.au"},"repository":{"url":"git+https://github.com/dreamwalk-os/react-native-image-modal.git","type":"git"},"_npmVersion":"8.1.0","description":"image fullscreen modal for react native","directories":{},"_nodeVersion":"16.13.0","_hasShrinkwrap":false,"devDependencies":{"eslint":"7.9.0","prettier":"2.6.2","typescript":"4.6.4","@types/react":"18.0.9","@arkweid/lefthook":"^0.7.7","@types/react-native":"0.67.7","eslint-plugin-react":"7.29.4","eslint-plugin-prettier":"3.4.1","@typescript-eslint/parser":"4.33.0","eslint-plugin-react-hooks":"4.5.0","@typescript-eslint/eslint-plugin":"4.33.0"},"peerDependencies":{"react":"17.0.2","react-native":"0.68.1","react-native-fast-image":"8.5.11"},"_npmOperationalInternal":{"tmp":"tmp/react-native-image-modal_2.2.0_1686716812422_0.9198550402776196","host":"s3://npm-registry-packages"}},"2.2.1":{"name":"@dreamwalk-os/react-native-image-modal","version":"2.2.1","description":"image fullscreen modal for react native","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"lint":"eslint --ext .tsx --ext .ts src/","format":"prettier --check ./src","start":"rm -rf Develop/dist && tsc -w --outDir Develop/dist","prepare":"rm -rf dist && tsc"},"repository":{"type":"git","url":"git+https://github.com/dreamwalk-os/react-native-image-modal.git"},"keywords":["react-native","react-component","react-native-component","react","ios","android","ui","imagebox","image","gallery"],"author":{"name":"dev-yakuza","email":"dev.yakuza@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/dreamwalk-os/react-native-image-modal/issues"},"homepage":"https://github.com/dreamwalk-os/react-native-image-modal#readme","peerDependencies":{"expo-image":">=1.0.0","react":"17.0.2","react-native":"0.68.1","react-native-safe-area-context":"^5.1.0"},"devDependencies":{"@arkweid/lefthook":"^0.7.7","@types/react":"18.0.9","@types/react-native":"0.67.7","@typescript-eslint/eslint-plugin":"4.33.0","@typescript-eslint/parser":"4.33.0","eslint":"7.9.0","eslint-plugin-prettier":"3.4.1","eslint-plugin-react":"7.29.4","eslint-plugin-react-hooks":"4.5.0","expo-image":"^3.0.11","prettier":"2.6.2","typescript":"4.6.4"},"_id":"@dreamwalk-os/react-native-image-modal@2.2.1","gitHead":"08253b281c1b8f82478f33ed4c99bc3a2714256f","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-jZRdDZ7Rqfp0CHGlspLP9xm7C6zNcjBNDaTv/mZ0PetYL09oM6WtlJCEwn2aDwu+FeZyPGScqShSDhlQJ9YO8w==","shasum":"87b43b0abc4a2519a3f1d633059a33c08992225c","tarball":"https://registry.npmjs.org/@dreamwalk-os/react-native-image-modal/-/react-native-image-modal-2.2.1.tgz","fileCount":23,"unpackedSize":115079,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDuMeRIn4nfPaxtmdY35IbrMUv5rk84PP9KYXmsDS/AaAiEAuo3zlkvayREurM3s9Yw/DP/DOofQP0xdYggji28XrlM="}]},"_npmUser":{"name":"brycepavey","email":"bryce@dreamwalk.com.au"},"directories":{},"maintainers":[{"name":"dreamwalk-apps","email":"systems@dreamwalk.com.au"},{"name":"dreamwalk-apps-admin","email":"operations@dreamwalk.com.au"},{"name":"jmargenberg","email":"jdm0096@gmail.com"},{"name":"brycepavey","email":"bryce@dreamwalk.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-image-modal_2.2.1_1772001865329_0.20300839766389944"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-14T01:13:07.679Z","modified":"2026-02-25T06:44:25.658Z","2.1.2":"2023-06-14T01:13:07.929Z","2.1.3":"2023-06-14T01:35:21.655Z","2.1.4":"2023-06-14T04:14:33.276Z","2.2.0":"2023-06-14T04:26:52.650Z","2.2.1":"2026-02-25T06:44:25.474Z"},"bugs":{"url":"https://github.com/dreamwalk-os/react-native-image-modal/issues"},"author":{"name":"dev-yakuza","email":"dev.yakuza@gmail.com"},"license":"MIT","homepage":"https://github.com/dreamwalk-os/react-native-image-modal#readme","keywords":["react-native","react-component","react-native-component","react","ios","android","ui","imagebox","image","gallery"],"repository":{"type":"git","url":"git+https://github.com/dreamwalk-os/react-native-image-modal.git"},"description":"image fullscreen modal for react native","maintainers":[{"name":"dreamwalk-apps","email":"systems@dreamwalk.com.au"},{"name":"dreamwalk-apps-admin","email":"operations@dreamwalk.com.au"},{"name":"jmargenberg","email":"jdm0096@gmail.com"},{"name":"brycepavey","email":"bryce@dreamwalk.com.au"}],"readme":"# react-native-image-modal\n\n`react-native-image-modal` is a simple full size modal image for iOS and Android.\n\nYou can pinch zoom-in/out, double-tap zoom-in/out, move and swipe-to-dismiss.\n\n## Document\n\n- [Expo](#expo)\n- [Blog](#blog)\n- [Installation](#installation)\n- [How to use](#how-to-use)\n- [Properties](#properties)\n- [Demo](#demo)\n- [Example code](#example-code)\n- [Contribute](#contribute)\n\n## Expo\n\nThis library does not support Expo anymore. Because this library uses `react-native-fast-image`.\n\n`1.0.16` is deprecated, but the version supports Expo.\n\n```bash\nnpm install --save react-native-image-modal@1.0.16\n```\n\n## Blog\n\nThere are blog posts about how to use `react-native-image-modal`.\n\n- English: [how to use react-native-image-modal](https://dev-yakuza.github.io/en/react-native/react-native-image-modal/)\n- 한국어: [react-native-image-modal 사용법](https://dev-yakuza.github.io/ko/react-native/react-native-image-modal/)\n- 日本語: [react-native-image-modal 使い方](https://dev-yakuza.github.io/react-native/react-native-image-modal/)\n\n## Installation\n\nThis library use `react-native-fast-image`, so you need to install it.\n\n```bash\nnpm install --save react-native-fast-image\nnpx pod-install\n```\n\nAnd then execute the command to install `react-native-image-modal`.\n\n```bash\nnpm install --save react-native-image-modal\n```\n\n## How to use\n\nImport react-native-image-modal.\n\n```js\nimport ImageModal from 'react-native-image-modal';\n```\n\nAdd the source code below to where you want to use it.\n\n```js\nreturn (\n \n);\n```\n\n## Properties\n\nYou can use All props of React Native Image for the original image(not full size modal image).\nBelow are `react-native-image-modal` specific properties.\n\n| Prop | required | Type | Description |\n| ------------------------------ | -------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| thumbnailSource | X | Source | An optional source to use for the non-modal image. If not provided will default to `source`. |\n| renderToHardwareTextureAndroid | X | boolean | It is for Android animation. Default is `true`. If you don't want to use Hardware Texture on Android, set `false`. |\n| isTranslucent | X | boolean | if you use `translucent` status bar in android, set `true` to prevent wrong position animation. (In Expo, `translucent` default is `true`) |\n| swipeToDismiss | X | boolean | set `true` to swipe to dismiss (`default: true`) |\n| imageBackgroundColor | X | string | background color for `the original image` |\n| overlayBackgroundColor | X | string | background color for `the full size modal`(`default: #000000`) |\n| modalRef | X | ImageDetail | You can use this Ref for closing the Modal programmatically. |\n| disabled | X | boolean | disable opening the modal |\n| modalImageStyle | X | ImageStyle | Image Style in Modal |\n| resizeMode | X | ResizeMode('contain', 'cover', 'stretch','center') | Image resizeMode |\n| modalImageResizeMode | X | ResizeMode('contain', 'cover', 'stretch','center') | Image resizeMode for modal image. If it is not passed, it will follow the `resizeMode`. |\n| hideCloseButton | X | boolean | hide hide the default close button |\n| onLongPressOriginImage | X | () => void | long press event callback for `the original image` |\n| renderHeader | X | (close: () => void) => JSX. | You can customize the header of `the full size modal` with react native components |\n| renderFooter | X | (close: () => void) => JSX. | You can customize the footer of `the full size modal` with react native components |\n| isRTL | X | boolean | You can use this library with right-to-left-devices. ([#35](https://github.com/dev-yakuza/react-native-image-modal/issues/35)) |\n| onTap | X | (eventParams: {locationX: number; locationY: number; pageX: number; pageY: number;}) => void | one tap event callback for `the full size modal` |\n| onDoubleTap | X | () => void | double tap event callback for `the full size modal` |\n| onLongPress | X | () => void | long press event callback for `the full size modal` |\n| onOpen | X | () => void | open event callback for `the full size modal` |\n| didOpen | X | () => void | event callback after open for `the full size modal` |\n| onMove | X | (position: {type: string; positionX: number; positionY: number; scale: number; zoomCurrentDistance: number;}) => void | move event callback for `the full size modal` |\n| responderRelease | X | (vx?: number, scale?: number) => void | responder release event callback for `the full size modal` |\n| willClose | X | () => void | event callback before close for `the full size modal` |\n| onClose | X | () => void | close event callback for `the full size modal` |\n\n## Demo\n\n- Open and close the image modal.\n\n![open and close image modal](demo/open-and-close-image-modal.gif)\n\n- Pinch zoom in/out and move.\n\n![pinch zoom in/out and move](demo/pinch-zoom-and-move.gif)\n\n- Double tap zoom in/out.\n\n![double tap zoom in/out](demo/double-tap-zoom.gif)\n\n- Swipe to dismiss.\n\n![swipe to dismiss](demo/swipe-to-dismiss.gif)\n\n- Customize the component with the close button.\n\n![customize the component](demo/custom-button.png)\n\n## Example code\n\nYou can see the example code and demo.\n\nClone the repository\n\n```bash\ngit clone https://github.com/dev-yakuza/react-native-image-modal.git\n```\n\nInstall libraries\n\n```bash\ncd Example\nnpm install\n\n# iOS\ncd ios\npod install\n```\n\nExecute the example project.\n\n```bash\n# Example folder\n# iOS\nnpm run ios\n# Android\nnpm run android\n```\n\n## Contribute\n\nYou can follow below to contribute react-native-image-modal.\n\nClone the repository.\n\n```bash\ngit clone https://github.com/dev-yakuza/react-native-image-modal.git\n```\n\nInstall libraries and `Lefthook`.\n\n```bash\nnpm install\nnpx @arkweid/lefthook install\n```\n\nExecute the following command to start the project.\n\n```bash\nnpm start\n```\n\nExecute the Develop project via the commands below.\n\n```bash\ncd Develop\nnpm install\n\n# android\nnpm run android\n\n# ios\ncd ios\npod install\ncd ..\nnpm run ios\n```\n","readmeFilename":"README.md"}