# react-native-swiper-flatlist > React native swiper flatlist component Latest version **3.2.5** (published 2024-09-10) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install react-native-swiper-flatlist pnpm add react-native-swiper-flatlist yarn add react-native-swiper-flatlist bun add react-native-swiper-flatlist ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 3.2.5 | | Published | 2024-09-10 | | First published | 2017-11-19 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 71.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 601 | | Author | Gustavo Gard | | Maintainers | gusgard | | Keywords | react-native-swiper, react-native-swiper-flatlist, swiper flatlist, swiper, hooks, typescript, component, react native, react-native, flatlist, flatlist swiper, react, native, carousel, slider, scrollview, images, infinite, scroll, scrolling, images, cards, stack, android, ios | ## Links - npm: https://www.npmjs.com/package/react-native-swiper-flatlist - Repository: https://github.com/gusgard/react-native-swiper-flatlist - Homepage: https://github.com/gusgard/react-native-swiper-flatlist#readme - Issues: https://github.com/gusgard/react-native-swiper-flatlist/issues - npm.io page: https://npm.io/package/react-native-swiper-flatlist ## Alternatives - [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads - [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads - [better](https://npm.io/package/better.md) — 42 weekly downloads - [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads - [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads ## Recent versions - 3.2.5 (latest) — 2024-09-10 - 3.2.3-beta.0 (beta) — 2023-06-08 - 3.2.4 — 2024-04-23 - 3.2.3 — 2023-06-09 - 3.2.2 — 2023-04-23 - 3.2.1 — 2023-04-23 - 3.2.0 — 2023-04-22 - 3.1.3-beta.2 — 2023-04-22 - 3.1.3-beta.0 — 2023-04-09 - 3.1.2 — 2023-04-09 - 3.1.1-beta.0 — 2023-03-26 - 3.1.1 — 2023-03-25 - 3.1.0 — 2023-03-25 - 3.0.19-beta.0 — 2023-03-25 - 3.0.17-beta.0 — 2023-03-25 - … 51 more at https://npm.io/package/react-native-swiper-flatlist/versions ## README # :point_up_2: Swiper FlatList component [![supports iOS](https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff)](https://www.npmjs.com/package/react-native-swiper-flatlist) [![supports Android](https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff)](https://www.npmjs.com/package/react-native-swiper-flatlist) [![supports web](https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff)](https://www.npmjs.com/package/react-native-swiper-flatlist) [![npm](https://img.shields.io/npm/v/react-native-swiper-flatlist.svg)](https://www.npmjs.com/package/react-native-swiper-flatlist) [![npm](https://img.shields.io/npm/dm/react-native-swiper-flatlist.svg)](https://www.npmjs.com/package/react-native-swiper-flatlist) [![Build Status](https://app.bitrise.io/app/dfeb47a453df37dd/status.svg?token=54NHsU_G5kGTSZpdEejqLA&branch=master)](https://app.bitrise.io/app/dfeb47a453df37dd) ![license](https://img.shields.io/npm/l/react-native-swiper-flatlist.svg) ![Demo](https://raw.githubusercontent.com/gusgard/react-native-swiper-flatlist/master/demo.gif) ## Installation ``` yarn add react-native-swiper-flatlist ``` or ``` npm install react-native-swiper-flatlist --save ``` ## Notice Version 2.x was re-implemented using React Hooks so it only works with version 0.59 or above Version 3.x was re-implemented using Typescript and it works with react-native-web | react-native-swiper-flatlist | react-native | Detox tests | | ---------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 1.x | <= 0.58 | X | | 2.x | >= 0.59 | X | | 3.x | >= 0.59 | [![Build Status](https://app.bitrise.io/app/dfeb47a453df37dd/status.svg?token=54NHsU_G5kGTSZpdEejqLA&branch=master)](https://app.bitrise.io/app/dfeb47a453df37dd) | Note: 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` ## Examples [Expo example with renderItems, children and more](https://snack.expo.io/@gusgard/react-native-swiper-flatlist) [Expo example with children](https://snack.expo.io/@gusgard/react-native-swiper-flatlist-show-next-screen) [React Native example with renderItems and custom pagination](./example/src/SwiperWithRenderItems.tsx) [React Native example with children](./example/src/SwiperWithChildren.tsx) ### Code Using `renderItems` and `data` [![run in expo snack](https://img.shields.io/badge/snack-Try%20now-4630EB.svg?style=flat-square&logo=EXPO&labelColor=000&logoColor=FFF&logoWidth=20)](https://snack.expo.io/@gusgard/react-native-swiper-flatlist-simple-with-renderitems-and-data) ```jsx import React from 'react'; import { Text, Dimensions, StyleSheet, View } from 'react-native'; import { SwiperFlatList } from 'react-native-swiper-flatlist'; const colors = ['tomato', 'thistle', 'skyblue', 'teal']; const App = () => ( ( {item} )} /> ); const { width } = Dimensions.get('window'); const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'white' }, child: { width, justifyContent: 'center' }, text: { fontSize: width * 0.5, textAlign: 'center' }, }); export default App; ``` Using `children` [![run in expo snack](https://img.shields.io/badge/snack-Try%20now-4630EB.svg?style=flat-square&logo=EXPO&labelColor=000&logoColor=FFF&logoWidth=20)](https://snack.expo.io/@gusgard/react-native-swiper-flatlist-simple-with-children) ```jsx import React from 'react'; import { Text, Dimensions, StyleSheet, View } from 'react-native'; import { SwiperFlatList } from 'react-native-swiper-flatlist'; const App = () => ( 1 2 3 4 ); const { width } = Dimensions.get('window'); const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'white' }, child: { width, justifyContent: 'center' }, text: { fontSize: width * 0.5, textAlign: 'center' }, }); export default App; ``` ### Example project with Detox tests [Code example](./example/README.md) To use `react-native-gesture-handler` instead of FlatList import the library like: ```tsx import { SwiperFlatListWithGestureHandler } from 'react-native-swiper-flatlist/WithGestureHandler'; ``` ## Props | Prop | Default | Type | Description | | :-------------------------- | :------------------------------------------------: | :-------------------------------------: | :------------------------------------------------------------------------------------ | | data | _not required if children is used_ | `array` | Data to use in renderItem | | children | - | `node` | Children elements | | renderItem | _not required if children is used_ | `FlatListProps['renderItem']` | Takes an item from data and renders it into the list | | onMomentumScrollEnd | - | `(item: { index: number }, event: any)` | Called after scroll end and the first parameter is the current index | | vertical | false | `boolean` | Show vertical swiper | | index | 0 | `number` | Index to start | | renderAll | false | `boolean` | Render all the items before display it | | **Pagination** | | showPagination | false | `boolean` | Show pagination | | paginationDefaultColor | gray | `string` | Pagination color | | paginationActiveColor | white | `string` | Pagination color | | paginationStyle | {} | `ViewStyle` | Style object for the container | | paginationStyleItem | {} | `ViewStyle` | Style object for the item (dot) | | paginationStyleItemActive | {} | `ViewStyle` | Style object for the active item (dot) | | paginationStyleItemInactive | {} | `ViewStyle` | Style object for the inactive item (dot) | | onPaginationSelectedIndex | - | `() => void` | Executed when the user presses the pagination index, similar properties onChangeIndex | | PaginationComponent | [Component](./src/components/Pagination/index.tsx) | `node` | Overwrite Pagination component | | **Autoplay** | | autoplay | false | `boolean` | Change index automatically | | autoplayDelay | 3 | `number` | Delay between every page in seconds | | autoplayLoop | false | `boolean` | Continue playing after reach end | | autoplayLoopKeepAnimation | false | `boolean` | Show animation when reach the end of the list | | autoplayInvertDirection | false | `boolean` | Invert auto play direction | | disableGesture | false | `boolean` | Disable swipe gesture | **More props** This 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)) ## Functions | Name | Type | Use | | :-------------- | :----------------------------------------------- | :-------------------------------------------------------------------------------------------------- | | scrollToIndex | `({ index: number, animated?: boolean}) => void` | Scroll to the index | | getCurrentIndex | `() => number` | Returns the current index | | getPrevIndex | `() => number` | Returns the previous index | | onChangeIndex | `({ index: number, prevIndex: number}) => void` | Executed every time the index change, the index change when the user reaches 60% of the next screen | | goToFirstIndex | `() => void` | Go to the first index | | goToLastIndex | `() => void` | Go to the last index | ## Right To Left This library support RTL languages, when `I18nManager.isRTL` is `true`. ## Limitations - 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. ## Author Gustavo Gard --- _Source: https://npm.io/package/react-native-swiper-flatlist · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._