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
Version 3.x was re-implemented using Typescript
react-native-swiper-flatlist | react-native |
---|---|
1.x | <= 0.58 |
2.x | >= 0.59 |
3.x | >= 0.59 |
Expo example with renderItems, children and more
React Native example with renderItems and custom pagination
React Native example with children
import React from 'react';
import { Text, Dimensions, Image, StyleSheet, View } from 'react-native';
import { SwiperFlatList } from 'react-native-swiper-flatlist';
const App = () => {
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>
);
};
const { width, height } = Dimensions.get('window');
const styles = StyleSheet.create({
container: {
flex: 0.5,
backgroundColor: 'white',
},
child: {
height: height * 0.5,
width,
justifyContent: 'center',
},
text: {
fontSize: width * 0.5,
textAlign: 'center',
},
});
export default App;
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<T>['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 | 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, all their props
works well and the inherited props
too (from ScrollView and VirtualizedList)
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 |
- Vertical pagination is not supported on Android. Doc
react-native-web
is not supported, due to the lack of support of someprops
used in this library. Expo example
Gustavo Gard