{"_id":"@apexglory/react-native-image-viewing","name":"@apexglory/react-native-image-viewing","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@apexglory/react-native-image-viewing","version":"0.0.1","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/jobtoday/react-native-image-viewing.git"},"keywords":["react","react-native","image","gallery","image-gallery","image-viewer"],"scripts":{"build":"tsc"},"peerDependencies":{"react":">=16.11.0","react-native":">=0.61.3"},"author":{"name":"Anton Kalinin"},"license":"MIT","bugs":{"url":"https://github.com/jobtoday/react-native-image-viewing/issues"},"homepage":"https://github.com/jobtoday/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"},"_id":"@apexglory/react-native-image-viewing@0.0.1","gitHead":"c4e00aa3ee1146411ac8981b8e1f84f00bfc2691","_nodeVersion":"18.20.2","_npmVersion":"10.5.0","dist":{"integrity":"sha512-eTFR3L4FHY8YtgM/R8eLJ8M8t9phu8WqVYCxR5K5Ed1+PXuBZgR18C2CSSjzi2g/a6m4rrMO8HdmyQfFIo8Wcw==","shasum":"c347a7b102ced282c03340554ac082e0df7b03cd","tarball":"https://registry.npmjs.org/@apexglory/react-native-image-viewing/-/react-native-image-viewing-0.0.1.tgz","fileCount":35,"unpackedSize":59103,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDPOoz7hiMNX0iPHwbOSrm9YJSg062rwwTZct01KBbFoAIhAO7PMYksB9JH4CY9+Lpv/sjiYw+EBLbXJxQIbszdKPGJ"}]},"_npmUser":{"name":"apexglory","email":"gloryofapex@gmail.com"},"directories":{},"maintainers":[{"name":"apexglory","email":"gloryofapex@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-image-viewing_0.0.1_1753355957844_0.8560810855522234"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-24T11:19:17.745Z","0.0.1":"2025-07-24T11:19:18.062Z","modified":"2025-07-24T11:19:18.320Z"},"maintainers":[{"name":"apexglory","email":"gloryofapex@gmail.com"}],"description":"React Native modal component for viewing images as a sliding gallery","homepage":"https://github.com/jobtoday/react-native-image-viewing#readme","keywords":["react","react-native","image","gallery","image-gallery","image-viewer"],"repository":{"type":"git","url":"git+https://github.com/jobtoday/react-native-image-viewing.git"},"author":{"name":"Anton Kalinin"},"bugs":{"url":"https://github.com/jobtoday/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","_rev":"1-931cadfcf5355a9f94481ddba68641b8"}