platforms npm npm travis license
yarn add react-native-swiper-flatlist
or
npm install react-native-swiper-flatlist --save
Version 2.x was re-implemented using React Hooks so it only works with version 0.59 or above
| react-native-swiper-flatlist | react-native |
|---|---|
| 1.x | <= 0.58 |
| 2.x | >= 0.59 |
import React, { PureComponent } from 'react'; import { Text, Dimensions, Image, StyleSheet, View } from 'react-native'; import SwiperFlatList from 'react-native-swiper-flatlist'; export default class App extends PureComponent { render() { return ( <View style={styles.container}> <SwiperFlatList autoplay autoplayDelay={2} autoplayLoop index={2} showPagination > <View style={[styles.child, { backgroundColor: 'tomato' }]}> <Text style={styles.text}>1</Text> </View> <View style={[styles.child, { backgroundColor: 'thistle' }]}> <Text style={styles.text}>2</Text> </View> <View style={[styles.child, { backgroundColor: 'skyblue' }]}> <Text style={styles.text}>3</Text> </View> <View style={[styles.child, { backgroundColor: 'teal' }]}> <Text style={styles.text}>4</Text> </View> </SwiperFlatList> </View> ); } } export const { width, height } = Dimensions.get('window'); const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'white' }, child: { height: height * 0.5, width, justifyContent: 'center' }, text: { fontSize: width * 0.5, textAlign: 'center' } });
| 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 | func |
Takes an item from data and renders it into the list |
| onMomentumScrollEnd | - | func |
Called after scroll end and the first parameter is the current index |
| vertical | false | bool |
Show vertical swiper |
| index | 0 | number |
Index to start |
| renderAll | false | bool |
Render all the items before display it |
| Pagination | |||
| showPagination | false | bool |
Show pagination |
| paginationDefaultColor | gray | string |
Pagination color |
| paginationActiveColor | white | string |
Pagination color |
| paginationStyle | {} | ViewPropTypes.style |
Style object for container |
| paginationStyleItem | {} | ViewPropTypes.style |
Style object for item (dot) |
| PaginationComponent | Component | node |
Overwrite Pagination component |
| Autoplay | |||
| autoplay | false | bool |
Change index automatically |
| autoplayDelay | 3 | number |
Delay between every page in seconds |
| autoplayLoop | false | bool |
Continue playing after reach end |
| autoplayInvertDirection | false | bool |
Invert auto play direction |
More props
This is a wrapper around Flatlist, all their props works well and the inherited props too (from ScrollView and VirtualizedList)
| Name | Params | Use |
|---|---|---|
| scrollToIndex | { index: number, animated: bool?} |
Scroll to the index |
| getCurrentIndex | - | Returns the current index |
| getPrevIndex | - | Returns the previous index |
| onChangeIndex | { index: number, prevIndex: number} |
Executed every time the index change, the index change when the user reaches 60% of the next screen |
| goToFirstIndex | - | Go to the first index |
| goToLastIndex | - | Go to the last index |
- Vertical pagination is not supported on Android. Doc
react-native-webis not supported, due to the lack of support of somepropsused in this library. Expo example
Gustavo Gard