{"id":16193809,"url":"https://github.com/chilijung/react-native-carousel-view","last_synced_at":"2026-02-28T17:32:21.391Z","repository":{"id":22708521,"uuid":"96883937","full_name":"chilijung/react-native-carousel-view","owner":"chilijung","description":"react-native carousel, support in both Android and iOS","archived":false,"fork":false,"pushed_at":"2023-01-12T11:00:51.000Z","size":1058,"stargazers_count":73,"open_issues_count":38,"forks_count":45,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-04-14T08:35:30.705Z","etag":null,"topics":["carousel","react-native","slider"],"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}},"created_at":"2017-07-11T11:01:33.000Z","updated_at":"2023-11-09T00:26:15.000Z","dependencies_parsed_at":"2023-01-14T13:17:52.007Z","dependency_job_id":null,"html_url":"https://github.com/chilijung/react-native-carousel-view","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/chilijung/react-native-carousel-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chilijung%2Freact-native-carousel-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chilijung%2Freact-native-carousel-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chilijung%2Freact-native-carousel-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chilijung%2Freact-native-carousel-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chilijung","download_url":"https://codeload.github.com/chilijung/react-native-carousel-view/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chilijung%2Freact-native-carousel-view/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29944767,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T13:49:17.081Z","status":"ssl_error","status_checked_at":"2026-02-28T13:48:50.396Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","react-native","slider"],"created_at":"2024-10-10T08:16:42.520Z","updated_at":"2026-02-28T17:32:21.369Z","avatar_url":"https://github.com/chilijung.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-carousel-view\n\nreact-native carousel, work on both `iOS` and `android`, test on RN \u003e= 0.45 (if this work on earlier version, please open an issue. And will add here)\n\n## Install\n\n```js\nnpm install react-native-carousel-view\n```\n\n**NOTE**: styling in iOS and Android is slightly [different](#difference)\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\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  onScrollBegin?: () =\u003e void, // Called when scroll begin\n  onScroll?: () =\u003e void, // Called while scrolling\n}\n```\n\ndefault props:\n\n```js\nstatic defaultProps = {\n  hideIndicators: false,\n  indicatorColor: '#000000',\n  indicatorSize: 20,\n  inactiveIndicatorColor: '#999999',\n  indicatorAtBottom: true,\n  indicatorOffset: 0,\n  indicatorText: '•',\n  inactiveIndicatorText: '•',\n  width: null,\n  height: 200,\n  initialPage: 0,\n  indicatorSpace: 10,\n  animate: true,\n  delay: 1000,\n  loop: true,\n}\n```\n\n## Examples\n\nSimple example (iOS and android is slightly different), see in [Difference](#Difference) section.\n\n```js\n\nimport React, {Component} from 'react';\nimport {\n  StyleSheet,\n  Text,\n  View,\n  AppRegistry,\n} from 'react-native';\nimport Carousel from 'react-native-carousel-view';\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        \u003cView style={styles.container}\u003e\n          \u003cCarousel\n            width={375}\n            height={300}\n            delay={2000}\n            indicatorAtBottom={false}\n            indicatorSize={20}\n            indicatorText=\"✽\"\n            indicatorColor=\"red\"\n            \u003e\n            \u003cView style={styles.contentContainer}\u003e\n              \u003cText\u003ePage 1\u003c/Text\u003e\n            \u003c/View\u003e\n            \u003cView style={styles.contentContainer}\u003e\n              \u003cText\u003ePage 2\u003c/Text\u003e\n            \u003c/View\u003e\n            \u003cView style={styles.contentContainer}\u003e\n              \u003cText\u003ePage 3\u003c/Text\u003e\n            \u003c/View\u003e\n          \u003c/Carousel\u003e\n        \u003c/View\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 0.5,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  contentContainer: {\n    borderWidth: 2,\n    borderColor: '#CCC',\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n});\n\n\nAppRegistry.registerComponent('example', () =\u003e example);\n```\n\n- Android: [Example](./example/index.android.js)\n\n- iOS: [Example](./example/index.ios.js)\n\n## Difference\n\nIn `Android` the carousel effect use `ViewPagerAndroid`, on the other hand, in `iOS` use `ScrollView`.  Due to the mechanism difference between iOS and Android so the styles settings is slightly different.\n\nThe `contentContainerStyle` props should be set in different settings if you want to have the same appearance in iOS and Android.\n\nIn iOS `contentContainerStyle` means the container of the child.\nThis is an example.\n\n```js\n\u003cCarousel\n  width={375}\n  height={300} // =====\u003e the container will be height 300\n  \u003e\n  \u003cView style={{height: 200, width: 300}}\u003e // ===\u003e child height 200, width 300. if the children's height and width is not set width and height from Carousel component will set to children.\n    \u003cText\u003ePage 1\u003c/Text\u003e\n  \u003c/View\u003e\n  \u003cView style={{height: 200, width: 300}}\u003e // ===\u003e child height 200, width 300\n    \u003cText\u003ePage 2\u003c/Text\u003e\n  \u003c/View\u003e\n  \u003cView style={{height: 200, width: 300}}\u003e // ===\u003e child height 200, width 300\n    \u003cText\u003ePage 3\u003c/Text\u003e\n  \u003c/View\u003e\n\u003c/Carousel\u003e\n```\n\nbut in Android it means it is the children's \nview style. According to the react-native docs https://facebook.github.io/react-native/docs/viewpagerandroid.html\n\n\u003e Container that allows to flip left and right between child views. Each child view of the ViewPagerAndroid will be treated as a separate page and will be stretched to fill the ViewPagerAndroid.\n\u003eIt is important all children are \u003cView\u003es and not composite components. You can set style properties like padding or backgroundColor for each child.\n\n```js\n\u003cCarousel\n  width={375}\n  height={300} // =====\u003e the container will be height 300\n  \u003e\n  \u003cView style={{height: 200}}\u003e // ===\u003e child height will still be 300, and width will automatically be 375 and can't be changed\n    \u003cText\u003ePage 1\u003c/Text\u003e\n  \u003c/View\u003e\n  \u003cView style={{height: 200}}\u003e // ===\u003e child height will still be 300, and width will automatically be 375 and can't be changed\n    \u003cText\u003ePage 2\u003c/Text\u003e\n  \u003c/View\u003e\n  \u003cView style={{height: 200}}\u003e // ===\u003e child height will still be 300, and width will automatically be 375 and can't be changed\n    \u003cText\u003ePage 3\u003c/Text\u003e\n  \u003c/View\u003e\n\u003c/Carousel\u003e\n```\n\n## Develop\n\ngo to `example` folder and enter `yarn install` and `yarn run haul`\n\nselect your platform:\n\n```\n➜  example git:(master) yarn run haul\nyarn run v0.27.5\n$ haul start\n? Select platform to bundle for (Use arrow keys)\n❯ ios - Serves iOS bundle\n  android - Serves Android bundle\n  all - Serves both platforms\n```\n\nand run `react-native run-ios` or `react-native run-android` to open simulators.\n\n## See also\n\n- https://github.com/Canner/react-native-image-page - a react-native image carousel, with zoom-pan gestures and full-screen support, work on both iOS and Android\n\n## NOTE\n\nthis repo is original from https://github.com/nick/react-native-carousel with lots of improvements.\n\n## License\n\nApache 2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchilijung%2Freact-native-carousel-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchilijung%2Freact-native-carousel-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchilijung%2Freact-native-carousel-view/lists"}