{"id":4124,"url":"https://github.com/merryjs/photo-viewer","last_synced_at":"2025-08-04T00:32:35.109Z","repository":{"id":22746194,"uuid":"97206723","full_name":"merryjs/photo-viewer","owner":"merryjs","description":"A photo  picture viewer for React Native ","archived":false,"fork":false,"pushed_at":"2023-07-18T23:00:41.000Z","size":164268,"stargazers_count":270,"open_issues_count":22,"forks_count":62,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-12-04T00:34:07.580Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://merryjs.github.io/photo-viewer/interfaces/merryphotoviewporps.html","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/merryjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-07-14T07:35:09.000Z","updated_at":"2024-11-25T06:44:55.000Z","dependencies_parsed_at":"2024-01-08T01:02:03.061Z","dependency_job_id":"e0d03c51-2d62-42ed-bcca-6006cf73db33","html_url":"https://github.com/merryjs/photo-viewer","commit_stats":{"total_commits":197,"total_committers":18,"mean_commits":"10.944444444444445","dds":"0.20812182741116747","last_synced_commit":"74553cff4976a982a0330256fb5f912442fef6d9"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merryjs%2Fphoto-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merryjs%2Fphoto-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merryjs%2Fphoto-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merryjs%2Fphoto-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/merryjs","download_url":"https://codeload.github.com/merryjs/photo-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576898,"owners_count":17939645,"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":[],"created_at":"2024-01-05T20:17:01.837Z","updated_at":"2024-12-07T07:31:30.389Z","avatar_url":"https://github.com/merryjs.png","language":"Java","funding_links":[],"categories":["Components","Java","Others"],"sub_categories":["UI","Viewer/Swiper/Carousel"],"readme":"# React Native Photo Viewer\n\n\u003e A photo viewer for react native build on top of [NYTPhotoViewer](https://github.com/NYTimes/NYTPhotoViewer) and [FrescoImageViewer](https://github.com/stfalcon-studio/FrescoImageViewer)\n\n**Key features:**\n\n- Double-tap to zoom\n- Captions and summaries\n- Support for multiple images\n- Interactive flick to dismiss\n- Animated zooming presentation\n- Support remote image and local image or images from Camera Roll\n- And more...\n\n## TOC\n\n- [React Native Photo Viewer](#react-native-photo-viewer)\n\t- [TOC](#toc)\n\t- [Getting started](#getting-started)\n\t\t- [Mostly automatic installation](#mostly-automatic-installation)\n\t\t- [Manual installation](#manual-installation)\n\t\t\t- [iOS](#ios)\n\t\t\t- [IOS Link Frameworks](#ios-link-frameworks)\n\t\t\t\t- [Manual link](#manual-link)\n\t\t\t\t- [CocoaPods](#cocoapods)\n\t\t\t\t- [Carthage](#carthage)\n\t\t\t- [Android](#android)\n\t\t\t- [Android targetSdkVersion configuration](#android-targetsdkversion-configuration)\n\t\t\t- [Android Fresco initialize](#android-fresco-initialize)\n\t- [Usage](#usage)\n\t- [Known issues](#known-issues)\n\t- [LICENSE](#license)\n\t\n\t\n\u003cimg width=\"375\" alt=\"20170728-110148@2x\" src=\"https://user-images.githubusercontent.com/433259/88470922-102fb600-cf35-11ea-92ae-b4cafe9ab9dd.png\"\u003e ![android](https://user-images.githubusercontent.com/433259/88471006-fb9fed80-cf35-11ea-9661-e1bd58de826f.gif)\n\n\n----\n\n\n**Note**\n\nIf your `react-native` version is under `0.57` please use version `2.x` otherwise please use the latest version\n\n\n\n\n## Getting started\n\n`$ npm install @merryjs/photo-viewer --save`\n\nor\n\n`$ yarn add @merryjs/photo-viewer`\n\n### Mostly automatic installation\n\n`$ react-native link @merryjs/photo-viewer`\n\nWhen you done this you still need link some frameworks into your xcode's embedded framework section,\nhere you have some choices please see [IOS link frameworks](#ios-link-frameworks) for more details\n\nand initialize Fresco Library please see [Android Fresco initialize](#android-fresco-initialize)\n\n### Manual installation\n\n#### iOS\n\n1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `@merryjs/photo-viewer` and add `MerryPhotoViewer.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libMerryPhotoViewer.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4. Run your project (`Cmd+R`)\u003c\n\n#### IOS Link Frameworks\n\n##### Manual link\n\nFor some reasons if you dont want use any package manager in your side then you can link frameworks as:\n\n- Go to your xcode project choose your project if you unsure it click (command + 1)\n- Choose target General panel find embedded binaries click + icon will display a dialog and then go to `node_modules/@merryjs/photo-viewer/ios/Carthage/Build/iOS/` folder add these frameworks into your xcode project. make sure `checked` **copy items if needed** and then It should looks like below,\n  \u003cimg width=\"1331\" alt=\"20170728-110148@2x\" src=\"https://user-images.githubusercontent.com/433259/88471015-1eca9d00-cf36-11ea-870a-3f95b96bc48e.png\"\u003e\n\n\n##### [CocoaPods](https://cocoapods.org/)\n\nAdd `pod \"NYTPhotoViewer\", \"~\u003e 2.0.0\"` in your `Podfile`\n\nIf you only use CocoaPods to define your react-native 3rd party libraries you can add this to you `Podfile` without linking to project as above:\n\n```ruby\npod 'MerryPhotoViewer', path: '../node_modules/@merryjs/photo-viewer'\n```\n\n##### [Carthage](https://github.com/Carthage/Carthage)\n\nIf you want use Carthage in your project and then you can add these dependencies into your Cartfile\n\n```\ngithub \"NYTimes/NYTPhotoViewer\"\n```\n\nand run `carthage update` when you done this you can link it like Manual link from node_modules describes, the only difference is use your carthage file instead of ours\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainActivity.java`\n\n- Add `import com.merryjs.PhotoViewer.MerryPhotoViewPackage;` to the imports at the top of the file\n- Add `new MerryPhotoViewPackage()` to the list returned by the `getPackages()` method\n\n2. Append the following lines to `android/settings.gradle`:\n   ```\n   include ':@merryjs/photo-viewer'\n   project(':@merryjs/photo-viewer').projectDir = new File(rootProject.projectDir, \t'../node_modules/@merryjs/photo-viewer/android')\n   ```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n   ```\n   compile project(':@merryjs/photo-viewer')\n   ```\n4. **Workaround for older gradles** please see https://github.com/merryjs/photo-viewer/issues/39\n\n   ```\n   include ':merryjs-photo-viewer'\n   project(':merryjs-photo-viewer').projectDir = new File(rootProject.projectDir,'../node_modules/@merryjs/photo-viewer/android')\n   ```\n\n   ```\n   compile project(':merryjs-photo-viewer')\n   ```\n\n#### Android targetSdkVersion configuration\n\nWe use a third part library and both of them are target to `targetSdkVersion 25`, so you need update your build.gradle to the same version or you will meet a build error\n\nThe configuration looks like: (`android/app/build.gradle`)\n\n```java\nandroid {\n compileSdkVersion 25\n buildToolsVersion \"25.0.3\"\n\n defaultConfig {\n     applicationId \"com.merryexamples\"\n     minSdkVersion 16\n     targetSdkVersion 25\n     versionCode 1\n     versionName \"1.0\"\n     ndk {\n         abiFilters \"armeabi-v7a\", \"x86\"\n     }\n\n     renderscriptTargetApi 25\n     renderscriptSupportModeEnabled true\n }\n\t// ...\n}\n```\n\nIf we have any better solution will update this section in the future.\n\n#### Android Fresco initialize\n\nWhen you have linked you need one more step for initialize the Fresco Library in `MainApplication.java`\n\n```java\n\nimport com.facebook.drawee.backends.pipeline.Fresco; // \u003c-- import on top of the file\n\n// ...\n\n@Override\npublic void onCreate() {\n\tsuper.onCreate();\n\tSoLoader.init(this, /* native exopackage */ false);\n\n\tFresco.initialize(this);\n\n}\n```\n\nIf your pictures are very large, you can initialize with these configurations in `MainApplication.java`\n\n```java\n// Add these imports on top of the file\nimport com.facebook.drawee.backends.pipeline.Fresco;\nimport com.facebook.imagepipeline.core.ImagePipelineConfig;\nimport com.facebook.imagepipeline.decoder.SimpleProgressiveJpegConfig;\n\n// ...\n\n@Override\npublic void onCreate() {\n\tsuper.onCreate();\n\tSoLoader.init(this, /* native exopackage */ false);\n\n  ImagePipelineConfig config = ImagePipelineConfig.newBuilder(this)\n    .setProgressiveJpegConfig(new SimpleProgressiveJpegConfig())\n    .setResizeAndRotateEnabledForNetwork(true)\n    .setDownsampleEnabled(true)\n    .build();\n  Fresco.initialize(this, config);\n}\n\n```\n\nThats all.\n\n## Usage\n\nThe most part from this package is setup the Native side dependencies, once you have done it before,\nyou can use it as below, very very easy to use:\n\n```javascript\nimport PhotoView from \"@merryjs/photo-viewer\";\n\n// local image\nconst cat = require(\"./cat-2575694_1920.jpg\");\n\nconst photos = [\n  {\n    source: {\n      uri:\n        \"https://images.pexels.com/photos/45170/kittens-cat-cat-puppy-rush-45170.jpeg?w=1260\u0026h=750\u0026auto=compress\u0026cs=tinysrgb\"\n    },\n    title: \"Flash End-of-Life\",\n    summary:\n      \"Adobe announced its roadmap to stop supporting Flash at the end of 2020. \",\n    // must be valid hex color or android will crashes\n    titleColor: \"#f90000\",\n    summaryColor: \"green\"\n  },\n  {\n    source: cat,\n    title: \"Local image\"\n  },\n\n  {\n    source: {\n      uri:\n        \"https://images.pexels.com/photos/142615/pexels-photo-142615.jpeg?w=1260\u0026h=750\u0026auto=compress\u0026cs=tinysrgb\"\n    }\n  },\n  {\n    source: {\n      uri:\n        \"https://images.pexels.com/photos/82072/cat-82072.jpeg?w=1260\u0026h=750\u0026auto=compress\u0026cs=tinysrgb\"\n    }\n  },\n  {\n    source: {\n      uri:\n        \"https://images.pexels.com/photos/248261/pexels-photo-248261.jpeg?w=1260\u0026h=750\u0026auto=compress\u0026cs=tinysrgb\"\n    }\n  },\n  {\n    source: {\n      uri: \"https://media.giphy.com/media/3o6vXWzHtGfMR3XoXu/giphy.gif\"\n    },\n    title: \"gif 1\"\n  }\n];\n\n\u003cPhotoView\n  visible={this.state.visible}\n  data={photos}\n  hideStatusBar={true}\n  initial={this.state.initial}\n  onDismiss={e =\u003e {\n    // don't forgot set state back.\n    this.setState({ visible: false });\n  }}\n/\u003e;\n```\n\nFor complete documentation please see https://merryjs.github.io/photo-viewer/interfaces/merryphotoviewporps.html\n\n## LICENSE\n\n```\nCopyright 2017 Merryjs.com\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n\thttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n\nDue to we use some third-part softwares and both of them are licensed under Apache 2.0 so do we.\n\n- [Photo Viewer](https://github.com/merryjs/photo-viewer/blob/master/LICENSE)\n- [NYTPhotoViewer](https://github.com/NYTimes/NYTPhotoViewer/blob/develop/LICENSE.md)\n- [FrescoImageViewer](https://github.com/stfalcon-studio/FrescoImageViewer#license)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerryjs%2Fphoto-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmerryjs%2Fphoto-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerryjs%2Fphoto-viewer/lists"}