{"_id":"@benschac/react-native-awesome-gallery","_rev":"2-1566595d3d2234311bf00125ac6da75b","name":"@benschac/react-native-awesome-gallery","dist-tags":{"latest":"0.4.4"},"versions":{"0.4.3":{"name":"@benschac/react-native-awesome-gallery","version":"0.4.3","keywords":["react-native","ios","android"],"author":{"url":"https://github.com/benschac","name":"benschac","email":"benschac@gmail.com"},"license":"MIT","_id":"@benschac/react-native-awesome-gallery@0.4.3","maintainers":[{"name":"benschac","email":"benschac@gmail.com"}],"homepage":"https://github.com/benschac/react-native-awesome-gallery#readme","bugs":{"url":"https://github.com/benschac/react-native-awesome-gallery/issues"},"dist":{"shasum":"34f62a095e7baf69f50a59e9f5383dbe4812c6f0","tarball":"https://registry.npmjs.org/@benschac/react-native-awesome-gallery/-/react-native-awesome-gallery-0.4.3.tgz","fileCount":33,"integrity":"sha512-43daWrhFPfYSw81keWTP3ybadScQXKBeVeVR9Sc3gZurCI2pow9Jy0xIllqZMhg4eex+/6LAnKjQkZFDwuZivw==","signatures":[{"sig":"MEUCIETZwPjbxwlMGILPFJNQFNJIOJp+XdBJoH1/DXNfC3taAiEAxeO24wKfTJmRgxRvEEfVgXZD/1oOI6gwpeN/wSGmb7Y=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":271306},"jest":{"preset":"react-native","modulePathIgnorePatterns":["/example/node_modules","/lib/"]},"main":"lib/commonjs/index","husky":{"hooks":{"pre-commit":"yarn lint && yarn typescript"}},"types":"lib/typescript/index.d.ts","module":"lib/module/index","source":"src/index","gitHead":"ec2e81b5c588005f8ebb84922db4ce755ebfd4b6","scripts":{"lint":"eslint \"**/*.{js,ts,tsx}\"","pods":"cd example && pod-install --quiet","test":"jest","example":"yarn --cwd example","prepare":"bob build","release":"release-it","bootstrap":"yarn example && yarn && yarn pods","typescript":"tsc --noEmit"},"_npmUser":{"name":"benschac","email":"benschac@gmail.com"},"prettier":{"useTabs":false,"tabWidth":2,"quoteProps":"consistent","singleQuote":true,"trailingComma":"es5"},"release-it":{"git":{"tagName":"v${version}","commitMessage":"chore: release ${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":"angular"}}},"repository":{"url":"git+https://github.com/benschac/react-native-awesome-gallery.git","type":"git"},"_npmVersion":"11.8.0","description":"Awesome gallery powered by Reanimated v4","directories":{},"_nodeVersion":"22.17.1","eslintConfig":{"root":true,"rules":{"prettier/prettier":["error",{"useTabs":false,"tabWidth":2,"quoteProps":"consistent","singleQuote":true,"trailingComma":"es5"}],"eslint-comments/no-unlimited-disable":"off"},"extends":["@react-native-community","prettier"]},"eslintIgnore":["node_modules/","lib/"],"react-native":"src/index","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.0.1","husky":"^4.2.5","react":"19.2.0","eslint":"^7.2.0","prettier":"^2.0.5","release-it":"^14.2.2","typescript":"^5.9.2","@babel/core":"^7.26.0","@types/jest":"^26.0.0","pod-install":"^0.1.0","@types/react":"^19.2.14","react-native":"0.83.2","react-native-worklets":"0.7.2","eslint-config-prettier":"^7.0.0","eslint-plugin-prettier":"^3.1.3","react-native-reanimated":"4.2.1","react-native-builder-bob":"^0.18.1","react-native-gesture-handler":"~2.30.0","@commitlint/config-conventional":"^11.0.0","@release-it/conventional-changelog":"^2.0.0","@react-native-community/eslint-config":"^2.0.0"},"peerDependencies":{"react":"*","react-native":"*","react-native-worklets":">=0.7.0 <0.9.0","react-native-reanimated":"^4.2.0","react-native-gesture-handler":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-awesome-gallery_0.4.3_1774462531005_0.8038697710830798","host":"s3://npm-registry-packages-npm-production"},"react-native-builder-bob":{"output":"lib","source":"src","targets":["commonjs","module",["typescript",{"project":"tsconfig.build.json"}]]}},"0.4.4":{"name":"@benschac/react-native-awesome-gallery","version":"0.4.4","description":"Awesome gallery powered by Reanimated v4","main":"lib/commonjs/index","module":"lib/module/index","types":"lib/typescript/index.d.ts","react-native":"src/index","source":"src/index","scripts":{"test":"jest","typescript":"tsc --noEmit","lint":"eslint \"**/*.{js,ts,tsx}\"","prepare":"bob build","pack:dry-run":"npm pack --dry-run --cache .npm-cache","publish:npm":"npm publish --access public --cache .npm-cache","publish:dry-run":"npm publish --dry-run --access public --cache .npm-cache","release":"release-it","release:npm":"npm_config_cache=.npm-cache release-it --no-github.release","release:npm:dry":"npm_config_cache=.npm-cache release-it --dry-run --ci --npm.skipChecks --no-github.release --no-git.requireCleanWorkingDir","example":"yarn --cwd example","pods":"cd example && pod-install --quiet","bootstrap":"yarn example && yarn && yarn pods"},"keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/benschac/react-native-awesome-gallery.git"},"author":{"name":"benschac","email":"benschac@gmail.com","url":"https://github.com/benschac"},"license":"MIT","bugs":{"url":"https://github.com/benschac/react-native-awesome-gallery/issues"},"homepage":"https://github.com/benschac/react-native-awesome-gallery#readme","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"devDependencies":{"@babel/core":"^7.26.0","@commitlint/config-conventional":"^11.0.0","@react-native-community/eslint-config":"^2.0.0","@release-it/conventional-changelog":"^2.0.0","@types/jest":"^26.0.0","@types/react":"^19.2.14","eslint":"^7.2.0","eslint-config-prettier":"^7.0.0","eslint-plugin-prettier":"^3.1.3","husky":"^4.2.5","jest":"^26.0.1","pod-install":"^0.1.0","prettier":"^2.0.5","react":"19.2.0","react-native":"0.83.2","react-native-builder-bob":"^0.18.1","react-native-gesture-handler":"~2.30.0","react-native-reanimated":"4.2.1","react-native-worklets":"0.7.2","release-it":"^14.2.2","typescript":"^5.9.2"},"peerDependencies":{"react":"*","react-native":"*","react-native-gesture-handler":"^2.0.0","react-native-reanimated":"^4.2.0","react-native-worklets":">=0.7.0 <0.9.0"},"jest":{"preset":"react-native","modulePathIgnorePatterns":["/example/node_modules","/lib/"]},"husky":{"hooks":{"pre-commit":"yarn lint && yarn typescript"}},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":"angular"}}},"eslintConfig":{"root":true,"extends":["@react-native-community","prettier"],"rules":{"prettier/prettier":["error",{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false}],"eslint-comments/no-unlimited-disable":"off"}},"eslintIgnore":["node_modules/","lib/"],"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"react-native-builder-bob":{"source":"src","output":"lib","targets":["commonjs","module",["typescript",{"project":"tsconfig.build.json"}]]},"gitHead":"f3a7c1c885ec60444cb34e8cd52f61a197553209","_id":"@benschac/react-native-awesome-gallery@0.4.4","_nodeVersion":"22.17.1","_npmVersion":"11.8.0","dist":{"integrity":"sha512-9Ouj+uHusvsqnYQGTkFOC/dv949Mw8MQVfKZOEfgi2YTXwUj3WhC6We8HwUg2sqWjfwDrSh06K2UWNm/FhmoQA==","shasum":"cf41478589f9e8bdfdd793e7c1a748af24caf290","tarball":"https://registry.npmjs.org/@benschac/react-native-awesome-gallery/-/react-native-awesome-gallery-0.4.4.tgz","fileCount":33,"unpackedSize":272232,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCbqHklrfshhAWEyEt34aBckrGpuJ+02nKrWfj0GJtdaAIgUZcW79ufDPFO5+2/fXuglkD+APuH1YKdjeA36QRVJw8="}]},"_npmUser":{"name":"benschac","email":"benschac@gmail.com"},"directories":{},"maintainers":[{"name":"benschac","email":"benschac@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-awesome-gallery_0.4.4_1775135709746_0.3567073764887967"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-25T18:15:30.942Z","modified":"2026-04-02T13:15:09.998Z","0.4.3":"2026-03-25T18:15:31.168Z","0.4.4":"2026-04-02T13:15:09.895Z"},"bugs":{"url":"https://github.com/benschac/react-native-awesome-gallery/issues"},"author":{"name":"benschac","email":"benschac@gmail.com","url":"https://github.com/benschac"},"license":"MIT","homepage":"https://github.com/benschac/react-native-awesome-gallery#readme","keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/benschac/react-native-awesome-gallery.git"},"description":"Awesome gallery powered by Reanimated v4","maintainers":[{"name":"benschac","email":"benschac@gmail.com"}],"readme":"[![npm version](https://badge.fury.io/js/%40benschac%2Freact-native-awesome-gallery.svg)](https://badge.fury.io/js/%40benschac%2Freact-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\n
\n

React Native Awesome Gallery

\n

Photos gallery powered by Reanimated v4 and react-native-gesture-handler

\n
\n\n\n \n \n \n \n \n \n \n \n \n \n

Basic usage

With toolbar

Loop

\"Gallery\"Gallery\"Gallery
\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> **_Note:_** This package targets Reanimated 4 and the React Native New Architecture.\n\nFirst follow the installation instructions for\n[React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/)\nand [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/).\n\nMake sure your app also installs `react-native-worklets` and follows the\nofficial\n[Reanimated 4 installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/).\n\n```sh\nyarn add @benschac/react-native-awesome-gallery\n```\n\nExpo SDK 55 is supported by the example app in this repository. More generally,\nmake sure your Expo SDK and React Native version are compatible with the official\n[Reanimated 4 support matrix](https://docs.swmansion.com/react-native-reanimated/docs/guides/compatibility/)\nand New Architecture requirements.\n\n## Usage\n\nCheck out an [example folder](./example) for example with Expo Image\n\n```js\nimport Gallery from '@benschac/react-native-awesome-gallery';\n\n// ...\n\nconst images = ['https://image1', 'https://image2'];\n\nreturn (\n {\n console.log(newIndex);\n }}\n />\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}) => React.ReactElement` | `undefined` |\n| keyExtractor? | Callback func which provides unique keys for items | `(item: T, index: number) => 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) => 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 > 1 | `boolean` | `false` |\n| hideAdjacentImagesOnScaledImage? | Hides next and previous images when scale > 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 > 1` | `boolean` | `false` |\n| onScaleChange? | Is called when scale is changed | `(scale: number) => 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) | Fired when user is swiping vertically to close the gallery | `Function` |\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 > maxScale` or `scale < 1` | `Function` |\n| onPanStart() | Fired when pan gesture starts | `Function` |\n\n## Methods\n\n```js\nimport Gallery, { GalleryRef } from '@benschac/react-native-awesome-gallery';\n\n// ...\n\nconst ref = useRef(null);\n```\n\n| Prop | Description | Type |\n|----------|---------------------------|--------------------------------------------------|\n| setIndex | Sets active index | `(newIndex: number, animated?: boolean) => void` |\n| reset | Resets scale, translation | `(animated?: boolean) => void` |\n\n## License\n\nMIT\n","readmeFilename":"README.md"}