{"id":19076135,"url":"https://github.com/gapur/react-native-carousel","last_synced_at":"2026-03-10T00:33:09.248Z","repository":{"id":89507849,"uuid":"286481661","full_name":"Gapur/react-native-carousel","owner":"Gapur","description":"🤠 Responsive Horizontal Carousel on React-Native","archived":false,"fork":false,"pushed_at":"2020-12-01T16:42:19.000Z","size":1671,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-06T14:46:25.538Z","etag":null,"topics":["react","react-hooks","react-native","react-native-carousel","react-native-snap-carousel","swiper"],"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/Gapur.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,"zenodo":null}},"created_at":"2020-08-10T13:22:59.000Z","updated_at":"2023-03-08T20:12:09.000Z","dependencies_parsed_at":"2023-03-02T16:15:47.477Z","dependency_job_id":null,"html_url":"https://github.com/Gapur/react-native-carousel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Gapur/react-native-carousel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gapur%2Freact-native-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gapur%2Freact-native-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gapur%2Freact-native-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gapur%2Freact-native-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gapur","download_url":"https://codeload.github.com/Gapur/react-native-carousel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gapur%2Freact-native-carousel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30318453,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T20:05:46.299Z","status":"ssl_error","status_checked_at":"2026-03-09T19:57:04.425Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":["react","react-hooks","react-native","react-native-carousel","react-native-snap-carousel","swiper"],"created_at":"2024-11-09T01:57:17.475Z","updated_at":"2026-03-10T00:33:09.208Z","avatar_url":"https://github.com/Gapur.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"320\"src=\"https://github.com/Gapur/react-native-carousel/blob/master/assets/example.gif\"\u003e\n\u003c/p\u003e\n\n# React Native Carousel\n\nHow to Build React Native Carousel\n\nMake Responsive Horizontal Carousel\n\nCarousel is a dynamic scrolling list of elements in horizontal order, where the previous and next elements are partially visible.\n\n## Installation\n\nInstall the repository:\n```sh\ngit clone https://github.com/Gapur/react-native-carousel.git\n```\n\nAfter that, move it into the react_native_carousel directory and run it from the terminal:\n```sh\ncd react_native_carousel\nnpm run ios\n```\n\n## Make Carousel\n\nI am going to use [react-native-snap-carousel](https://github.com/archriss/react-native-snap-carousel) lib to make horizontal responsive carousel. You can install it with the following command:\n\n```sh\nnpm install --save react-native-snap-carousel\n```\n\nLet’s define constants for our carousel:\n```js\n/ carousel slider width\nexport const SCREEN_WIDTH = Dimensions.get('window').width;\nexport const CAROUSEL_VERTICAL_OUTPUT = 56;\nexport const CAROUSEL_ITEM_WIDTH = SCREEN_WIDTH - CAROUSEL_VERTICAL_OUTPUT;\n```\n\nWe will code two main functions renderItem and renderPagination.\n```js\nfunction App() {\n  const [activeSlide, setActiveSlide] = useState(0); // current active slide card\n \n  const renderItem = ({item}) =\u003e ( // render every carousel content\n    \u003cView style={styles.snapCarouselItem}\u003e\n      \u003cView style={styles.carouselItemTitle}\u003e\n        {item.renderIcon()}\n        \u003cText style={styles.carouselItemTitleText}\u003e{item.title}\u003c/Text\u003e\n      \u003c/View\u003e\n      \u003cText style={styles.descriptionText}\u003e{item.description}\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n\n  const renderPagination = () =\u003e ( // render carousel pagination\n    \u003cPagination\n      dotsLength={carouselData.length}\n      activeDotIndex={activeSlide}\n      dotStyle={styles.dotStyle}\n      containerStyle={styles.paginationContainer}\n    /\u003e\n  );\n\n  return (\n    \u003cView style={styles.screen}\u003e\n      \u003cView style={styles.snapCarousel}\u003e\n        \u003cText style={styles.titleText}\u003eReact Native Carousel\u003c/Text\u003e\n        \u003cView style={styles.carouselWrapper}\u003e\n          \u003cCarousel\n            data={carouselData}\n            renderItem={renderItem}\n            onSnapToItem={(index) =\u003e setActiveSlide(index)} // we will update active slide index\n            sliderWidth={SCREEN_WIDTH}\n            itemWidth={CAROUSEL_ITEM_WIDTH}\n          /\u003e\n        \u003c/View\u003e\n        {renderPagination()}\n      \u003c/View\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n## Animations\n\nReact Native provides Animated API for animations. Animated API focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.\n\nWe are going to animate our app with Animated.spring. It tracks the velocity state to create fluid motions as the toValue updates. We will change backgroundColor when carousel slide changes.\n\n```js\nconst sliderBackground = useRef(new Animated.Value(0)).current;\n\nconst handleBackgroundChange = (slideIndex) =\u003e {\n  Animated.spring(sliderBackground, {\n    toValue: slideIndex,\n    useNativeDriver: false,\n  }).start();\n};\n\n// renderItem ...\n// renderPagination ...\n\nconst bgColor = sliderBackground.interpolate({\n  inputRange: carouselData.map((_, ind) =\u003e ind),\n  outputRange: carouselData.map((item) =\u003e item.bgColor),\n});\n\nconst carouselStyle = {\n  ...styles.snapCarousel,\n  backgroundColor: bgColor,\n};\n\nreturn (\n  \u003cView style={styles.screen}\u003e\n    \u003cAnimated.View style={carouselStyle}\u003e\n      \u003cText style={styles.titleText}\u003eReact Native Carousel\u003c/Text\u003e\n      \u003cView style={styles.carouselWrapper}\u003e\n        \u003cCarousel\n          data={carouselData}\n          renderItem={renderItem}\n          onSnapToItem={(index) =\u003e setActiveSlide(index)}\n          onScrollIndexChanged={handleBackgroundChange}\n          sliderWidth={SCREEN_WIDTH}\n          itemWidth={CAROUSEL_ITEM_WIDTH}\n        /\u003e\n      \u003c/View\u003e\n      {renderPagination()}\n    \u003c/Animated.View\u003e\n  \u003c/View\u003e\n);\n```\n\nAbove, we use useRef to persist Animated value. useRef returns a mutable ref object whose .current property is initialized to the passed argument.\n\n## Article on Medium\n\n[React Native Carousel](https://medium.com/javascript-in-plain-english/react-native-carousel-4df6db1c3303)\n\n## How to contribute?\n\n1. Fork this repo\n2. Clone your fork\n3. Code 🤓\n4. Test your changes\n5. Submit a PR!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapur%2Freact-native-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgapur%2Freact-native-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapur%2Freact-native-carousel/lists"}