{"id":30805429,"url":"https://github.com/simformsolutionspvtltd/react-native-photos-gallery","last_synced_at":"2025-10-15T08:25:28.859Z","repository":{"id":165552467,"uuid":"604446502","full_name":"SimformSolutionsPvtLtd/react-native-photos-gallery","owner":"SimformSolutionsPvtLtd","description":"A React Native custom animated photo gallery component to open and view photos ✨ ","archived":false,"fork":false,"pushed_at":"2023-08-21T04:22:08.000Z","size":17566,"stargazers_count":63,"open_issues_count":1,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-08-09T14:44:10.830Z","etag":null,"topics":["component","library","photo-gallery","photos","react-native"],"latest_commit_sha":null,"homepage":"","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/SimformSolutionsPvtLtd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2023-02-21T04:26:47.000Z","updated_at":"2025-06-12T15:19:49.000Z","dependencies_parsed_at":"2024-10-23T00:37:08.741Z","dependency_job_id":null,"html_url":"https://github.com/SimformSolutionsPvtLtd/react-native-photos-gallery","commit_stats":{"total_commits":14,"total_committers":4,"mean_commits":3.5,"dds":0.2857142857142857,"last_synced_commit":"ac0f6aa0751122c70971dc75d8fd0e075531e1e0"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/SimformSolutionsPvtLtd/react-native-photos-gallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-photos-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-photos-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-photos-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-photos-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimformSolutionsPvtLtd","download_url":"https://codeload.github.com/SimformSolutionsPvtLtd/react-native-photos-gallery/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-photos-gallery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273842838,"owners_count":25177921,"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-09-05T02:00:09.113Z","response_time":402,"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":["component","library","photo-gallery","photos","react-native"],"created_at":"2025-09-06T00:57:26.163Z","updated_at":"2025-10-15T08:25:23.815Z","avatar_url":"https://github.com/SimformSolutionsPvtLtd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![PhotosGellary - Simform](./assets/reactNativePhotosGalleryBanner.gif)\n\n# react-native-photos-gallery\n\n## [![npm version](https://img.shields.io/badge/npm%20package-0.0.1-orange)](https://www.npmjs.org/package/react-native-photos-gallery) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)\n\nIntroducing a cutting-edge Photo Gallery library built with pure JavaScript and React Native Reanimated, designed to enhance your photo gallery experience by allowing you to effortlessly open and view selected photos.\n\nOur user-friendly and highly customizable library ensures a seamless experience. Whether you're an Android or iOS user, our library is compatible with both platforms, guaranteeing optimal performance.\n\n## 🎬 Preview\n\n| OneColumn List                             | TwoColumn List                           | Horizontal List                           |\n| ------------------------------------------ | ---------------------------------------- | ----------------------------------------- |\n| ![alt Default](./assets/oneColumnList.gif) | ![alt Modal](./assets/twoColumnList.gif) | ![alt Modal](./assets/horizontalList.gif) |\n\n## Quick Access\n\n- [Installation](#installation)\n- [Usage and Examples](#usage)\n- [Properties](#properties)\n- [Example Code](#example)\n- [License](#license)\n\n## Getting Started 🔧\n\nHere's how to get started with react-native-photos-gallery in your React Native project:\n\n### Installation\n\n##### 1. Install the package\n\nUsing `npm`:\n\n```sh\nnpm install react-native-photos-gallery react-native-reanimated react-native-gesture-handler\n```\n\nUsing `Yarn`:\n\n```sh\nyarn add react-native-photos-gallery react-native-reanimated react-native-gesture-handler\n```\n\n##### 2. Install cocoapods in the ios project\n\n```bash\ncd ios \u0026\u0026 pod install\n```\n\n\u003e Note: Make sure to add Reanimated's babel plugin to your `babel.config.js`\n\n```js\nmodule.exports = {\n      ...\n      plugins: [\n          ...\n          'react-native-reanimated/plugin',\n      ],\n  };\n```\n\n##### Know more about [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated)\n\n## Usage\n\n#### Sample Data\n\n```jsx\nconst data = [\n  {\n    id: number,\n    source: ImageSourcePropType,\n  },\n];\n```\n\n#### Basic Example\n\n```jsx\nimport React from 'react';\nimport { SafeAreaView, StyleSheet } from 'react-native';\nimport { PhotoGallery } from 'react-native-photos-gallery';\n\nexport const data = [\n  {\n    id: 1,\n    source: require('./assets/images/apple.jpeg'),\n  },\n  {\n    id: 2,\n    source: require('./assets/images/apple_icon.jpeg'),\n  },\n  {\n    id: 3,\n    source: require('./assets/images/DeepPurple.png'),\n  },\n  {\n    id: 4,\n    source: require('./assets/images/iPhone12.jpeg'),\n  },\n  {\n    id: 5,\n    source: require('./assets/images/iPhoneX.jpeg'),\n  },\n  {\n    id: 6,\n    source: require('./assets/images/iphoneXWall.jpg'),\n  },\n  {\n    id: 7,\n    source: require('./assets/images/112ProMax.jpg'),\n  },\n  {\n    id: 8,\n    source: {\n      uri: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',\n    },\n  },\n];\n\nconst App = () =\u003e {\n  return (\n    \u003cSafeAreaView style={styles.screen}\u003e\n      \u003cPhotoGallery\n        data={data}\n        onImageExpand={({ visible }) =\u003e console.log(visible)}\n        animatedImageDelay={60}\n        modalBackgroundStyle={styles.modalBackgroundStyle}\n      /\u003e\n    \u003c/SafeAreaView\u003e\n  );\n};\n\nexport default App;\n\nconst styles = StyleSheet.create({\n  screen: { flex: 1 },\n  modalBackgroundStyle: {\n    backgroundColor: 'white',\n  },\n});\n```\n\n#### 🎬 Preview\n\n## ![Default Modal](./assets/twoColumnList.gif)\n\n## Properties\n\n| Props                        |  Default  |                   Type                   | Description                                                                                            |\n| ---------------------------- | :-------: | :--------------------------------------: | ------------------------------------------------------------------------------------------------------ |\n| **data**                     |     -     |           [Data](#sample-data)           | Data to render images                                                                                  |\n| scaledImageResizeMode        | `'cover'` |            `ImageResizeMode`             | Image size mode                                                                                        |\n| animationCloseSpeed          |    350    |            `Range\u003c200, 500\u003e`             | Animation close speed between 200 to 500                                                               |\n| animatedThumbnailScrollSpeed |    30     |              10 \\| 20 \\| 30              | Thumbnail List scroll speed                                                                            |\n| animatedImageDelay           |    90     |           20 \\| 30 \\| 60 \\| 90           | Animated image delay                                                                                   |\n| thumbnailListImageHeight     |    120    |                  number                  | Height of thumbnail list image                                                                         |\n| thumbnailListImageWidth      |    120    |                  number                  | Width of thumbnail list image                                                                          |\n| thumbnailListImageSpace      |    10     |                  number                  | Space between thumbnail list images                                                                    |\n| renderHeader                 |     -     |                 function                 | Custom header content instead of default child content and it provide `close()` as an argument         |\n| onImageExpand                |     -     |                 function                 | Function to call when image expanded and it provide `{visible}` as an argument                         |\n| renderNetworkLoader          |     -     |                 function                 | Custom network loader instead of default loader                                                        |\n| flatListProps                |     -     | FlatListProps\u003c[ArrayData](#sample-data)\u003e | Provide \u003ca href=\"https://reactnative.dev/docs/flatlist#props\"\u003eflatlist props\u003c/a\u003e                       |\n| listItemProps                |     -     |     [ListItemProps](#listitemprops)      | List item props contain `containerStyle`, `imageContainerStyle` and `imageProps`                       |\n| modalProps                   |     -     |                ModalProps                | Provide \u003ca href=\"https://reactnative.dev/docs/modal#props\"\u003eModal props\u003c/a\u003e                             |\n| modalBackgroundProps         |     -     |        `AnimateProps\u003cViewProps\u003e`         | Provide animated view props                                                                            |\n| modalBackgroundStyle         |     -     |        `AnimateStyle\u003cViewStyle\u003e`         | Modal background style                                                                                 |\n| modalHeaderProps             |     -     |  [ModalHeaderProps](#modalheaderprops)   | Modal header props contain `containerProps` and `containerStyle`                                       |\n| modalContentProps            |     -     | [ModalContentProps](#modalcontentprops)  | Modal content props contain `contentProps` and `contentStyle`                                          |\n| modalContentImageProps       |     -     |        `AnimateProps\u003cImageProps\u003e`        | Modal content \u003ca href=\"https://reactnative.dev/docs/image#props\"\u003eImage props\u003c/a\u003e                       |\n| modalFooterProps             |     -     |  [ModalFooterProps](#modalfooterprops)   | Modal footer props contain `thumbnailFlatListProps`, `footerContainerProps` and `footerContainerStyle` |\n| networkLoaderProps           |     -     |         `ActivityIndicatorProps`         | Provide \u003ca href=\"https://reactnative.dev/docs/activityindicator#props\"\u003eActivityIndicator props\u003c/a\u003e     |\n| networkImageProps            |     -     |               `ImageProps`               | Provide \u003ca href=\"https://reactnative.dev/docs/image#props\"\u003eImage props\u003c/a\u003e                             |\n\n---\n\n##### ListItemProps\n\n| Props               | Default |            Type            | Description           |\n| ------------------- | :-----: | :------------------------: | --------------------- |\n| containerStyle      |    -    |         ViewStyle          | Container style       |\n| imageContainerStyle |    -    | `AnimateStyle\u003cViewStyle\u003e`  | Image container style |\n| imageProps          |    -    | `AnimateProps\u003cImageProps\u003e` | Image Props           |\n\n---\n\n##### ModalHeaderProps\n\n| Props          | Default |           Type            | Description     |\n| -------------- | :-----: | :-----------------------: | --------------- |\n| containerProps |    -    | `AnimateProps\u003cViewProps\u003e` | Container props |\n| containerStyle |    -    | `AnimateStyle\u003cViewStyle\u003e` | Container style |\n\n---\n\n##### ModalContentProps\n\n| Props        | Default |           Type            | Description   |\n| ------------ | :-----: | :-----------------------: | ------------- |\n| contentProps |    -    | `AnimateProps\u003cViewProps\u003e` | Content props |\n| contentStyle |    -    | `AnimateStyle\u003cViewStyle\u003e` | Content style |\n\n---\n\n##### ModalFooterProps\n\n| Props                  | Default |           Type            | Description              |\n| ---------------------- | :-----: | :-----------------------: | ------------------------ |\n| thumbnailFlatListProps |    -    |   `FlatListProps\u003cany\u003e`    | Thumbnail flatlist props |\n| footerContainerProps   |    -    | `AnimateProps\u003cViewProps\u003e` | Container props          |\n| footerContainerStyle   |    -    | `AnimateStyle\u003cViewStyle\u003e` | Container style          |\n\n##### Know more about [ViewProps](https://reactnative.dev/docs/view#props), [ViewStyle](https://reactnative.dev/docs/view-style-props), [FlatListProps](https://reactnative.dev/docs/flatlist#props), [ModalProps](https://reactnative.dev/docs/modal#props), [ImageProps](https://reactnative.dev/docs/image#props)\n\n# Example\n\nA full working example project is here [Example](./example/src/App.tsx)\n\n```sh\nyarn\nyarn example ios   // For ios\nyarn example android   // For Android\n```\n\n## Find this library useful? ❤️\n\nSupport it by joining [stargazers](https://github.com/SimformSolutionsPvtLtd/react-native-photos-gallery/stargazers) for this repository.⭐\n\n## Bugs / Feature requests / Feedbacks\n\nFor bugs, feature requests, and discussion please use [GitHub Issues](https://github.com/SimformSolutionsPvtLtd/react-native-photos-gallery/issues/new?labels=bug\u0026late=BUG_REPORT.md\u0026title=%5BBUG%5D%3A), [GitHub New Feature](https://github.com/SimformSolutionsPvtLtd/react-native-photos-gallery/issues/new?labels=enhancement\u0026late=FEATURE_REQUEST.md\u0026title=%5BFEATURE%5D%3A), [GitHub Feedback](https://github.com/SimformSolutionsPvtLtd/react-native-photos-gallery/issues/new?labels=enhancement\u0026late=FEATURE_REQUEST.md\u0026title=%5BFEEDBACK%5D%3A)\n\n## 🤝 How to Contribute\n\nWe'd love to have you improve this library or fix a problem 💪\nCheck out our [Contributing Guide](CONTRIBUTING.md) for ideas on contributing.\n\n## Awesome Mobile Libraries\n\n- Check out our other [available awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries)\n\n## License\n\n- [MIT License](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-photos-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-photos-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-photos-gallery/lists"}