{"id":13802709,"url":"https://github.com/ldn0x7dc/react-native-gallery","last_synced_at":"2025-05-13T13:32:41.007Z","repository":{"id":43415554,"uuid":"62110043","full_name":"ldn0x7dc/react-native-gallery","owner":"ldn0x7dc","description":"A pure JavaScript image gallery component for react-native apps with common gestures like pan, pinch and doubleTap, supporting both iOS and Android.","archived":false,"fork":false,"pushed_at":"2018-03-23T23:17:27.000Z","size":11615,"stargazers_count":333,"open_issues_count":42,"forks_count":113,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-09T03:01:48.324Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ldn0x7dc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-28T04:28:25.000Z","updated_at":"2025-05-07T03:32:42.000Z","dependencies_parsed_at":"2022-09-26T16:21:24.062Z","dependency_job_id":null,"html_url":"https://github.com/ldn0x7dc/react-native-gallery","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldn0x7dc%2Freact-native-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldn0x7dc%2Freact-native-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldn0x7dc%2Freact-native-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldn0x7dc%2Freact-native-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ldn0x7dc","download_url":"https://codeload.github.com/ldn0x7dc/react-native-gallery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253950303,"owners_count":21989337,"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-08-04T00:01:50.797Z","updated_at":"2025-05-13T13:32:39.914Z","avatar_url":"https://github.com/ldn0x7dc.png","language":"JavaScript","funding_links":[],"categories":["组件","JavaScript"],"sub_categories":["图形动画"],"readme":"# react-native-gallery\n\nA pure JavaScript image gallery component for react-native apps with common gestures like pan, pinch and doubleTap, supporting both iOS and Android.\n\nThis component aims to be (one of ) the best image viewer for react-native apps. Comparing with other gallery alike components, this one should be more elegant in following aspects: (mimics iOS system photo album app)\n\n* Gesture handle: besides common pan, pinch and doubleTap, this component does well in targeting foucs point( or pivot) when zoom-in and zoom-out.\n* Responder switch: the gesture responder switch is more flexible than any other component, that is, the scrollable container and the wrapped image children perform well in acquiring and releasing gesture responder from/to each other.\n\nThis component works on react-native **0.28+** and only supports remote images for now.\n\n![](Demo/demo.gif)\n\n\n\n## Install\n\n`npm install --save react-native-gallery@latest`\n\n\n\n## Documentaion\n\nQuite easy to use:\n\n```\nimport Gallery from 'react-native-gallery';\n...\n\n  render() {\n    return (\n      \u003cGallery\n        style={{flex: 1, backgroundColor: 'black'}}\n        images={[\n          'http://p10.qhimg.com/t019e9cf51692f735be.jpg',\n          'http://ww2.sinaimg.cn/mw690/714a59a7tw1dxqkkg0cwlj.jpg',\n          'http://www.bz55.com/uploads/allimg/150122/139-150122145421.jpg'\n        ]}\n      /\u003e\n    );\n  }\n```\n\nThis component utilizes **[@ldn0x7dc/react-native-view-pager](https://github.com/ldn0x7dc/react-native-view-pager)** as the scrollable container and **[react-native-transformable-image](https://github.com/ldn0x7dc/react-native-transformable-image)** as the wrapped image. \n\n#### Props\n\n* **images**: array, contains image urls\n* **initialPage**, **pageMargin**, **onPageSelected**, **onPageScrollStateChanged**, **onPageScroll**: inherited from **[@ldn0x7dc/react-native-view-pager](https://github.com/ldn0x7dc/react-native-view-pager)**. Check the link for more details.\n* **onSingleTapConfirmed**: Called after user single taped( not a double tap)\n* **onGalleryStateChanged**: function. (idle) =\u003e {}.\n\n\n\n\n### Add your custom views above image\n\nIt's a common practice to float a comment box or like button above the image. This component provides a convenient interface to implement this feature:\n\n- onSingleTapConfirmed(): a good time for you to display the responding floating view. \n- onGalleryStateChanged(idle): If *idle* is false, it's a good time for your to hide any floating views.\n\nCheck the Demo project for a simple demonstration.\n\n\n\n## Attention\n\nThis component is being actively developed but should be ready for production realease.\n\nIf you encounter any problem that seems unnormal, just create an issue or check out the latest release.\n\n\n## TODO\n\n* Dump off-screen images for better performance if needed","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fldn0x7dc%2Freact-native-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fldn0x7dc%2Freact-native-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fldn0x7dc%2Freact-native-gallery/lists"}