3.0.14 • Published 5 months ago

react-native-swiper-flatlist v3.0.14

Weekly downloads
2,759
License
Apache-2.0
Repository
github
Last release
5 months ago

:point_up_2: Swiper FlatList component

supports iOS supports Android supports web npm npm Build Status license

Demo

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-flatlistreact-nativeDetox tests
1.x<= 0.58Build Status
2.x>= 0.59Build Status
3.x>= 0.59Build Status

Examples

Expo example with renderItems, children and more

Expo example with children

React Native example with renderItems and custom pagination

React Native example with children

Code

Using renderItems and data run in expo snack

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 = () => (
  <View style={styles.container}>
    <SwiperFlatList
      autoplay
      autoplayDelay={2}
      autoplayLoop
      index={2}
      showPagination
      data={colors}
      renderItem={({ item }) => (
        <View style={[styles.child, { backgroundColor: item }]}>
          <Text style={styles.text}>{item}</Text>
        </View>
      )}
    />
  </View>
);

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

import React from 'react';
import { Text, Dimensions, StyleSheet, View } from 'react-native';
import { SwiperFlatList } from 'react-native-swiper-flatlist';

const App = () => (
  <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 } = 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

Props

PropDefaultTypeDescription
datanot required if children is usedarrayData to use in renderItem
children-nodeChildren elements
renderItemnot required if children is usedFlatListProps<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
verticalfalsebooleanShow vertical swiper
index0numberIndex to start
renderAllfalsebooleanRender all the items before display it
Pagination
showPaginationfalsebooleanShow pagination
paginationDefaultColorgraystringPagination color
paginationActiveColorwhitestringPagination color
paginationStyle{}ViewStyleStyle object for the container
paginationStyleItem{}ViewStyleStyle object for the item (dot)
paginationStyleItemActive{}ViewStyleStyle object for the active item (dot)
paginationStyleItemInactive{}ViewStyleStyle object for the inactive item (dot)
onPaginationSelectedIndex-() => voidExecuted when the user presses the pagination index, similar properties onChangeIndex
PaginationComponentComponentnodeOverwrite Pagination component
Autoplay
autoplayfalsebooleanChange index automatically
autoplayDelay3numberDelay between every page in seconds
autoplayLoopfalsebooleanContinue playing after reach end
autoplayLoopKeepAnimationfalsebooleanShow animation when reach the end of the list
autoplayInvertDirectionfalsebooleanInvert auto play direction
disableGesturefalsebooleanDisable swipe gesture

More props

This is a wrapper around Flatlist, all their props works well and the inherited props too (from ScrollView and VirtualizedList)

Functions

NameTypeUse
scrollToIndex({ index: number, animated?: boolean}) => voidScroll to the index
getCurrentIndex() => numberReturns the current index
getPrevIndex() => numberReturns the previous index
onChangeIndex({ index: number, prevIndex: number}) => voidExecuted every time the index change, the index change when the user reaches 60% of the next screen
goToFirstIndex() => voidGo to the first index
goToLastIndex() => voidGo to the last index

Limitations

  • Vertical pagination is not supported on Android. Doc

Author

Gustavo Gard

3.0.14

5 months ago

3.0.13

5 months ago

3.0.12

5 months ago

3.0.11

5 months ago

3.0.10

5 months ago

3.0.9

5 months ago

3.0.9-beta.3

5 months ago

3.0.9-beta.2

5 months ago

3.0.9-beta.1

5 months ago

3.0.7-beta.4

5 months ago

3.0.8

5 months ago

3.0.7

5 months ago

3.0.7-rc.1

5 months ago

3.0.7-rc.2

5 months ago

3.0.6

5 months ago

3.0.5

5 months ago

3.0.4

6 months ago

3.0.3

6 months ago

3.0.2

6 months ago

3.0.1

6 months ago

2.0.7

6 months ago

3.0.0

6 months ago

2.0.6

6 months ago

2.0.5

7 months ago

2.0.4

1 year ago

2.0.3

2 years ago

2.0.2

2 years ago

1.0.12

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago