{"_id":"@agartha/react-native-photo-browser","_rev":"3-c998d00d9ba0e311acc0b6a04d9627f6","name":"@agartha/react-native-photo-browser","dist-tags":{"latest":"0.4.2"},"versions":{"0.4.1":{"name":"@agartha/react-native-photo-browser","version":"0.4.1","description":"Local and remote photo browser with captions, selections and grid view support for react native.","license":"MIT","keywords":["react","react-component","react-native","photo browser","image gallery","media gallery","ios","android"],"main":"lib/index.js","scripts":{},"repository":{"type":"git","url":"git+https://github.com/halilb/react-native-photo-browser.git"},"bugs":{"url":"https://github.com/halilb/react-native-photo-browser/issues"},"author":{"name":"Halil Bilir","email":"hbilir@gmail.com"},"homepage":"https://github.com/halilb/react-native-photo-browser#readme","dependencies":{"react-native-progress":"^3.2.0","prop-types":"15.5.10"},"gitHead":"44f0effea7253640537cb4cf93a109d44a0bf3f8","_id":"@agartha/react-native-photo-browser@0.4.1","_npmVersion":"5.6.0","_nodeVersion":"9.8.0","_npmUser":{"name":"kbrandwijk","email":"kim.brandwijk@gmail.com"},"dist":{"integrity":"sha512-NhuhbzzmGgU7rtgNjkBAT8MTc9Xo2jVWpYOnCsLYQnPVybASKdzrzdxQSCfSHHyI5xZfFh+LVl4iXD4M5Qj9dQ==","shasum":"ae070f8dfe86c7b9e323b6d2c3df35c1f4405a43","tarball":"https://registry.npmjs.org/@agartha/react-native-photo-browser/-/react-native-photo-browser-0.4.1.tgz","fileCount":47,"unpackedSize":146871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGHOP0RYebK9I0zA6uIuXYolq/Mirj4GIdxEaFuVcUHrAiEA3nfetBJTBTlSwoBrLLVs11fvCm2V198+lyFHKmvz5RA="}]},"maintainers":[{"name":"kbrandwijk","email":"kim.brandwijk@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-photo-browser_0.4.1_1522545515379_0.5509477781121144"},"_hasShrinkwrap":false},"0.4.2":{"name":"@agartha/react-native-photo-browser","version":"0.4.2","description":"Local and remote photo browser with captions, selections and grid view support for react native.","license":"MIT","keywords":["react","react-component","react-native","photo browser","image gallery","media gallery","ios","android"],"main":"lib/index.js","scripts":{},"repository":{"type":"git","url":"git+https://github.com/halilb/react-native-photo-browser.git"},"bugs":{"url":"https://github.com/halilb/react-native-photo-browser/issues"},"author":{"name":"Halil Bilir","email":"hbilir@gmail.com"},"homepage":"https://github.com/halilb/react-native-photo-browser#readme","dependencies":{"react-native-progress":"^3.2.0","prop-types":"15.5.10"},"gitHead":"44f0effea7253640537cb4cf93a109d44a0bf3f8","_id":"@agartha/react-native-photo-browser@0.4.2","_npmVersion":"5.6.0","_nodeVersion":"9.8.0","_npmUser":{"name":"kbrandwijk","email":"kim.brandwijk@gmail.com"},"dist":{"integrity":"sha512-8lYCz3VkXNZT7A/oOWjEAcLLaEPIDwFxi9RHVhuYR+YShQ6qkQAEuE16SWCMJDVjNRcllUsif+ldFVUDVi7Wjw==","shasum":"424459944cbbc9bb4e197700a6e43424257a4039","tarball":"https://registry.npmjs.org/@agartha/react-native-photo-browser/-/react-native-photo-browser-0.4.2.tgz","fileCount":47,"unpackedSize":146878,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvhz1etiTLqmDDMPHf0xu9cMFwgwrlVYZxIFskm1hANgIgCX46VNAmBPUa4Fd5p+/ZxVPnhmOCBXI29vVWEFr6UGc="}]},"maintainers":[{"name":"kbrandwijk","email":"kim.brandwijk@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-photo-browser_0.4.2_1522709656128_0.7137237342999727"},"_hasShrinkwrap":false}},"time":{"created":"2018-04-01T01:18:35.318Z","0.4.1":"2018-04-01T01:18:35.459Z","modified":"2022-04-04T11:53:57.114Z","0.4.2":"2018-04-02T22:54:16.187Z"},"maintainers":[{"name":"kbrandwijk","email":"kim.brandwijk@gmail.com"}],"description":"Local and remote photo browser with captions, selections and grid view support for react native.","homepage":"https://github.com/halilb/react-native-photo-browser#readme","keywords":["react","react-component","react-native","photo browser","image gallery","media gallery","ios","android"],"repository":{"type":"git","url":"git+https://github.com/halilb/react-native-photo-browser.git"},"author":{"name":"Halil Bilir","email":"hbilir@gmail.com"},"bugs":{"url":"https://github.com/halilb/react-native-photo-browser/issues"},"license":"MIT","readme":"# React Native Photo Browser\n\nA full screen image gallery with captions, selections and grid view support for react-native. Layout and API design are inspired by great [MWPhotoBrowser](https://github.com/mwaterfall/MWPhotoBrowser) library.\n\nThe component has both iOS and Android support.\n\n![](screenshots/photo-browser.gif)\n\n![](screenshots/screenshot-1.png)\n![](screenshots/screenshot-2.png)\n\n### Installation \n```npm install react-native-photo-browser --save```\n\n### Properties\n\n| Prop | Type | Description | Default |\n|---|---|---|---|\n|**`style`**|Style|Overrides default container style.|`null`|\n|**`mediaList`**|Array\\<Media\\>|List of [media objects](#media-object) to display.|`[]`|\n|**`initialIndex`**|Number|Sets the visible photo initially.|`0`|\n|**`alwaysShowControls`**|Boolean|Allows to control whether the bars and controls are always visible or whether they fade away to show the photo full.|`false`|\n|**`displayActionButton`**|Boolean|Show action button to allow sharing, copying, etc.|`false`|\n|**`displayNavArrows`**|Boolean|Whether to display left and right nav arrows on bottom toolbar.|`false`|\n|**`alwaysDisplayStatusBar`**|Boolean|Whether to display the OS Status Bar.|`false`|\n|**`displayTopBar`**|Boolean|Whether to display top bar.|`true`|\n|**`enableGrid`**|Boolean|Whether to allow the viewing of all the photo thumbnails on a grid.|`true`|\n|**`startOnGrid`**|Boolean|Whether to start on the grid of thumbnails instead of the first photo.|`false`|\n|**`displaySelectionButtons`**|Boolean|Whether selection buttons are shown on each image.|`false`|\n|**`useCircleProgress`**_iOS_|Boolean|Displays Progress.Circle instead of default Progress.Bar for full screen photos. Check [Progress](#progress-component) section for more info.|`false`|\n|**`onSelectionChanged`**|Function|Called when a media item is selected or unselected.|`(media, index, isSelected) => {}`|\n|**`onActionButton`**|Function|Called when action button is pressed for a photo. Your application should handle sharing process, please see [Sharing](#sharing) section for more information. If you don't provide this method, action button tap event will simply be ignored.|`(media, index) => {}`|\n|**`onBack`**|Function|Called when back button is tapped.|`() => {}`|\n|**`itemPerRow`**|Number|Sets images amount in grid row.|`3`|\n|**`onPhotoLongPress`**|Function|Called when a long press trigged on a photo.|`() => {}`|\n|**`delayPhotoLongPress`**|Number|The long press delay in `ms`.|`1000`|\n|**`square`**|Boolean|Displays the thumbnails as squares(same width, height).|`false`|\n|**`gridOffset`**|Number|Offset the width of the grid from the screen width.|`0`|\n|**`customTitle`**|Function|Custom title in full screen mode.|`(index, rowCount) => { return '' }`|\n\n### Media Object\n\n```js\nconst media = {\n  thumb: '', // thumbnail version of the photo to be displayed in grid view. actual photo is used if thumb is not provided\n  photo: '', // a remote photo or local media url\n  caption: '', // photo caption to be displayed\n  selected: true, // set the photo selected initially(default is false)\n};\n```\n\n\n### Progress Component\n\n#### Android\n\nBuilt-in [ActivityIndicator](https://facebook.github.io/react-native/docs/activityindicator.html) component is used for Android. Any additional configuration is not needed.\n\n#### iOS\n\n[react-native-progress](https://github.com/oblador/react-native-progress) component is used as progress indicator. The default progress component is `Progress.Bar`. You can also use `Progress.Circle` component by simply using `useCircleProgress` prop, and adding `ReactART` library to your Xcode project. For more information please check out [react-native-progress repo](https://github.com/oblador/react-native-progress#reactart-based-components) and [React Native documentation](http://facebook.github.io/react-native/docs/linking-libraries-ios.html#content).\n\n### Sharing\n\nI tried delivering sharing photo feature but it was complicated to provide for iOS and android out of the box. I now believe it's a better idea to separate sharing logic into another module. Please check out Example project to see a basic ActionSheetIOS implementation for iOS. You may also use available sharing libraries such as [react-native-activity-view](https://github.com/naoufal/react-native-activity-view) and [react-native-share](https://github.com/EstebanFuentealba/react-native-share).\n\n### Examples\n\nSee [PhotoBrowserExample.js](Example/PhotoBrowserExample.js) file.\n\nFollow those steps to run the example:\n\n1. Clone the repo `git clone https://github.com/halilb/react-native-photo-browser && cd react-native-photo-browser/Example`\n2. Install dependencies `npm install`\n3. Follow [official instructions](https://facebook.github.io/react-native/docs/getting-started.html) to run the example project in a simulator or device.\n\n### Roadmap\n- [x] Android support\n- [ ] Improve performance for bigger collections\n- [ ] Video support\n- [ ] Photo zoom\n- [ ] Zooming photos to fill the screen\n\n### Licence\n[MIT](http://opensource.org/licenses/mit-license.html)\n","readmeFilename":"README.md"}