{"id":13838904,"url":"https://github.com/jobtoday/react-native-image-viewing","last_synced_at":"2025-07-10T23:32:22.441Z","repository":{"id":38375380,"uuid":"220325740","full_name":"jobtoday/react-native-image-viewing","owner":"jobtoday","description":"Tiny, purely TS, modal component for viewing images 🏙 ","archived":false,"fork":false,"pushed_at":"2024-06-07T09:16:40.000Z","size":22318,"stargazers_count":890,"open_issues_count":117,"forks_count":290,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-11-13T13:54:40.619Z","etag":null,"topics":["image-gallery","image-viewer","pinch-to-zoom","react","react-native"],"latest_commit_sha":null,"homepage":"https://exp.host/@antonkalinin/react-native-image-viewing","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jobtoday.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-07T20:44:32.000Z","updated_at":"2024-11-13T08:08:40.000Z","dependencies_parsed_at":"2023-02-03T05:02:37.421Z","dependency_job_id":"566fba63-bbb5-4b89-ae67-ae3f1db15c27","html_url":"https://github.com/jobtoday/react-native-image-viewing","commit_stats":{"total_commits":69,"total_committers":10,"mean_commits":6.9,"dds":0.5217391304347826,"last_synced_commit":"8a91a9c370cb0e6820482b2262aacd1e25a718f7"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jobtoday%2Freact-native-image-viewing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jobtoday%2Freact-native-image-viewing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jobtoday%2Freact-native-image-viewing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jobtoday%2Freact-native-image-viewing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jobtoday","download_url":"https://codeload.github.com/jobtoday/react-native-image-viewing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224843952,"owners_count":17379233,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image-gallery","image-viewer","pinch-to-zoom","react","react-native"],"created_at":"2024-08-04T16:00:37.981Z","updated_at":"2024-11-21T02:30:47.892Z","avatar_url":"https://github.com/jobtoday.png","language":"TypeScript","funding_links":[],"categories":["Components"],"sub_categories":["Image"],"readme":"# react-native-image-viewing\n\n\u003e 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\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/jobtoday/react-native-image-viewing/blob/master/demo.gif?raw=true\" height=\"480\" /\u003e\n\u003c/p\u003e\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\u003cImageView\n  images={images}\n  imageIndex={0}\n  visible={visible}\n  onRequestClose={() =\u003e setIsVisible(false)}\n/\u003e\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) =\u003e 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 \u0026 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjobtoday%2Freact-native-image-viewing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjobtoday%2Freact-native-image-viewing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjobtoday%2Freact-native-image-viewing/lists"}