{"id":13481729,"url":"https://github.com/kkemple/react-native-sideswipe","last_synced_at":"2025-04-07T23:12:35.141Z","repository":{"id":46938815,"uuid":"120023362","full_name":"kkemple/react-native-sideswipe","owner":"kkemple","description":"Simple React Native carousel with sensible defaults","archived":false,"fork":false,"pushed_at":"2021-09-21T02:02:05.000Z","size":46510,"stargazers_count":905,"open_issues_count":43,"forks_count":69,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-31T22:23:00.616Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/kkemple.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":"2018-02-02T19:39:34.000Z","updated_at":"2025-03-12T18:52:41.000Z","dependencies_parsed_at":"2022-09-26T18:51:08.260Z","dependency_job_id":null,"html_url":"https://github.com/kkemple/react-native-sideswipe","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkemple%2Freact-native-sideswipe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkemple%2Freact-native-sideswipe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkemple%2Freact-native-sideswipe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kkemple%2Freact-native-sideswipe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kkemple","download_url":"https://codeload.github.com/kkemple/react-native-sideswipe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247744335,"owners_count":20988783,"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-07-31T17:00:54.832Z","updated_at":"2025-04-07T23:12:35.124Z","avatar_url":"https://github.com/kkemple.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript"],"sub_categories":["React Native"],"readme":"# Sideswipe\nA simple, cross-platform React Native swipeable carousel with sensible defaults\n\n## Looking for maintainers!!\n[DM me on Twitter!](https://twitter.com/theworstdev)\n\n![demo1](./example-assets/sideswipe.gif)\n\n![demo2](./example-assets/spaced-tesla.gif)\n\n## Why Another Carousel?\nMost solutions I found were very focused on mobile and adopt a paging pattern which limits what you can do on tablet and when you want the child to page when its smaller than the viewport.\n\nOn top of that most solutions were either one-size-fits-all or not really polished.\n\n## What Makes Your Solution So Special?\nNothing. It's just a tiny simple carousel with a pretty flexible API. If you need more check out another solution, if you need less you might not need a carousel because this whole thing is ~200 lines. 😎\n\n___\n\n## API\n\n### `\u003cCarousel /\u003e`\nCarousel component used to render carousel items via `renderItem` prop.\n\n```js\ntype CarouselProps = {\n  // applied to the content container within FlatList\n  // |------------ [ style ]--------------------------|\n  // | |---------- [ flatListStyle ] ---------------| |\n  // | | |-------- [ contentContainerStyle ] -----| | |\n\n  contentContainerStyle?: Styles,\n\n  // This will equal the padding added to both left and right of itemWidth\n  // e.g. const contentOffset = (viewport.width - itemWidth) / 2\n  contentOffset?: number,\n\n  // data for FlatList\n  data: Array\u003c*\u003e,\n\n  // used to set the unique key of each item in the carousel\n  extractKey?: (item: *, index: number) =\u003e string,\n\n\n  // applied to the content container within the content container\n  // |------------ [ style ]--------------------------|\n  // | |---------- [ flatListStyle ] ---------------| |\n  // | | |-------- [ contentContainerStyle ] -----| | |\n  flatListStyle?: Styles,\n\n  // active index of the carousel\n  index?: number,\n\n  // This is the total width of everything that should be centered when in view\n  // tip: be sure to include any margin added to the left and right of the item\n  itemWidth?: number,\n\n  // function called when the end of the carousel is reached\n  onEndReached: () =\u003e void,\n\n  // number between 0 - 1 used to determine when to call onEndReached\n  onEndReachedThreshold: number,\n\n  // fired when the active index for the carousel changes\n  onIndexChange?: number =\u003e void,\n\n  // offset from center of carousel item used for determining index\n  threshold?: number,\n\n  /**\n   * drag distance examples with different thresholds\n   *\n   * with item width of 200 and no threshold\n   * ---------------\u003e \u003c-----------------\n   * 0 ------- -index/+index ------- 200\n   *\n   * with item width of 200 and 50 threshold\n   * ----------\u003e           \u003c------------\n   * 0 -- -index -- 100 -- +index -- 200\n   *\n   * with item width of 200 and 75 threshold\n   * --------\u003e               \u003c----------\n   * 0 - -index --- 100 --- +index - 200\n   *\n   * with item width of 200 and 90 threshold\n   * -----\u003e                      \u003c------\n   * 0 -index ----- 100 ----- +index 200\n   */\n\n  // to determine the index use the velocity of the gesture.\n  useVelocityForIndex?: boolean,\n\n  // render item method, similar to FlatList with some enhancements\n  renderItem: CarouselRenderProps =\u003e\n    | Array\u003cReact$Element\u003c*\u003e | boolean\u003e\n    | React$Element\u003c*\u003e\n    | null,\n\n  // should we capture touch event\n  shouldCapture?: GestureState =\u003e boolean,\n\n  // should we release touch event to another view\n  shouldRelease?: GestureState =\u003e boolean,\n\n  // style for the FlatList wrapper View\n  // |------------ [ style ]--------------------------|\n  // | |---------- [ flatListStyle ] ---------------| |\n  // | | |-------- [ contentContainerStyle ] -----| | |\n  style?: Styles,\n\n  // should we use native driver for animation\n  useNativeDriver?: boolean,\n}\n```\n\n```js\ntype CarouselRenderProps = {\n  // index of item in data collection\n  itemIndex: number,\n\n  // active index of the carousel\n  currentIndex: number,\n\n  // total count of items in data collection\n  itemCount: number,\n\n  // item passed from FlatList\n  item: *,\n\n  // animated value tracking current index\n  animatedValue: Animated.Value\n}\n\n```\n\n___\n\n## Usage:\n\n```bash\nyarn add react-native-sideswipe\n```\n\n```js\nimport { Dimensions } from 'react-native';\nimport SideSwipe from 'react-native-sideswipe';\n\nimport CustomComponent from '...'\nimport data from '...'\n\nexport default class SweetCarousel extends Component {\n  state = {\n    currentIndex: 0,\n  };\n\n  render = () =\u003e {\n    // center items on screen\n    const { width } = Dimensions.get('window');\n    const contentOffset = (width - CustomComponent.WIDTH) / 2;\n\n    return (\n      \u003cSideSwipe\n        index={this.state.currentIndex}\n        itemWidth={CustomComponent.WIDTH}\n        style={{ width }}\n        data={data}\n        contentOffset={contentOffset}\n        onIndexChange={index =\u003e\n          this.setState(() =\u003e ({ currentIndex: index }))\n        }\n        renderItem={({ itemIndex, currentIndex, item, animatedValue }) =\u003e (\n         \u003cCustomComponent\n            {...item}\n            index={itemIndex}\n            currentIndex={currentIndex}\n            animatedValue={animatedValue}\n          /\u003e\n        )}\n      /\u003e\n    );\n  };\n}\n```\n\n___\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n| [\u003cimg src=\"https://avatars3.githubusercontent.com/u/3629876?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKurtis Kemple\u003c/b\u003e\u003c/sub\u003e](https://twitter.com/kurtiskemple)\u003cbr /\u003e[💻](https://github.com/kkemple/react-native-sideswipe/commits?author=kkemple \"Code\") [📖](https://github.com/kkemple/react-native-sideswipe/commits?author=kkemple \"Documentation\") [📝](#blog-kkemple \"Blogposts\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/1714673?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJason Brown\u003c/b\u003e\u003c/sub\u003e](http://browniefed.com)\u003cbr /\u003e[💻](https://github.com/kkemple/react-native-sideswipe/commits?author=browniefed \"Code\") [🤔](#ideas-browniefed \"Ideas, Planning, \u0026 Feedback\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/16436270?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAkshay Kadam\u003c/b\u003e\u003c/sub\u003e](https://twitter.com/deadcoder0904)\u003cbr /\u003e[📖](https://github.com/kkemple/react-native-sideswipe/commits?author=deadcoder0904 \"Documentation\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/4272832?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSantosh Venkatraman\u003c/b\u003e\u003c/sub\u003e](https://github.com/onstash)\u003cbr /\u003e[💻](https://github.com/kkemple/react-native-sideswipe/commits?author=onstash \"Code\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/3153663?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNarendra N Shetty\u003c/b\u003e\u003c/sub\u003e](https://twitter.com/narendra_shetty)\u003cbr /\u003e[🤔](#ideas-narendrashetty \"Ideas, Planning, \u0026 Feedback\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/10658888?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eZachary Gibson\u003c/b\u003e\u003c/sub\u003e](https://twitter.com/zacharykeith_)\u003cbr /\u003e[🤔](#ideas-zachgibson \"Ideas, Planning, \u0026 Feedback\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/1640318?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eChris Geirman\u003c/b\u003e\u003c/sub\u003e](http://www.frogquest.com)\u003cbr /\u003e[🐛](https://github.com/kkemple/react-native-sideswipe/issues?q=author%3Ageirman \"Bug reports\") [📖](https://github.com/kkemple/react-native-sideswipe/commits?author=geirman \"Documentation\") [🤔](#ideas-geirman \"Ideas, Planning, \u0026 Feedback\") |\n| :---: | :---: | :---: | :---: | :---: | :---: | :---: |\n| [\u003cimg src=\"https://avatars3.githubusercontent.com/u/3743054?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDan Sipple\u003c/b\u003e\u003c/sub\u003e](https://github.com/sipplified)\u003cbr /\u003e[🐛](https://github.com/kkemple/react-native-sideswipe/issues?q=author%3Asipplified \"Bug reports\") [💻](https://github.com/kkemple/react-native-sideswipe/commits?author=sipplified \"Code\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/337798?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBrian B. Canin\u003c/b\u003e\u003c/sub\u003e](http://www.briancanin.com)\u003cbr /\u003e[💻](https://github.com/kkemple/react-native-sideswipe/commits?author=cyphire \"Code\") [👀](#review-cyphire \"Reviewed Pull Requests\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/1041237?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMichael Sevestre\u003c/b\u003e\u003c/sub\u003e](http://www.design2code.ca)\u003cbr /\u003e[🐛](https://github.com/kkemple/react-native-sideswipe/issues?q=author%3Amsevestre \"Bug reports\") [🤔](#ideas-msevestre \"Ideas, Planning, \u0026 Feedback\") [⚠️](https://github.com/kkemple/react-native-sideswipe/commits?author=msevestre \"Tests\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/650099?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSoheil Jadidian\u003c/b\u003e\u003c/sub\u003e](https://github.com/jadidian)\u003cbr /\u003e[🐛](https://github.com/kkemple/react-native-sideswipe/issues?q=author%3Ajadidian \"Bug reports\") [🤔](#ideas-jadidian \"Ideas, Planning, \u0026 Feedback\") |\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n\n___\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkkemple%2Freact-native-sideswipe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkkemple%2Freact-native-sideswipe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkkemple%2Freact-native-sideswipe/lists"}