{"_id":"@alice_space/react-native-image-viewing","name":"@alice_space/react-native-image-viewing","dist-tags":{"latest":"0.2.2"},"versions":{"0.2.2":{"name":"@alice_space/react-native-image-viewing","version":"0.2.2","description":"React Native modal component for viewing images as a sliding gallery using react-native-fast-image","main":"dist/index.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/treehollow-net/react-native-image-viewing"},"keywords":["react","react-native","image","gallery","image-gallery","image-viewer","react-native-fast-image"],"scripts":{"build":"tsc","postversion":"yarn build"},"peerDependencies":{"react":">=16.11.0","react-native":">=0.61.3","react-native-fast-image":"^8.5.11"},"author":{"name":"Alice-space","url":"https://github.com/Alice-space"},"license":"MIT","bugs":{"url":"https://github.com/treehollow-net/react-native-image-viewing/issues"},"homepage":"https://github.com/treehollow-net/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","react-native-fast-image":"^8.5.11","typescript":"3.7.2"},"dependencies":{},"licenseText":"MIT License\n\nCopyright (c) 2019 JOB TODAY S.A.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@alice_space/react-native-image-viewing@0.2.2","dist":{"shasum":"3996ed5786ca1db18c42276ff3b2d3b3820c0b6e","integrity":"sha512-m3/0R0DTsy7XFw6DzTWKv4w08D45KnX/ARFFxnG0JoR5T/W97Oa/Fe9eqo3dcED7qKx+AOuGkeMG/swVP3z/sg==","tarball":"https://registry.npmjs.org/@alice_space/react-native-image-viewing/-/react-native-image-viewing-0.2.2.tgz","fileCount":41,"unpackedSize":56885,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID42l2ucLa/t6Gwy5vQwAPRDfJjtg3o1iEmNaVeuTHVnAiBQ+AV3sHWMHRp6kVPLxMHB/3rIck7IriVSHNBEFSHB/w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidphmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgoBAAj+N+o7yw8fW0ARqy9mt0JoGRVRVwIu/g2zyI3MQzVDHYK5A8\r\nqRiI69osS0QHeH8UlblVEDz7NbVblQLmhLIbW+L/tn/5rl2oC4pFKUzVano7\r\n8NFQUhVv8rnjqTpAG4gXJWWT8Q2vOCcl3OJTl+OkklM5J2/M2OxyVLe0m8oO\r\nLdMyFMkEVbLr3wAXtka+JTFmqyqTT3RXQyfxHhylEzpth8afTeciI2ngSdKv\r\njDAZR9sEBuQrPRszkDwz+Jb5fVWiUakicIfjT1jA6VFAinMifnOmE+rbDBMX\r\nIII7mm5RkjWGH1Q5aW1gQC8ake1HkqW6F3u3SXgyqvs/i9iwP1rvBuBPnpD9\r\nNmZrcVIjpCEylEXOAKgoKRYQxhXYipK5NsiE/WTidxD/C3o3o/cjvB8FnPoA\r\nVsLndDQieiOo/Y/k0GVONzCDK+Cu4QBBXax1vqAc4SvfKRGxTkpu9lG9PNmB\r\nbvGxfKupOBd07GE1nX+/Qqz6XhHDE0WH8mqM/hur3ZO9G0xw4HxSJcdHvFwM\r\nEdj8xJL2hy2YecrtpSfRX+ubHDoMxkPuF0HT4cECOiwjO8R5/kPzHOc3ZFUR\r\nIsNw0cslLXI01eQXjbRaYNo8MRJQPXQ+//2qweRopEEie4HLRX9B0YFQO0nO\r\nAg1QuiyElIhhS68LGQ3GMvd+aQeO/bCXGCQ=\r\n=pyQp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alice_space","email":"alicespace.li@outlook.com"},"directories":{},"maintainers":[{"name":"alice_space","email":"alicespace.li@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-image-viewing_0.2.2_1651939430775_0.09976914318991392"},"_hasShrinkwrap":false}},"time":{"created":"2022-05-07T16:03:50.716Z","0.2.2":"2022-05-07T16:03:50.936Z","modified":"2022-05-07T16:03:51.062Z"},"maintainers":[{"name":"alice_space","email":"alicespace.li@outlook.com"}],"description":"React Native modal component for viewing images as a sliding gallery using react-native-fast-image","homepage":"https://github.com/treehollow-net/react-native-image-viewing#readme","keywords":["react","react-native","image","gallery","image-gallery","image-viewer","react-native-fast-image"],"repository":{"type":"git","url":"git+https://github.com/treehollow-net/react-native-image-viewing"},"author":{"name":"Alice-space","url":"https://github.com/Alice-space"},"bugs":{"url":"https://github.com/treehollow-net/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/react-native-image-viewing.svg)](https://badge.fury.io/js/react-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 react-native-image-viewing\n```\n\nor\n\n```bash\nnpm install --save react-native-image-viewing\n```\n\n## Usage\n\n```jsx\nimport ImageView from \"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| `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"}