{"id":27125365,"url":"https://github.com/namlehoangdev/react-native-anchor-carousel","last_synced_at":"2025-04-07T14:52:53.978Z","repository":{"id":34910403,"uuid":"188382177","full_name":"namlehoangdev/react-native-anchor-carousel","owner":"namlehoangdev","description":"A simple swipeable carousel for React Native which anchor two side of list.","archived":false,"fork":false,"pushed_at":"2022-09-18T10:33:07.000Z","size":8492,"stargazers_count":124,"open_issues_count":8,"forks_count":30,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-09T21:27:09.032Z","etag":null,"topics":["anchor","carousel","flatlist","paging","scrollview","swipable","swiper"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-anchor-carousel","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/namlehoangdev.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":"2019-05-24T08:19:19.000Z","updated_at":"2024-08-07T04:08:22.000Z","dependencies_parsed_at":"2022-08-08T02:16:09.132Z","dependency_job_id":null,"html_url":"https://github.com/namlehoangdev/react-native-anchor-carousel","commit_stats":null,"previous_names":["lehoangnam97/react-native-anchor-carousel"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/namlehoangdev%2Freact-native-anchor-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/namlehoangdev%2Freact-native-anchor-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/namlehoangdev%2Freact-native-anchor-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/namlehoangdev%2Freact-native-anchor-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/namlehoangdev","download_url":"https://codeload.github.com/namlehoangdev/react-native-anchor-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247675615,"owners_count":20977376,"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":["anchor","carousel","flatlist","paging","scrollview","swipable","swiper"],"created_at":"2025-04-07T14:52:53.213Z","updated_at":"2025-04-07T14:52:53.965Z","avatar_url":"https://github.com/namlehoangdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-anchor-carousel\n----\n[![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger)\n\nA simple swipeable carousel for React Native which anchor two side of list.\n  \n\n### Installation \nInstall the dependency.\n```sh\n$ npm install react-native-anchor-carousel \n```\n```sh\n$ yarn add react-native-anchor-carousel \n```\n\\\nFor older version, install **3.1.2**\n```sh\n$ npm install react-native-anchor-carousel@3.1.2\n```\n```sh\n$ yarn add react-native-anchor-carousel@3.1.2 \n```\n\n### Example\n\n__**[Expo snack demo here](https://snack.expo.io/@lehoangnamuit/react-native-anchor-carousel)**__\n\n![](https://i.imgur.com/FDRMGZS.gif)\n![](https://i.imgur.com/ZPoSTFG.gif)   \n![](https://i.imgur.com/bzRIiTG.gif)\n\n__**[full example here](https://github.com/lehoangnam97/react-native-anchor-carousel/tree/master/example)**__\n\n```javascript\nimport Carousel from 'react-native-anchor-carousel';\nconst {width: windowWidth} = Dimensions.get('window');\nconst styles = StyleSheet.create({\n carousel: {\n  flexGrow: 0,\n  height: 150,\n }\n});\n```\n\n\\\n**Hook Component version:**\n```javascript\nconst carouselRef = React.useRef(null);\nrenderItem = ({item, index}) =\u003e {\n return (\n         \u003cTouchableOpacity\n                 style={styles.item}\n                 onPress={() =\u003e {\n                  carouselRef.current.scrollToIndex(index);\n                 }}\u003e\n          ...\n         \u003c/TouchableOpacity\u003e\n );\n}\nreturn (\u003cCarousel\n        ref={carouselRef}\n        data={Array(3).fill(0)}\n        renderItem={renderItem}\n        style={styles.carousel}\n        itemWidth={windowWidth * 0.8}\n        containerWidth={windowWidth}\n        separatorWidth={0}\n/\u003e)\n```\n \n\\\n**Traditional Class Component version:**\n \n```javascript\nrenderItem = ({item, index}) =\u003e {\n return (\n         \u003cTouchableOpacity\n                 style={styles.item}\n                 onPress={() =\u003e {\n                  this.numberCarousel.scrollToIndex(index);\n                 }}\u003e\n          ...\n         \u003c/TouchableOpacity\u003e\n );\n};\n\nrender() {\n return (\n         \u003cCarousel\n                 style={styles.carousel}\n                 ref={c =\u003e {\n                  this.numberCarousel = c;\n                 }}\n                 data={Array(3).fill(0)}\n                 renderItem={this.renderItem}\n                 itemWidth={windowWidth * 0.8}\n                 separatorWidth={0}\n                 containerWidth={windowWidth}\n         /\u003e\n );\n}\n```\n  \n\n### Usages\n This component currently just support only carousel for **horizontal** side carousel\n From version **2.2.0**.\n\\\n It is now supported __**[Flatlist](https://facebook.github.io/react-native/docs/flatlist)**__ props\n from version **3.0.0** Change scroll behavior of previous versions\n\\\nFrom version **4.0.0** it has been moved to *Functional component* and fix separator bug \n \n| Props | Description | Type | Default | Required | \n| ------ | ------ | ------| -----| ----| \n| **data** | Array of data for rendering | Array |  [] | **Yes**|\n| **renderItems** | take each item from data and renders it. Function receives one agrument `{item,index}` and must return as React.Element | Function | () =\u003e {}  | **Yes** |\n| **keyExtractor** | Key extractor for each item of list | Function |  (item, index) =\u003e index.toString() | **Should** |\n| **Other Flatlist Props** | Other [Flatlist Props](https://reactnative.dev/docs/flatlist)  |  |  |  |\n| *minScrollDistance* | Minimum distance when scrolling to move to the next item. **Notice this property when you need to improve smoothness** | Number | 5 | No |\n| containerWidth | Width of the carousel container box  | Number | Screen width | **Yes** |\n| itemWidth | Width of each item in carousel | Number | 90% of screen width | **Yes** |\n| separatorWidth| Width of separator in carousel (cause it only support horizontal side at the present time)| Number | 10 | No\n| inActiveScale | Value of the scale effect applied to inactive item | Number | 0.8 | No | \n| inActiveOpacity | Value of the opacity effect applied to inactive item | Number | 0.8 | No | \n| style | Style of the carousel container box | View style | {} | No |\n| itemContainerStyle | Style for each carousel container item | View style | {} | No |\n| onScrollEnd |  Fired while scrollview end of scrolling | Function | ()=\u003e {} | No |\n| initialIndex | Initial starting focused item of list | Number | 0 | No |\n\n\n \n### References from\nThis library is written after taking reference from [react-native-snap-carousel](https://github.com/archriss/react-native-snap-carousel)\n  \n### Development \nWelcome everybody to contribute !\nHope this simple carousel can help somebody for fast develope react-native app!\n  \n### Todos \n - Cover vertical side carousel\n\nLicense\n---- \nMIT \n\n\n**Free Software, Hell Yeah!**\n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnamlehoangdev%2Freact-native-anchor-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnamlehoangdev%2Freact-native-anchor-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnamlehoangdev%2Freact-native-anchor-carousel/lists"}