{"id":4386,"url":"https://github.com/gusgard/react-native-swiper-flatlist","last_synced_at":"2025-05-15T08:05:15.273Z","repository":{"id":26864785,"uuid":"111335401","full_name":"gusgard/react-native-swiper-flatlist","owner":"gusgard","description":"👆 Swiper component implemented with FlatList using Hooks \u0026 Typescript + automation tests with Detox","archived":false,"fork":false,"pushed_at":"2024-09-16T10:39:08.000Z","size":508289,"stargazers_count":580,"open_issues_count":8,"forks_count":101,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-09T18:01:16.123Z","etag":null,"topics":["bitrise","carousel","detox","e2e-tests","expo","flatlist","hooks","images","react","react-native","react-native-swiper","react-native-swiper-flatlist","scroll","scrollview","slider","swipe","swiper","swiper-flatlist","swipeview","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gusgard.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-19T21:58:25.000Z","updated_at":"2025-05-09T09:03:29.000Z","dependencies_parsed_at":"2024-12-11T06:11:16.298Z","dependency_job_id":null,"html_url":"https://github.com/gusgard/react-native-swiper-flatlist","commit_stats":{"total_commits":119,"total_committers":18,"mean_commits":6.611111111111111,"dds":"0.23529411764705888","last_synced_commit":"03399750cfde3698135d6bbbed4c0f4829fc9739"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gusgard%2Freact-native-swiper-flatlist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gusgard%2Freact-native-swiper-flatlist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gusgard%2Freact-native-swiper-flatlist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gusgard%2Freact-native-swiper-flatlist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gusgard","download_url":"https://codeload.github.com/gusgard/react-native-swiper-flatlist/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254301426,"owners_count":22047902,"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":["bitrise","carousel","detox","e2e-tests","expo","flatlist","hooks","images","react","react-native","react-native-swiper","react-native-swiper-flatlist","scroll","scrollview","slider","swipe","swiper","swiper-flatlist","swipeview","typescript"],"created_at":"2024-01-05T20:17:10.294Z","updated_at":"2025-05-15T08:05:10.251Z","avatar_url":"https://github.com/gusgard.png","language":"TypeScript","funding_links":[],"categories":["Components","TypeScript"],"sub_categories":["Navigation"],"readme":"# :point_up_2: Swiper FlatList component\n\n[![supports iOS](https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square\u0026logo=APPLE\u0026labelColor=999999\u0026logoColor=fff)](https://www.npmjs.com/package/react-native-swiper-flatlist)\n[![supports Android](https://img.shields.io/badge/Android-4630EB.svg?style=flat-square\u0026logo=ANDROID\u0026labelColor=A4C639\u0026logoColor=fff)](https://www.npmjs.com/package/react-native-swiper-flatlist)\n[![supports web](https://img.shields.io/badge/web-4630EB.svg?style=flat-square\u0026logo=GOOGLE-CHROME\u0026labelColor=4285F4\u0026logoColor=fff)](https://www.npmjs.com/package/react-native-swiper-flatlist)\n[![npm](https://img.shields.io/npm/v/react-native-swiper-flatlist.svg)](https://www.npmjs.com/package/react-native-swiper-flatlist)\n[![npm](https://img.shields.io/npm/dm/react-native-swiper-flatlist.svg)](https://www.npmjs.com/package/react-native-swiper-flatlist)\n[![Build Status](https://app.bitrise.io/app/dfeb47a453df37dd/status.svg?token=54NHsU_G5kGTSZpdEejqLA\u0026branch=master)](https://app.bitrise.io/app/dfeb47a453df37dd)\n![license](https://img.shields.io/npm/l/react-native-swiper-flatlist.svg)\n\n![Demo](https://raw.githubusercontent.com/gusgard/react-native-swiper-flatlist/master/demo.gif)\n\n## Installation\n\n```\nyarn add react-native-swiper-flatlist\n```\n\nor\n\n```\nnpm install react-native-swiper-flatlist --save\n```\n\n## Notice\n\nVersion 2.x was re-implemented using React Hooks so it only works with version 0.59 or above\n\nVersion 3.x was re-implemented using Typescript and it works with react-native-web\n\n| react-native-swiper-flatlist | react-native | Detox tests                                                                                                                                                       |\n| ---------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 1.x                          | \u003c= 0.58      | X                                                                                                                                                                 |\n| 2.x                          | \u003e= 0.59      | X                                                                                                                                                                 |\n| 3.x                          | \u003e= 0.59      | [![Build Status](https://app.bitrise.io/app/dfeb47a453df37dd/status.svg?token=54NHsU_G5kGTSZpdEejqLA\u0026branch=master)](https://app.bitrise.io/app/dfeb47a453df37dd) |\n\nNote: we are using the feature `export type` available in `babel v7.9.0` https://github.com/babel/babel/pull/11171, you might have this issue with React Native between 0.60 and 0.63, please update `babel` to at least to `v7.9.0`\n\n## Examples\n\n[Expo example with renderItems, children and more](https://snack.expo.io/@gusgard/react-native-swiper-flatlist)\n\n[Expo example with children](https://snack.expo.io/@gusgard/react-native-swiper-flatlist-show-next-screen)\n\n[React Native example with renderItems and custom pagination](./example/src/SwiperWithRenderItems.tsx)\n\n[React Native example with children](./example/src/SwiperWithChildren.tsx)\n\n### Code\n\nUsing `renderItems` and `data` [![run in expo snack](https://img.shields.io/badge/snack-Try%20now-4630EB.svg?style=flat-square\u0026logo=EXPO\u0026labelColor=000\u0026logoColor=FFF\u0026logoWidth=20)](https://snack.expo.io/@gusgard/react-native-swiper-flatlist-simple-with-renderitems-and-data)\n\n```jsx\nimport React from 'react';\nimport { Text, Dimensions, StyleSheet, View } from 'react-native';\nimport { SwiperFlatList } from 'react-native-swiper-flatlist';\n\nconst colors = ['tomato', 'thistle', 'skyblue', 'teal'];\n\nconst App = () =\u003e (\n  \u003cView style={styles.container}\u003e\n    \u003cSwiperFlatList\n      autoplay\n      autoplayDelay={2}\n      autoplayLoop\n      index={2}\n      showPagination\n      data={colors}\n      renderItem={({ item }) =\u003e (\n        \u003cView style={[styles.child, { backgroundColor: item }]}\u003e\n          \u003cText style={styles.text}\u003e{item}\u003c/Text\u003e\n        \u003c/View\u003e\n      )}\n    /\u003e\n  \u003c/View\u003e\n);\n\nconst { width } = Dimensions.get('window');\nconst styles = StyleSheet.create({\n  container: { flex: 1, backgroundColor: 'white' },\n  child: { width, justifyContent: 'center' },\n  text: { fontSize: width * 0.5, textAlign: 'center' },\n});\n\nexport default App;\n```\n\nUsing `children` [![run in expo snack](https://img.shields.io/badge/snack-Try%20now-4630EB.svg?style=flat-square\u0026logo=EXPO\u0026labelColor=000\u0026logoColor=FFF\u0026logoWidth=20)](https://snack.expo.io/@gusgard/react-native-swiper-flatlist-simple-with-children)\n\n```jsx\nimport React from 'react';\nimport { Text, Dimensions, StyleSheet, View } from 'react-native';\nimport { SwiperFlatList } from 'react-native-swiper-flatlist';\n\nconst App = () =\u003e (\n  \u003cView style={styles.container}\u003e\n    \u003cSwiperFlatList autoplay autoplayDelay={2} autoplayLoop index={2} showPagination\u003e\n      \u003cView style={[styles.child, { backgroundColor: 'tomato' }]}\u003e\n        \u003cText style={styles.text}\u003e1\u003c/Text\u003e\n      \u003c/View\u003e\n      \u003cView style={[styles.child, { backgroundColor: 'thistle' }]}\u003e\n        \u003cText style={styles.text}\u003e2\u003c/Text\u003e\n      \u003c/View\u003e\n      \u003cView style={[styles.child, { backgroundColor: 'skyblue' }]}\u003e\n        \u003cText style={styles.text}\u003e3\u003c/Text\u003e\n      \u003c/View\u003e\n      \u003cView style={[styles.child, { backgroundColor: 'teal' }]}\u003e\n        \u003cText style={styles.text}\u003e4\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/SwiperFlatList\u003e\n  \u003c/View\u003e\n);\n\nconst { width } = Dimensions.get('window');\n\nconst styles = StyleSheet.create({\n  container: { flex: 1, backgroundColor: 'white' },\n  child: { width, justifyContent: 'center' },\n  text: { fontSize: width * 0.5, textAlign: 'center' },\n});\n\nexport default App;\n```\n\n### Example project with Detox tests\n\n[Code example](./example/README.md)\n\nTo use `react-native-gesture-handler` instead of FlatList import the library like:\n\n```tsx\nimport { SwiperFlatListWithGestureHandler } from 'react-native-swiper-flatlist/WithGestureHandler';\n```\n\n## Props\n\n| Prop                        |                      Default                       |                  Type                   | Description                                                                           |\n| :-------------------------- | :------------------------------------------------: | :-------------------------------------: | :------------------------------------------------------------------------------------ |\n| data                        |         _not required if children is used_         |                 `array`                 | Data to use in renderItem                                                             |\n| children                    |                         -                          |                 `node`                  | Children elements                                                                     |\n| renderItem                  |         _not required if children is used_         |    `FlatListProps\u003cT\u003e['renderItem']`     | Takes an item from data and renders it into the list                                  |\n| onMomentumScrollEnd         |                         -                          | `(item: { index: number }, event: any)` | Called after scroll end and the first parameter is the current index                  |\n| vertical                    |                       false                        |                `boolean`                | Show vertical swiper                                                                  |\n| index                       |                         0                          |                `number`                 | Index to start                                                                        |\n| renderAll                   |                       false                        |                `boolean`                | Render all the items before display it                                                |\n| **Pagination**              |\n| showPagination              |                       false                        |                `boolean`                | Show pagination                                                                       |\n| paginationDefaultColor      |                        gray                        |                `string`                 | Pagination color                                                                      |\n| paginationActiveColor       |                       white                        |                `string`                 | Pagination color                                                                      |\n| paginationStyle             |                         {}                         |               `ViewStyle`               | Style object for the container                                                        |\n| paginationStyleItem         |                         {}                         |               `ViewStyle`               | Style object for the item (dot)                                                       |\n| paginationStyleItemActive   |                         {}                         |               `ViewStyle`               | Style object for the active item (dot)                                                |\n| paginationStyleItemInactive |                         {}                         |               `ViewStyle`               | Style object for the inactive item (dot)                                              |\n| onPaginationSelectedIndex   |                         -                          |              `() =\u003e void`               | Executed when the user presses the pagination index, similar properties onChangeIndex |\n| PaginationComponent         | [Component](./src/components/Pagination/index.tsx) |                 `node`                  | Overwrite Pagination component                                                        |\n| **Autoplay**                |\n| autoplay                    |                       false                        |                `boolean`                | Change index automatically                                                            |\n| autoplayDelay               |                         3                          |                `number`                 | Delay between every page in seconds                                                   |\n| autoplayLoop                |                       false                        |                `boolean`                | Continue playing after reach end                                                      |\n| autoplayLoopKeepAnimation   |                       false                        |                `boolean`                | Show animation when reach the end of the list                                         |\n| autoplayInvertDirection     |                       false                        |                `boolean`                | Invert auto play direction                                                            |\n| disableGesture              |                       false                        |                `boolean`                | Disable swipe gesture                                                                 |\n\n**More props**\n\nThis is a wrapper around [Flatlist](http://facebook.github.io/react-native/docs/flatlist.html#props), all their `props` works well and the inherited `props` too (from [ScrollView](http://facebook.github.io/react-native/docs/scrollview#props) and [VirtualizedList](http://facebook.github.io/react-native/docs/virtualizedlist#props))\n\n## Functions\n\n| Name            | Type                                             | Use                                                                                                 |\n| :-------------- | :----------------------------------------------- | :-------------------------------------------------------------------------------------------------- |\n| scrollToIndex   | `({ index: number, animated?: boolean}) =\u003e void` | Scroll to the index                                                                                 |\n| getCurrentIndex | `() =\u003e number`                                   | Returns the current index                                                                           |\n| getPrevIndex    | `() =\u003e number`                                   | Returns the previous index                                                                          |\n| onChangeIndex   | `({ index: number, prevIndex: number}) =\u003e void`  | Executed every time the index change, the index change when the user reaches 60% of the next screen |\n| goToFirstIndex  | `() =\u003e void`                                     | Go to the first index                                                                               |\n| goToLastIndex   | `() =\u003e void`                                     | Go to the last index                                                                                |\n\n## Right To Left\n\nThis library support RTL languages, when `I18nManager.isRTL` is `true`.\n\n## Limitations\n\n- Vertical pagination is not supported on Android. [Doc](https://github.com/facebook/react-native/blob/a48da14800013659e115bf2b58e31aa396e678e5/Libraries/Components/ScrollView/ScrollView.js#L274), that is way we have `useReactNativeGestureHandler` which is a workaround for this issue.\n\n## Author\n\nGustavo Gard\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgusgard%2Freact-native-swiper-flatlist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgusgard%2Freact-native-swiper-flatlist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgusgard%2Freact-native-swiper-flatlist/lists"}