{"id":25024934,"url":"https://github.com/pavelbabenko/react-native-awesome-gallery","last_synced_at":"2026-05-06T10:01:47.782Z","repository":{"id":43029813,"uuid":"344463110","full_name":"pavelbabenko/react-native-awesome-gallery","owner":"pavelbabenko","description":"Performant, native-like, and well-customizable gallery for React Native.","archived":false,"fork":false,"pushed_at":"2024-09-28T11:54:39.000Z","size":67145,"stargazers_count":553,"open_issues_count":21,"forks_count":59,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-12T00:01:49.887Z","etag":null,"topics":["android","expo","expo-sdk-40","gallery","image-gallery","image-viewer","ios","lightbox","pinch-to-zoom","react","react-native","reanimated2"],"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/pavelbabenko.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,"zenodo":null},"funding":{"github":"pavelbabenko"}},"created_at":"2021-03-04T12:14:53.000Z","updated_at":"2025-05-07T20:41:55.000Z","dependencies_parsed_at":"2023-08-28T17:46:23.455Z","dependency_job_id":"e4bd8221-719c-421a-a286-5577f97f30a6","html_url":"https://github.com/pavelbabenko/react-native-awesome-gallery","commit_stats":{"total_commits":100,"total_committers":13,"mean_commits":"7.6923076923076925","dds":"0.19999999999999996","last_synced_commit":"61e98b4c930594778a992e082fbe0c29ff303972"},"previous_names":["pavelbabenko/react-native-awesome-gallery","flair-dev/react-native-awesome-gallery"],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavelbabenko%2Freact-native-awesome-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavelbabenko%2Freact-native-awesome-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavelbabenko%2Freact-native-awesome-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavelbabenko%2Freact-native-awesome-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pavelbabenko","download_url":"https://codeload.github.com/pavelbabenko/react-native-awesome-gallery/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328384,"owners_count":22052632,"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":["android","expo","expo-sdk-40","gallery","image-gallery","image-viewer","ios","lightbox","pinch-to-zoom","react","react-native","reanimated2"],"created_at":"2025-02-05T16:33:41.731Z","updated_at":"2026-05-06T10:01:42.760Z","avatar_url":"https://github.com/pavelbabenko.png","language":"TypeScript","funding_links":["https://github.com/sponsors/pavelbabenko","https://www.buymeacoffee.com/pavelbabenko"],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/react-native-awesome-gallery.svg)](https://badge.fury.io/js/react-native-awesome-gallery)\n\n## Support\n\nIf you love using React Native Awesome Gallery and would like to show your appreciation, you can support the project by buying me a coffee. Your support helps me keep the project alive and continuously improving. Every little bit counts!\n\n[![\"Buy Me A Coffee\"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/pavelbabenko)\n\n\u003cdiv style=\"text-align: center;\"\u003e\n \u003ch1 align=\"center\"\u003eReact Native Awesome Gallery\u003c/h1\u003e\n \u003ch3 align=\"center\"\u003ePhotos gallery powered by Reanimated v3 and react-native-gesture-handler\u003c/h3\u003e\n\u003c/div\u003e\n\n\u003ctable style='width:100%;'\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003ch4 align='center'\u003eBasic usage\u003c/h4\u003e\u003c/td\u003e\n \u003ctd\u003e\u003ch4 align='center'\u003eWith toolbar\u003c/h4\u003e\u003c/td\u003e\n \u003ctd\u003e\u003ch4 align='center'\u003eLoop\u003c/h4\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\u003cimg width=\"100%\" height=\"480\" src=\"example-basic.gif\" alt=\"Gallery basic usage\"\u003e\u003c/td\u003e\n \u003ctd\u003e\u003cimg width=\"100%\" height=\"480\" src=\"example-toolbar.gif\" alt=\"Gallery with toolbar\"\u003e\u003c/td\u003e\n \u003ctd\u003e\u003cimg width=\"100%\" height=\"480\" src=\"example-loop.gif\" alt=\"Gallery loop\"\u003e\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/table\u003e\n\n## Supported features\n\n- Zoom to scale\n- Double tap to scale\n- Native iOS feeling (rubber effect, decay animation on pan gesture)\n- RTL support\n- Fully customizable\n- Both orientations (portrait + landscape)\n- Infinite list\n- Supports both iOS and Android.\n\n## Installation\n\n\u003e **_Note:_** Starting from v0.3.6 using Reanimated v3 is required\n\nFirst you have to follow installation instructions of [Reanimated v3](https://docs.swmansion.com/react-native-reanimated/) and [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/)\n\n```sh\nyarn add react-native-awesome-gallery\n```\n\nExpo is supported since SDK 40. More information [here](https://docs.expo.io/versions/latest/sdk/reanimated/)\n\n## Usage\n\nCheck out an [example folder](./example) for example with Expo Image\n\n```js\nimport Gallery from 'react-native-awesome-gallery';\n\n// ...\n\nconst images = ['https://image1', 'https://image2'];\n\nreturn (\n \u003cGallery\n data={images}\n onIndexChange={(newIndex) =\u003e {\n console.log(newIndex);\n }}\n /\u003e\n);\n```\n\n## Props\n\n| Prop | Description | Type | Default |\n|----------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------|------------------------------------------------------------------------|\n| data | Array of items to render | `T[]` | `undefined` |\n| renderItem? | Callback func which can be used to render custom image component, e.g `FastImage`. NOTE: You have to call `setImageDimensions({width, height})` parameter after image is loaded | `(renderItemInfo: {item: T, index: number, setImageDimensions: Function}) =\u003e React.ReactElement` | `undefined` |\n| keyExtractor? | Callback func which provides unique keys for items | `(item: T, index: number) =\u003e string or number` | Takes `id` or `key` or `_id` from `Item`, otherwise puts `Item` as key |\n| initialIndex? | The initial image index | `number` | `0` |\n| onIndexChange? | Is called when index of active item is changed | `(newIndex: number) =\u003e void` | `undefined` |\n| numToRender? | Amount of items rendered in gallery simultaneously | `number` | `5` |\n| emptySpaceWidth? | Width of empty space between items | `number` | `30` |\n| doubleTapScale? | Image scale when double tap is fired | `number` | `3` |\n| doubleTapInterval? | Time in milliseconds between single and double tap events | `number` | `500` |\n| maxScale? | Maximum scale user can set with gesture | `number` | `6` |\n| pinchEnabled? | Is pinch gesture enabled | `boolean` | `true` |\n| swipeEnabled? | Is pan gesture enabled | `boolean` | `true` |\n| doubleTapEnabled? | Is double tap enabled | `boolean` | `true` |\n| disableTransitionOnScaledImage? | Disables transition to next/previous image when scale \u003e 1 | `boolean` | `false` |\n| hideAdjacentImagesOnScaledImage? | Hides next and previous images when scale \u003e 1 | `boolean` | `false` |\n| disableVerticalSwipe? | Disables vertical swipe when scale == 1 | `boolean` | `false` |\n| disableSwipeUp? | Disables swipe up when scale == 1 | `boolean` | `false` |\n| loop? | Allows user to swipe infinitely. Works when `data.length \u003e 1` | `boolean` | `false` |\n| onScaleChange? | Is called when scale is changed | `(scale: number) =\u003e void` | `undefined` |\n| onScaleChangeRange? | Shows range of scale in which `onScaleChange` is called | `{start: number, end: number}` | `undefined` |\n| containerDimensions? | Dimensions object for the View that wraps gallery. | `{width: number, height: number}` | value returned from `useWindowDimensions()` hook. |\n| style? | Style of container | `ViewStyle` | `undefined` |\n\n## Events\n\n| Prop | Description | Type |\n|------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------|------------|\n| onSwipeToClose() | Fired when user swiped to top/bottom | `Function` |\n| onTranslationYChange(translationY: number, shouldClose: boolean) | `'worklet';` Fired when user is swiping vertically to close the gallery | `Worklet` |\n| onTap() | Fired when user tap on image | `Function` |\n| onDoubleTap(toScale: number) | Fired when user double tap on image | `Function` |\n| onLongPress() | Fired when long press is detected | `Function` |\n| onScaleStart(scale: number) | Fired when pinch gesture starts | `Function` |\n| onScaleEnd(scale: number) | Fired when pinch gesture ends. Use case: add haptic feedback when user finished gesture with `scale \u003e maxScale` or `scale \u003c 1` | `Function` |\n| onPanStart() | Fired when pan gesture starts | `Function` |\n\n## Methods\n\n```js\nimport Gallery, { GalleryRef } from 'react-native-awesome-gallery';\n\n// ...\n\nconst ref = useRef\u003cGalleryRef\u003e(null);\n```\n\n| Prop | Description | Type |\n|----------|---------------------------|--------------------------------------------------|\n| setIndex | Sets active index | `(newIndex: number, animated?: boolean) =\u003e void` |\n| reset | Resets scale, translation | `(animated?: boolean) =\u003e void` |\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpavelbabenko%2Freact-native-awesome-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpavelbabenko%2Freact-native-awesome-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpavelbabenko%2Freact-native-awesome-gallery/lists"}