{"id":16193750,"url":"https://github.com/chilijung/react-native-image-page","last_synced_at":"2025-03-19T04:30:40.696Z","repository":{"id":86704713,"uuid":"97203102","full_name":"chilijung/react-native-image-page","owner":"chilijung","description":"react-native image-carousel with zoom-pan gestures and full-screen support, work on both iOS and Android","archived":false,"fork":false,"pushed_at":"2022-01-10T22:44:12.000Z","size":1077,"stargazers_count":20,"open_issues_count":7,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-28T15:18:07.952Z","etag":null,"topics":["carousel","gallery","image","image-gallery","image-slider","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chilijung.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-14T06:55:03.000Z","updated_at":"2024-12-26T23:20:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"b485b45e-053f-4642-8e5d-38dce8fd9dbe","html_url":"https://github.com/chilijung/react-native-image-page","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chilijung%2Freact-native-image-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chilijung%2Freact-native-image-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chilijung%2Freact-native-image-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chilijung%2Freact-native-image-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chilijung","download_url":"https://codeload.github.com/chilijung/react-native-image-page/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243968531,"owners_count":20376410,"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":["carousel","gallery","image","image-gallery","image-slider","react-native"],"created_at":"2024-10-10T08:16:28.825Z","updated_at":"2025-03-19T04:30:40.691Z","avatar_url":"https://github.com/chilijung.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-image-page\n\nreact-native image carousel, with zoom-pan gestures and full screen support.  Work on both iOS and Android\n\n## Install\n\n```\nnpm install react-native-image-page\n```\n\n## Demo\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      Android\n    \u003c/th\u003e\n    \u003cth\u003e\n      iOS\n    \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg src=\"./example/android.gif\" width=\"300\" style=\"float: left;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cimg src=\"./example/ios.gif\" width=\"300\" style=\"float: left;\"\u003e\n    \u003c/td\u003e\n  \u003ctr\u003e\n\u003c/table\u003e\n\n## Props\n\nMost of the props in `react-native-image-page` is inherit from https://github.com/Canner/react-native-carousel-view\n\n```js\ntype Props = {\n  hideIndicators: boolean, // Set to true to hide the indicators\n  indicatorColor: string, // Active indicator color\n  indicatorSize: number, // Indicator bullet size\n  inactiveIndicatorColor: string, // Inactive indicator color\n  indicatorAtBottom: boolean, // Set to false to show the indicators at the top\n  indicatorOffset: number, // Indicator relative position from top or bottom\n  indicatorText: string, // Active indicator content ( You can customize to use any Unicode character )\n  inactiveIndicatorText: string, // Inactive indicator content ( You can customize to use any Unicode character )\n  width: ?number, // the width of the carousel\n  height: number, // the height of the carousel\n  initialPage: number, // initial start page\n  indicatorSpace: number, // space between each indicator\n  animate: boolean, // Enable carousel autoplay\n  delay: number, // Set Animation delay between slides\n  loop: boolean, // Allow infinite looped animation. Depends on Prop {...animate} set to true.\n  contentContainerStyle?: {[attr: string]: any}, // content container style, in `Android` this will pass to ViewPagerAndroid style props, in `iOS` this will pass to ScrollView contentContainerStyle props.\n  children: any,\n  onPageChange?: (number) =\u003e void, // Called when the active page changes\n}\n```\n\nImageCarousel props\n\n```js\ntype ImageCarouselProps = {\n  images: {uri: string}[],\n  renderHeader: ({[key: string]: any}, number) =\u003e void,\n  renderFooter: ({[key: string]: any}, number) =\u003e void,\n}\n```\n\n## Example\n\n```js\n\nimport React, {Component} from 'react';\nimport {\n  AppRegistry,\n  View,\n} from 'react-native';\nimport ImageCarousel from 'react-native-image-page';\n\nexport default class example extends Component {\n  render() {\n    return (\n      \u003cView style={{\n        flex: 1,\n        justifyContent: 'center',\n        alignItems: 'center',\n      }}\u003e\n        \u003cImageCarousel\n          height={200}\n          delay={2000}\n          indicatorSize={10}\n          indicatorOffset={-20}\n          indicatorText=\"✽\"\n          indicatorColor=\"red\"\n          renderHeader={(datum, i) =\u003e \u003cText\u003eHeader Image {i}\u003c/Text\u003e}\n          renderFooter={(datum, i) =\u003e \u003cText\u003eFooter {i}\u003c/Text\u003e}\n          images={[{\n            uri: 'https://avatars3.githubusercontent.com/u/7250217?v=4\u0026s=200',\n          }, {\n            uri: 'https://avatars7.githubusercontent.com/u/1216029?v=4\u0026s=460',\n          }, {\n            uri: 'https://via.placeholder.com/350x150',\n          }, {\n            uri: 'https://via.placeholder.com/100x200',\n          }]}\n          /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nAppRegistry.registerComponent('example', () =\u003e example);\n\n```\n\n## See also\n\nbased on:\n\n- react-native carousel, support in both Android and iOS\n\nhttps://github.com/Canner/react-native-carousel-view\n\n## License\n\nApache 2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchilijung%2Freact-native-image-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchilijung%2Freact-native-image-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchilijung%2Freact-native-image-page/lists"}