{"id":4668,"url":"https://github.com/InterfaceKit/react-native-interactive-image-gallery","last_synced_at":"2025-08-04T01:32:53.470Z","repository":{"id":46938712,"uuid":"109853720","full_name":"InterfaceKit/react-native-interactive-image-gallery","owner":"InterfaceKit","description":"🖼 A React Native component to display a gallery of images.","archived":false,"fork":false,"pushed_at":"2022-12-07T09:17:14.000Z","size":577,"stargazers_count":116,"open_issues_count":23,"forks_count":17,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-17T23:03:37.210Z","etag":null,"topics":["react","react-component","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/InterfaceKit.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}},"created_at":"2017-11-07T15:26:45.000Z","updated_at":"2024-08-19T16:30:19.000Z","dependencies_parsed_at":"2023-01-24T14:01:13.607Z","dependency_job_id":null,"html_url":"https://github.com/InterfaceKit/react-native-interactive-image-gallery","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/InterfaceKit/react-native-interactive-image-gallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InterfaceKit%2Freact-native-interactive-image-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InterfaceKit%2Freact-native-interactive-image-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InterfaceKit%2Freact-native-interactive-image-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InterfaceKit%2Freact-native-interactive-image-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/InterfaceKit","download_url":"https://codeload.github.com/InterfaceKit/react-native-interactive-image-gallery/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InterfaceKit%2Freact-native-interactive-image-gallery/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268636502,"owners_count":24282102,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["react","react-component","react-native"],"created_at":"2024-01-05T20:17:19.657Z","updated_at":"2025-08-04T01:32:53.141Z","avatar_url":"https://github.com/InterfaceKit.png","language":"JavaScript","readme":"# react-native-interactive-image-gallery\n\n\u003cp\u003e\n\u003cimg src=\"https://img.shields.io/npm/dm/react-native-interactive-image-gallery.svg\" /\u003e\n\u003cimg src=\"https://img.shields.io/npm/dt/react-native-interactive-image-gallery.svg\" /\u003e\n\u003c/p\u003e\n\nA React Native component to display a gallery of images.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/wiki/InterfaceKit/react-native-interactive-image-gallery/ios.gif\" alt=\"iOS\" width=\"400\" /\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/wiki/InterfaceKit/react-native-interactive-image-gallery/android.gif\" alt=\"Android\" width=\"400\" /\u003e\n\u003c/p\u003e\n\n## Getting started\n\n`$ yarn addreact-native-interactive-image-gallery`\n\n### Mostly automatic installation\n\n`$ react-native link react-native-interactive-image-gallery`\n\n### Manual installation\n\n#### iOS\n\n1.  In Xcode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2.  Go to `node_modules` ➜ `react-native-interactive-image-gallery` and add\n    `RNIKInteractiveImageLibrary.xcodeproj`\n3.  In XCode, in the project navigator, select your project. Add\n    `libRNIKInteractiveImageLibrary.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4.  Run your project (`Cmd+R`)\u003c\n\n#### Android\n\nNo additional setup needed.\n\n## Usage\n\n```javascript\nimport ImageBrowser from 'react-native-interactive-image-gallery'\n\nclass Images extends React.PureComponent\u003cProps\u003e {\n  render() {\n    const imageURLs: Array\u003cObject\u003e = this.props.images.map(\n      (img: Object, index: number) =\u003e ({\n        URI: img.uri,\n        thumbnail: img.thumbnail,\n        id: String(index),\n        title: img.title,\n        description: img.description\n      })\n    )\n    return \u003cImageBrowser images={imageURLs} /\u003e\n  }\n}\n```\n\n## API\n\nThe `\u003cImageBrowser /\u003e` component accepts the following props\n\n### Props\n\n| Prop                                  | Type                  | Mandatory |\n| ------------------------------------- | --------------------- | --------- |\n| `images`                              | `Array\u003cImageSource\u003e`  | **Yes**   |\n| `onPressImage`                        | `Function`            |\n| `topMargin`                           | `number`              |\n| `closeText`                           | `string`              |\n| `infoTitleStyles`                     | `Animated.View.style` |\n| `infoDescriptionStyles`               | `Animated.View.style` |\n| `enableTilt` (experimental, iOS only) | `boolean`             |\n\nWhere `ImageSource` represents\n\n### `ImageSource`\n\n| Name          | Type     | Mandatory |\n| ------------- | -------- | --------- |\n| `id`          | `string` | **Yes**   |\n| `URI`         | `string` | **Yes**   |\n| `thumbnail`   | `string` | **Yes**   |\n| `title`       | `string` |\n| `description` | `string` |\n\n## Aknowledgements\n\nThanks to Eric Vicenti (https://github.com/ericvicenti) and\n[his talk at React Native EU 2017](https://www.youtube.com/watch?v=7emqc7yf-Zg)\ncalled \"Practical Hacks for delightful interactions\" for the inspiration and the\niOS animations present in this library\n\nThe main idea of the library and some parts of the code were inspired or taken\nfrom his presentation, available at\n[this repo](https://github.com/ericvicenti/react-native-eu-2017).\n\n## License\n\nMIT.\n\n## Author\n\nÁlvaro Medina Ballester `\u003camedina at apsl.net\u003e`\n\nBuilt with 💛 by [APSL](https://github.com/apsl).\n","funding_links":[],"categories":["Components"],"sub_categories":["Media"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInterfaceKit%2Freact-native-interactive-image-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FInterfaceKit%2Freact-native-interactive-image-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInterfaceKit%2Freact-native-interactive-image-gallery/lists"}