{"_id":"@brandship/react-native-image-viewing","_rev":"5-e6fd139b6b6cebd45a6d5d3ad5624d1b","time":{"created":"2023-04-07T08:16:15.364Z","0.2.3":"2023-04-07T08:14:35.201Z","modified":"2023-06-06T07:59:44.645Z","0.2.4":"2023-04-07T08:16:15.623Z","0.2.5":"2023-04-07T12:11:28.432Z","0.2.6":"2023-06-06T07:59:44.531Z"},"name":"@brandship/react-native-image-viewing","dist-tags":{"latest":"0.2.6"},"versions":{"0.2.4":{"name":"@brandship/react-native-image-viewing","version":"0.2.4","description":"React Native modal component for viewing images as a sliding gallery","main":"dist/index.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/mushroot/react-native-image-viewing.git"},"keywords":["react","react-native","image","gallery","image-gallery","image-viewer"],"scripts":{"build":"tsc","postversion":"yarn build"},"peerDependencies":{"react":">=16.11.0","react-native":">=0.61.3"},"author":{"name":"Anton Kalinin"},"license":"MIT","bugs":{"url":"https://github.com/mushroot/react-native-image-viewing/issues"},"homepage":"https://github.com/mushroot/react-native-image-viewing#readme","devDependencies":{"@babel/runtime":"7.7.4","@types/react":"16.9.13","@types/react-native":"0.60.23","react":"16.12.0","react-native":"0.61.5","typescript":"3.7.2"},"gitHead":"9ac31e74c010d9ba12494e80cc20c9a57f92025d","_id":"@brandship/react-native-image-viewing@0.2.4","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-0zaexllqXtF1xTPCRY5OognQjxtDP+jd6d2bkKKAxebkSZEMvML6cMUUea6IX1uVecB+CeD06EG2Btah2c9nRg==","shasum":"d348f21beb6001f99fe0129bbe67b22f4feb6951","tarball":"https://registry.npmjs.org/@brandship/react-native-image-viewing/-/react-native-image-viewing-0.2.4.tgz","fileCount":3,"unpackedSize":7777,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmFZ6P5utkvX7HLC5bVCrNlSHszl3DhyAwpBJ2C06NAAIgCKZ8Ae662DFLnscW2DbSZMeTCrI80OSfrwqogxnrw/s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL9FPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3ng/9EuiPP9pRi2w1819dGheAblJwjFqtbvnw14XjjYPs/G9oMlGL\r\nBqoGC1ntRfGFc6nYplzHklvQYj69e6jWoqBCJBYXgHJpZixBdQkNfevvTXxV\r\nhXCNZJaWVSaYEz/sZxtdsKy79LsONXcmytSfYEjSfi9drsb1dVMH4AmI6XnK\r\nSq2l8IaPsR6hPbVxmzVCRa54O2F8u8Tnnqu7rY0my5SlNKJd2cApd6U+ZQkf\r\nruhYnWfAvS1FpnAgrquLFXEb5bbC6gekTs7tdsYAc6LFc+w2s+BFCUSekwsN\r\nv4H18p5fKLTkcjEpuqgfUTi+Ju9sW03KmmFR99ZNvdR9v8Ee1b66HNE80y02\r\nj3Rxa1OWlxuJex19oQK+8iUMB3Hy81OvIYm7JOBUFY1oxOkMrvEeQS5jWMK1\r\nEOJzpHx8mftrTgRV+gL5vs4Q2PL+0BGfSnD01hMp5zGIIJwolZE63xVPQ3C/\r\nVKs+8SB7bUc8Prw21SLZJvqLkpqhtWEl6bZdTf4yAofmiJoZ6CFbmoPiSqAd\r\nX8Yvrd4SlaNjXpBG+Nuz+3eLqAgVnSlq1be3M5T/HLmzZ79uqCwLFK6vMVdr\r\nUevKsi5RFiV1Z3iD6AJIMA3aIYpHjukOaiMrFkUqlV6wrrf37uRCwMKapEtq\r\n90snLSiLNRMWUCn8TqcJWYHeLOaoaaqREc0=\r\n=KRC+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wmstar","email":"wmistar@gmail.com"},"directories":{},"maintainers":[{"name":"wmstar","email":"wmistar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-image-viewing_0.2.4_1680855375431_0.2711482864103747"},"_hasShrinkwrap":false},"0.2.5":{"name":"@brandship/react-native-image-viewing","version":"0.2.5","description":"React Native modal component for viewing images as a sliding gallery","main":"dist/index.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/mushroot/react-native-image-viewing.git"},"keywords":["react","react-native","image","gallery","image-gallery","image-viewer"],"scripts":{"build":"tsc","postversion":"yarn build"},"peerDependencies":{"react":">=16.11.0","react-native":">=0.61.3"},"author":{"name":"Anton Kalinin"},"license":"MIT","bugs":{"url":"https://github.com/mushroot/react-native-image-viewing/issues"},"homepage":"https://github.com/mushroot/react-native-image-viewing#readme","devDependencies":{"@babel/runtime":"7.7.4","@types/react":"16.9.13","@types/react-native":"0.60.23","react":"16.12.0","react-native":"0.61.5","typescript":"3.7.2"},"gitHead":"d25a0f566ebc6f4851d810681e3452e4bf1dc7d0","_id":"@brandship/react-native-image-viewing@0.2.5","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-grtrfYWb5adwee9qyNE6ZhqyjkklTugdd2WRTe1mG+GE6g9IXFhwIn4dBJ56fKll4eQoBsBDFvnPK1ZScpRsOg==","shasum":"9faffa1869135638c17e2055960cda677d05563c","tarball":"https://registry.npmjs.org/@brandship/react-native-image-viewing/-/react-native-image-viewing-0.2.5.tgz","fileCount":35,"unpackedSize":57909,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaW0jftS97vxS8+wMcHUSi+VFyz+qNBbj+uxUf2WXMcgIgA7qeCretNZRX7hk2T97K6GA/LFNLWCQzALnJuD1DCyQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMAhwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAAw/+PPc7H/hmL2CS8dBgcXuqJE8T7ThmLB+2KGZhv0WxIiMfNbUb\r\nI6i/R9LgDuWZQWf9/E3y0iOEQp59mIS4tOqsoB1Gdsd9vlmsf6swHhJmnqDH\r\n4oYqH3C1BYE7Q2LP6DLqaIf3wWFStjNVxlO51VlnFNeaYdLFIs8cGOnYFgC6\r\nep+WOKXGoHgtoC3MAgWww1ELoSllNZmFhjLiBhbVMbtuzgDug33hQwjIl7hM\r\nKE/7amX8d2MLaFdf+L9MKP6NL5vI+eHhKOF3hZCaHLLRLB+OYfmd3krXCKIV\r\nv6VUICcJRNnMXF71/IkI5LbI0xXL1kUpxz4A0zpWJkAMTFLpqwUTVuovCkPw\r\nOK599Kna8dyxvbHCIJ8lWYbU/7ODwD+VbN4vTIlPD0wOQXc56bJ9C6tSC2Bm\r\n1DXhRmkGAj+4e/y1DMTGzv74bzXUQjvtEuAOO23nkW6VwueYdSQn8r6KoIKW\r\nK+p2mrLBk5kgcUih60wvpLFmDYhXz5isKidaCFCxi8QEN2PSXOFPc5urJwbO\r\n35nfxV6YwMcq1aNnlLKXSh0fLcGpfHFEdIzlAYvOQIEjAyD21PB7+8LhfgMq\r\nk91dFS6+Ls8AHTYgB+Y2Ea/otPc3xuc3bXQOqMYjuzl3+NdCjHinCAdrMHH8\r\nKvZGYYlp1uPj0ul0B4HdeOPMGG6G6eEFfGw=\r\n=I5RO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wmstar","email":"wmistar@gmail.com"},"directories":{},"maintainers":[{"name":"wmstar","email":"wmistar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-image-viewing_0.2.5_1680869488199_0.7795693599470919"},"_hasShrinkwrap":false},"0.2.6":{"name":"@brandship/react-native-image-viewing","version":"0.2.6","description":"React Native modal component for viewing images as a sliding gallery","main":"dist/index.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/mushroot/react-native-image-viewing.git"},"keywords":["react","react-native","image","gallery","image-gallery","image-viewer"],"scripts":{"build":"tsc","postversion":"yarn build"},"peerDependencies":{"react":">=16.11.0","react-native":">=0.61.3"},"author":{"name":"Anton Kalinin"},"license":"MIT","bugs":{"url":"https://github.com/mushroot/react-native-image-viewing/issues"},"homepage":"https://github.com/mushroot/react-native-image-viewing#readme","devDependencies":{"@babel/runtime":"7.7.4","@types/react":"16.9.13","@types/react-native":"0.60.23","react":"16.12.0","react-native":"0.61.5","typescript":"3.7.2"},"gitHead":"112240cc7745f6959ee27b08cf365116fdb9fd03","_id":"@brandship/react-native-image-viewing@0.2.6","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-g0i8VoFYt21qRvaC8c+uaepZ4NVSN6HSFq4GArnBbQKBaPC322DH5u2F2rdV6MBWm/qncCWLBDq7Y09YE0MA/g==","shasum":"531dc33b914a85fdea7fbb3a7d08b44ba6216cf8","tarball":"https://registry.npmjs.org/@brandship/react-native-image-viewing/-/react-native-image-viewing-0.2.6.tgz","fileCount":35,"unpackedSize":59389,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDabXHZVPaneI5YHyksZYKepZQy62k+HDIX08RbvvzoXAIgITg1lhzMD+PtALOvfVmclyh8E9NrrfZRx14BQofhQPU="}]},"_npmUser":{"name":"wmstar","email":"wmistar@gmail.com"},"directories":{},"maintainers":[{"name":"wmstar","email":"wmistar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-image-viewing_0.2.6_1686038384382_0.46918952571787065"},"_hasShrinkwrap":false}},"maintainers":[{"name":"wmstar","email":"wmistar@gmail.com"}],"description":"React Native modal component for viewing images as a sliding gallery","homepage":"https://github.com/mushroot/react-native-image-viewing#readme","keywords":["react","react-native","image","gallery","image-gallery","image-viewer"],"repository":{"type":"git","url":"git+https://github.com/mushroot/react-native-image-viewing.git"},"author":{"name":"Anton Kalinin"},"bugs":{"url":"https://github.com/mushroot/react-native-image-viewing/issues"},"license":"MIT","readme":"# react-native-image-viewing\n\n> React Native modal component for viewing images as a sliding gallery.\n\n[![npm version](https://badge.fury.io/js/@brandship%2Freact-native-image-viewing.svg)](https://badge.fury.io/js/@brandship%2Freact-native-image-viewing)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n- 🔥Pinch zoom for both iOS and Android\n- 🔥Double tap to zoom for both iOS and Android\n- 🔥Supports swipe-to-close animation\n- 🔥Custom header and footer components\n- 🔥Uses VirtualizedList to optimize image loading and rendering\n\nTry with Expo: https://expo.io/@antonkalinin/react-native-image-viewing\n\n

\n \n

\n\n## Installation\n\n```bash\nyarn add @brandship/react-native-image-viewing\n```\n\nor\n\n```bash\nnpm install --save @brandship/react-native-image-viewing\n```\n\n## Usage\n\n```jsx\nimport ImageView from \"@brandship/react-native-image-viewing\";\n\nconst images = [\n {\n uri: \"https://images.unsplash.com/photo-1571501679680-de32f1e7aad4\",\n },\n {\n uri: \"https://images.unsplash.com/photo-1573273787173-0eb81a833b34\",\n },\n {\n uri: \"https://images.unsplash.com/photo-1569569970363-df7b6160d111\",\n },\n];\n\nconst [visible, setIsVisible] = useState(false);\n\n setIsVisible(false)}\n/>\n```\n\n#### [See Example](https://github.com/jobtoday/react-native-image-viewing/blob/master/example/App.tsx#L62-L80)\n\n## Props\n\n| Prop name | Description | Type | Required |\n| ------------------------ | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -------- |\n| `images` | Array of images to display | ImageSource[] | true |\n| `keyExtractor` | Uniqely identifying each image | (imageSrc: ImageSource, index: number) => string | false |\n| `imageIndex` | Current index of image to display | number | true |\n| `visible` | Is modal shown or not | boolean | true |\n| `onRequestClose` | Function called to close the modal | function | true |\n| `onImageIndexChange` | Function called when image index has been changed | function | false |\n| `onPress` | Function called when image on pressed | function (event: GestureResponderEvent, image: ImageSource) | false |\n| `onLongPress` | Function called when image long pressed | function (event: GestureResponderEvent, image: ImageSource) | false |\n| `delayLongPress` | Delay in ms, before onLongPress is called: default `800` | number | false |\n| `animationType` | Animation modal presented with: default `fade` | `none`, `fade`, `slide` | false |\n| `presentationStyle` | Modal presentation style: default: `fullScreen` **Android:** Use `overFullScreen` to hide StatusBar | `fullScreen`, `pageSheet`, `formSheet`, `overFullScreen` | false |\n| `backgroundColor` | Background color of the modal in HEX (#000000EE) | string | false |\n| `swipeToCloseEnabled` | Close modal with swipe up or down: default `true` | boolean | false |\n| `doubleTapToZoomEnabled` | Zoom image by double tap on it: default `true` | boolean | false |\n| `HeaderComponent` | Header component, gets current `imageIndex` as a prop | component, function | false |\n| `FooterComponent` | Footer component, gets current `imageIndex` as a prop | component, function | false |\n\n- type ImageSource = ImageURISource | ImageRequireSource\n\n## Contributing\n\nTo start contributing clone this repo and then run inside `react-native-image-viewing` folder:\n\n```bash\nyarn\n```\n\nThen go inside `example` folder and run:\n\n```bash\nyarn & yarn start\n```\n\nThis will start packager for expo so you can change `/src/ImageViewing` and see changes in expo example app.\n\n## License\n\n[MIT](LICENSE)\n","readmeFilename":"README.md"}