{"_id":"@03balogun/react-native-images-preview","_rev":"3-779645c896cc4a35879ae8cde301711d","name":"@03balogun/react-native-images-preview","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@03balogun/react-native-images-preview","version":"0.0.1","keywords":["react","react-native","typescript","rn","photo","reanimated","component","react-component","iOS","android","gallery","pinch","pinch-to-zoom","mobile","image-zoom","image","photo preview","image preview"],"author":{"name":"Simform Solutions"},"license":"MIT","_id":"@03balogun/react-native-images-preview@0.0.1","maintainers":[{"name":"03balogun","email":"03balogun@gmail.com"}],"contributors":[],"homepage":"https://github.com/SimformSolutionsPvtLtd/react-native-images-preview#readme","dist":{"shasum":"07db73d2d5c85b93e96f7c86cef388734ae1206f","tarball":"https://registry.npmjs.org/@03balogun/react-native-images-preview/-/react-native-images-preview-0.0.1.tgz","fileCount":101,"integrity":"sha512-R0XcCEDgfIyuvf11c2tEImRvJD24GY1DX5w/GpnxGMP4dhBj9GEYanWcxBXqhqnxYkFsjmWT65YmFekXB13E0g==","signatures":[{"sig":"MEYCIQCYsV5RTX4JrDKfqompXefvPD46mEI4Iipqoq6c7zVDHQIhAKaykJw1AduRPcnj8TiDvuvMPsdYmnrH1bhxeDX6YEfj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":82830},"jest":{"preset":"react-native","setupFilesAfterEnv":[],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"modulePathIgnorePatterns":[]},"main":"lib/index","husky":{"hooks":{"pre-push":"yarn build && yarn test","pre-commit":"lint-staged"}},"types":"lib/index.d.ts","scripts":{"lint":"eslint . --ext .js,.jsx,.ts,.tsx","test":"jest","build":"rm -rf lib && tsc -p . && cp -R ./src/assets ./lib/ ","clean":"rm -rf node_modules","example":"yarn --cwd example","prepare":"husky install && yarn build","lint:fix":"eslint 'src/**/*.{js,jsx,ts,tsx}' -c .eslintrc --fix ","build:local":"yarn build && yarn pack"},"_npmUser":{"name":"03balogun","email":"03balogun@gmail.com"},"commitlint":{"extends":["@commitlint/config-conventional"]},"repository":{"url":"https://github.com/03balogun/react-native-images-preview","type":"git"},"description":"A React Native animated custom images preview component.","directories":{},"licenseText":"MIT License\n\nCopyright (c) 2023 Simform Solutions\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","lint-staged":{"src/**/*.{js,ts,tsx}":["eslint"]},"resolutions":{"@types/react":"*"},"eslintIgnore":["node_modules/","lib/"],"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^27.4.7","husky":"^8.0.1","react":"18.0.0","eslint":"^7.32.0","prettier":"^2.7.1","babel-jest":"^27.4.6","typescript":"4.7.4","@babel/core":"^7.12.9","@types/jest":"^27.4.0","lint-staged":"^11.1.2","react-native":"0.69.5","@babel/runtime":"^7.12.5","@commitlint/cli":"^16.1.0","@types/react-native":"^0.69.5","react-test-renderer":"18.0.0","@tsconfig/react-native":"^2.0.2","react-native-reanimated":"^3.0.0","@typescript-eslint/parser":"^5.29.0","@types/react-test-renderer":"^18.0.0","react-native-gesture-handler":"^2.9.0","@testing-library/react-native":"^9.0.0","@commitlint/config-conventional":"^16.0.0","metro-react-native-babel-preset":"^0.70.3","@typescript-eslint/eslint-plugin":"^5.29.0","eslint-plugin-simple-import-sort":"^7.0.0","@react-native-community/eslint-config":"^3.0.1"},"peerDependencies":{"react":"*","react-native":"*","react-native-reanimated":"^3.0.0","react-native-gesture-handler":"^2.9.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-images-preview_0.0.1_1716994335411_0.7419678053766667","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@03balogun/react-native-images-preview","version":"0.0.2","keywords":["react","react-native","typescript","rn","photo","reanimated","component","react-component","iOS","android","gallery","pinch","pinch-to-zoom","mobile","image-zoom","image","photo preview","image preview"],"author":{"name":"Simform Solutions"},"license":"MIT","_id":"@03balogun/react-native-images-preview@0.0.2","maintainers":[{"name":"03balogun","email":"03balogun@gmail.com"}],"contributors":[],"homepage":"https://github.com/SimformSolutionsPvtLtd/react-native-images-preview#readme","bugs":{"url":"https://github.com/03balogun/react-native-images-preview/issues"},"dist":{"shasum":"94f48d9c09bf9ffd3c110915754307494587eb52","tarball":"https://registry.npmjs.org/@03balogun/react-native-images-preview/-/react-native-images-preview-0.0.2.tgz","fileCount":90,"integrity":"sha512-+7l2Ff7jWsNeL2YTlIaZ1gyoI+8bUgBkKnK76RQjUds5yr9UhHdd9p1HoTOQeAqE5xh7ayaZXKPqpIejRjh5sA==","signatures":[{"sig":"MEUCIFi/tWaoeLOkNbZnd++U2IhOzEoPGkkZjpetz45pm87HAiEA4+6HpSrf/9BGFWXj79m/o975qyxo4QmnuTvrCS4Kz8Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":82823},"jest":{"preset":"react-native","setupFilesAfterEnv":[],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"modulePathIgnorePatterns":[]},"main":"lib/index","husky":{"hooks":{"pre-push":"yarn build && yarn test","pre-commit":"lint-staged"}},"types":"lib/index.d.ts","gitHead":"0701de4d7c17206c28bcb4852b01590161c3c210","scripts":{"lint":"eslint . --ext .js,.jsx,.ts,.tsx","test":"jest","build":"rm -rf lib && tsc -p . && cp -R ./src/assets ./lib/ ","clean":"rm -rf node_modules","example":"yarn --cwd example","prepare":"husky install && yarn build","lint:fix":"eslint 'src/**/*.{js,jsx,ts,tsx}' -c .eslintrc --fix ","build:local":"yarn build && yarn pack"},"_npmUser":{"name":"03balogun","email":"03balogun@gmail.com"},"commitlint":{"extends":["@commitlint/config-conventional"]},"repository":{"url":"git+https://github.com/03balogun/react-native-images-preview.git","type":"git"},"_npmVersion":"10.5.0","description":"A React Native animated custom images preview component.","directories":{},"lint-staged":{"src/**/*.{js,ts,tsx}":["eslint"]},"resolutions":{"@types/react":"*"},"_nodeVersion":"20.12.1","eslintIgnore":["node_modules/","lib/"],"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^27.4.7","husky":"^8.0.1","react":"18.0.0","eslint":"^7.32.0","prettier":"^2.7.1","babel-jest":"^27.4.6","typescript":"4.7.4","@babel/core":"^7.12.9","@types/jest":"^27.4.0","lint-staged":"^11.1.2","react-native":"0.69.5","@babel/runtime":"^7.12.5","@commitlint/cli":"^16.1.0","@types/react-native":"^0.69.5","react-test-renderer":"18.0.0","@tsconfig/react-native":"^2.0.2","react-native-reanimated":"~3.16.1","@typescript-eslint/parser":"^5.29.0","@types/react-test-renderer":"^18.0.0","react-native-gesture-handler":"~2.20.2","@testing-library/react-native":"^9.0.0","@commitlint/config-conventional":"^16.0.0","metro-react-native-babel-preset":"^0.70.3","@typescript-eslint/eslint-plugin":"^5.29.0","eslint-plugin-simple-import-sort":"^7.0.0","@react-native-community/eslint-config":"^3.0.1"},"peerDependencies":{"react":"*","react-native":"*","react-native-reanimated":"*","react-native-gesture-handler":"*"},"_npmOperationalInternal":{"tmp":"tmp/react-native-images-preview_0.0.2_1744878458175_0.11687211234199513","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@03balogun/react-native-images-preview","version":"0.0.3","description":"A React Native animated custom images preview component.","main":"lib/index","types":"lib/index.d.ts","contributors":[],"publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"author":{"name":"Simform Solutions"},"repository":{"type":"git","url":"git+https://github.com/03balogun/react-native-images-preview.git"},"homepage":"https://github.com/SimformSolutionsPvtLtd/react-native-images-preview#readme","keywords":["react","react-native","typescript","rn","photo","reanimated","component","react-component","iOS","android","gallery","pinch","pinch-to-zoom","mobile","image-zoom","image","photo preview","image preview"],"license":"MIT","scripts":{"prepare":"husky install && yarn build","clean":"rm -rf node_modules","build":"rm -rf lib && tsc -p . && cp -R ./src/assets ./lib/ ","lint":"eslint . --ext .js,.jsx,.ts,.tsx","lint:fix":"eslint 'src/**/*.{js,jsx,ts,tsx}' -c .eslintrc --fix ","build:local":"yarn build && yarn pack","test":"jest","example":"yarn --cwd example"},"peerDependencies":{"react":"*","react-native":"*","react-native-gesture-handler":"*","react-native-reanimated":"*"},"devDependencies":{"@babel/core":"^7.12.9","@babel/runtime":"^7.12.5","@commitlint/cli":"^16.1.0","@commitlint/config-conventional":"^16.0.0","@react-native-community/eslint-config":"^3.0.1","@testing-library/react-native":"^9.0.0","@tsconfig/react-native":"^2.0.2","@types/jest":"^27.4.0","@types/react-native":"^0.69.5","@types/react-test-renderer":"^18.0.0","@typescript-eslint/eslint-plugin":"^5.29.0","@typescript-eslint/parser":"^5.29.0","babel-jest":"^27.4.6","eslint":"^7.32.0","eslint-plugin-simple-import-sort":"^7.0.0","husky":"^8.0.1","jest":"^27.4.7","lint-staged":"^11.1.2","metro-react-native-babel-preset":"^0.70.3","prettier":"^2.7.1","react":"18.0.0","react-native":"0.69.5","react-native-gesture-handler":"~2.20.2","react-native-reanimated":"~3.16.1","react-test-renderer":"18.0.0","typescript":"4.7.4"},"husky":{"hooks":{"pre-commit":"lint-staged","pre-push":"yarn build && yarn test"}},"lint-staged":{"src/**/*.{js,ts,tsx}":["eslint"]},"resolutions":{"@types/react":"*"},"jest":{"preset":"react-native","moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupFilesAfterEnv":[],"modulePathIgnorePatterns":[]},"eslintIgnore":["node_modules/","lib/"],"commitlint":{"extends":["@commitlint/config-conventional"]},"_id":"@03balogun/react-native-images-preview@0.0.3","gitHead":"0701de4d7c17206c28bcb4852b01590161c3c210","bugs":{"url":"https://github.com/03balogun/react-native-images-preview/issues"},"_nodeVersion":"23.11.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-h8nLQUlYlKwf3bIlCPPNfS4ArxAqnP5LPIIZo12+ypNl01uWnKtNzUHdK+mIhN6pk61+LPBcl47ra1FFANPm/Q==","shasum":"33a5545ee4090f3132f754c4f3cacd39d2e7158b","tarball":"https://registry.npmjs.org/@03balogun/react-native-images-preview/-/react-native-images-preview-0.0.3.tgz","fileCount":90,"unpackedSize":82823,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCH19GSMNEiXr1QHmzND6ukp4qrrwh8OjR7iy6OncvX0UCIQDKva5Wx6dtwH53dG8n1SJlRCoqVbXfmNHZpwnajvJZuw=="}]},"_npmUser":{"name":"03balogun","email":"03balogun@gmail.com"},"directories":{},"maintainers":[{"name":"03balogun","email":"03balogun@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-images-preview_0.0.3_1753634249398_0.5840571256120048"},"_hasShrinkwrap":false}},"time":{"created":"2024-05-29T14:52:15.311Z","modified":"2025-07-27T16:37:29.761Z","0.0.1":"2024-05-29T14:52:15.579Z","0.0.2":"2025-04-17T08:27:38.339Z","0.0.3":"2025-07-27T16:37:29.595Z"},"bugs":{"url":"https://github.com/03balogun/react-native-images-preview/issues"},"author":{"name":"Simform Solutions"},"license":"MIT","homepage":"https://github.com/SimformSolutionsPvtLtd/react-native-images-preview#readme","keywords":["react","react-native","typescript","rn","photo","reanimated","component","react-component","iOS","android","gallery","pinch","pinch-to-zoom","mobile","image-zoom","image","photo preview","image preview"],"repository":{"type":"git","url":"git+https://github.com/03balogun/react-native-images-preview.git"},"description":"A React Native animated custom images preview component.","contributors":[],"maintainers":[{"name":"03balogun","email":"03balogun@gmail.com"}],"readme":"![ImagesPreview - Simform](./assets/reactNativeImagePreview.gif)\n\n# react-native-images-preview\n\n## [![npm version](https://img.shields.io/badge/npm%20package-0.0.1-orange)](https://www.npmjs.org/package/react-native-images-preview) [![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 an image preview built with pure JavaScript and leveraging React Native Reanimated and GesturesHandler, enabling full-screen image previewing and zooming via double-tap and pinch gestures for effortless integration into applications.\n\nOur library is designed to be highly customizable, allowing developers to tailor it to their specific needs, such as changing the colors, styles, and other visual elements. Whether you're an Android or iOS user, our library is compatible with both platform, guaranteeing optimal performance.\n\n## 🎬 Preview\n\n|               Simple                |               SwipeDown Close               |\n| :---------------------------------: | :-----------------------------------------: |\n| ![alt Default](./assets/simple.gif) | ![alt Default](./assets/swipeDownClose.gif) |\n\n|             DoubleTap Zoom             |               Pinch Zoom               |\n| :------------------------------------: | :------------------------------------: |\n| ![alt Default](./assets/doubleTap.gif) | ![alt Default](./assets/pinchZoom.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-images-preview in your React Native project:\n\n### Installation\n\n#### 1. Install the package\n\nUsing `npm`:\n\n```sh\nnpm install react-native-images-preview react-native-reanimated react-native-gesture-handler\n```\n\nUsing `yarn`:\n\n```sh\nyarn add react-native-images-preview react-native-reanimated react-native-gesture-handler\n```\n\n##### 2. Install cocoapods in the ios project\n\n```sh\ncd ios && pod install\n```\n\n> Note: Make sure to add Reanimated's babel plugin to your`babel.config.js`\n\n```sh\nmodule.exports = {\n      ...\n      plugins: [\n          ...\n          'react-native-reanimated/plugin',\n      ],\n  };\n```\n\n> Note: For React Native 0.61 or greater, add react-native-gesture-handler in index.js file.\n\n```sh\nimport 'react-native-gesture-handler';\n```\n\n##### Know more about [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated) and [react-native-gesture-handler](https://www.npmjs.com/package/react-native-gesture-handler)\n\n## Usage\n\n```jsx\nimport React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { ImagePreview } from 'react-native-images-preview';\nimport { images } from './assets';\n\nconst App = () => {\n  return (\n    <View style={styles.screen}>\n      <ImagePreview\n        imageSource={images.forest}\n        imageStyle={styles.imageStyle}\n      />\n    </View>\n  );\n};\n\nexport default App;\n\nconst styles = StyleSheet.create({\n  screen: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  imageStyle: {\n    height: 150,\n    width: 250,\n  },\n});\n```\n\n#### 🎬 Preview\n\n![alt Default](./assets/demo.gif)\n\n## Properties\n\n| Props                 | Default |          Type           | Description                                                                                          |\n|:----------------------| :-----: | :---------------------: |:-----------------------------------------------------------------------------------------------------|\n| **imageSource**       |    -    |   ImageSourcePropType   | Source of image                                                                                      |\n| **imageStyle**        |    -    | `StyleProp<ImageStyle>` | Styling of image                                                                                     |\n| imageProps            |    -    |       ImageProps        | Provide <a href=\"https://reactnative.dev/docs/image#props\"> image props </a>                         |\n| swipeDownCloseEnabled |  true   |         boolean         | Enable/Disable swipe down to close modal                                                             |\n| doubleTapZoomEnabled  |  true   |         boolean         | Enable/Disable double tap to zoom                                                                    |\n| pinchZoomEnabled      |  true   |         boolean         | Enable/Disable pinch to zoom                                                                         |\n| renderHeader          |    -    |        function         | Call back function to render custom header and provide `close()` in argument                         |\n| renderFooter          |    -    |        function         | Call back function to render custom footer and provide `close()` in argument                         |\n| renderImageLoader     |    -    |        function         | Call back function to render custom image loader                                                     |\n| errorImageSource      |    -    |   ImageSourcePropType   | Source of error image                                                                                |\n| imageLoaderProps      |    -    | ActivityIndicatorProps  | Provide <a href=\"https://reactnative.dev/docs/activityindicator#props\"> ActivityIndicator props </a> |\n\n##### Know more about [ImageProps](https://reactnative.dev/docs/image#props), [ActivityIndicatorProps](https://reactnative.dev/docs/activityindicator#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-images-preview/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-images-preview/issues/new?labels=bug&late=BUG_REPORT.md&title=%5BBUG%5D%3A), [GitHub New Feature](https://github.com/SimformSolutionsPvtLtd/react-native-images-preview/issues/new?labels=enhancement&late=FEATURE_REQUEST.md&title=%5BFEATURE%5D%3A), [GitHub Feedback](https://github.com/SimformSolutionsPvtLtd/react-native-images-preview/issues/new?labels=enhancement&late=FEATURE_REQUEST.md&title=%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","readmeFilename":"README.md"}