Have ideas to improve npm?Join in the discussion! »

    react-native-swiper-flatlist

    3.0.14 • Public • Published

    👆 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-flatlist react-native Detox tests
    1.x <= 0.58 Build Status
    2.x >= 0.59 Build Status
    3.x >= 0.59 Build 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

    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)

    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

    Limitations

    • Vertical pagination is not supported on Android. Doc

    Author

    Gustavo Gard

    Install

    npm i react-native-swiper-flatlist

    DownloadsWeekly Downloads

    3,305

    Version

    3.0.14

    License

    Apache-2.0

    Unpacked Size

    59 kB

    Total Files

    28

    Last publish

    Collaborators

    • avatar