{"id":17704994,"url":"https://github.com/dwqs/react-native-image-viewer","last_synced_at":"2025-03-30T10:31:26.088Z","repository":{"id":57110180,"uuid":"74252445","full_name":"dwqs/react-native-image-viewer","owner":"dwqs","description":"A pure JavaScript image viewer component for react-native apps with pan, pinch.etc, supporting both iOS and Android.","archived":true,"fork":false,"pushed_at":"2018-04-26T10:14:14.000Z","size":53078,"stargazers_count":67,"open_issues_count":5,"forks_count":21,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-27T17:25:59.030Z","etag":null,"topics":["image-preview","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/dwqs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-20T04:19:38.000Z","updated_at":"2025-01-14T09:47:01.000Z","dependencies_parsed_at":"2022-08-21T09:00:31.391Z","dependency_job_id":null,"html_url":"https://github.com/dwqs/react-native-image-viewer","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-native-image-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-native-image-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-native-image-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-native-image-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dwqs","download_url":"https://codeload.github.com/dwqs/react-native-image-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246307800,"owners_count":20756476,"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":["image-preview","react-native"],"created_at":"2024-10-24T22:05:49.025Z","updated_at":"2025-03-30T10:31:25.128Z","avatar_url":"https://github.com/dwqs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![npm-version](https://img.shields.io/npm/v/@dwqs/react-native-image-viewer.svg) ![license](https://img.shields.io/npm/l/@dwqs/react-native-image-viewer.svg)\n\n## Overview\nA pure JavaScript image viewer component for react-native apps with pan, pinch.etc, supporting both iOS and Android.\n\n\u003eReact Native required 0.33+\n\n## Show Cases\n\n#### On IOS:\n![viewer-ios](http://onasvjoyz.bkt.clouddn.com/viewer-ios.gif)\n\ngif: http://onasvjoyz.bkt.clouddn.com/viewer-ios.gif\n\n#### On Android:\n![viewer-android](http://onasvjoyz.bkt.clouddn.com/viewer-android.gif)\n\ngif: http://onasvjoyz.bkt.clouddn.com/viewer-android.gif\n\n## Installation\nFirst, install `react-native-image-viewer` from npm:\n\n```\nnpm i @dwqs/react-native-image-viewer --save\n```\n\nOr yarn:\n\n```\nyarn add @dwqs/react-native-image-viewer\n```\n\nThen use it:\n\n```\n// ES6 mudule\nimport ImageViewer from '@dwqs/react-native-image-viewer';\n```\n\n## Usage\nThere are some code from `example/App.js`:\n\n```\nlet imgsArr = [\n    'https://facebook.github.io/react/logo-og.png',\n    'http://scimg.jb51.net/allimg/160815/103-160Q509544OC.jpg',\n    'http://img.sc115.com/uploads1/sc/jpgs/1508/apic22412_sc115.com.jpg',\n    'http://h.hiphotos.baidu.com/zhidao/pic/item/0df431adcbef7609bca7d58a2adda3cc7cd99e73.jpg'\n];\n\ncloseViewer(){\n    this.setState({\n        shown:false,\n        curIndex:0\n    })\n}\n\n\u003cImageViewer shown={this.state.shown}\n             imageUrls={imgsArr}\n             onClose={this.closeViewer.bind(this)}\n             index={this.state.curIndex}\u003e\n\u003c/ImageViewer\u003e\n```\n\n## Configuration\n|Opthion|Description|isRequired|\n|:--:|:--:|:--:|\n|shown|whether the ImageViewer is show|required|\n|imageUrls|it's a array of images' url|required|\n|onClose|hidden the ImageViewer when click on ImageViewer|required|\n|index|the index of image url(in imageUrls) when open the ImageViewer|required|\n|failedUrl|the url for image preview loaded failure|not required|\n\n## Feature\n\n* pan to image toggling \n* double click for image zooming\n* pinch for zoom image\n* animation for image showing\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Freact-native-image-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdwqs%2Freact-native-image-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Freact-native-image-viewer/lists"}