Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-swiper-flatlist with all npm packages installed. Try it out:

var reactNativeSwiperFlatlist = require("react-native-swiper-flatlist")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-swiper-flatlist v1.0.10

React native swiper flatlist component

:point_up_2: Swiper FlatList component

platforms npm npm travis license

Demo

Installation

yarn add react-native-swiper-flatlist

or

npm install react-native-swiper-flatlist --save

Example

Expo

Example

Code

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'
  }
});

Code example

Props

PropDefaultTypeDescription
datanot required if children is usedarrayData to use in renderItem
children-nodeChildren elements
renderItemnot required if children is usedfuncTakes an item from data and renders it into the list
onMomentumScrollEnd-funcCalled after scroll end and the first parameter is the current index
verticalfalseboolShow vertical swiper
index0numberIndex to start
renderAllfalseboolRender all the items before display it
Pagination
showPaginationfalseboolShow pagination
paginationDefaultColorgraystringPagination color
paginationActiveColorwhitestringPagination color
paginationStyle{}ViewPropTypes.styleStyle object for container
paginationStyleItem{}ViewPropTypes.styleStyle object for item (dot)
PaginationComponentComponentnodeOverwrite Pagination component
Autoplay
autoplayfalseboolChange index automatically
autoplayDelay3numberDelay between every page
autoplayLoopfalseboolContinue playing after reach end

More props

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

Functions

NameParamsUse
scrollToIndex(index: number, animated: bool)Forces the scroll of the swiper to a precise index
getCurrentIndex-Returns the current index inside the swiper

Limitations

Note: Vertical pagination is not supported on Android. Doc

Author

Gustavo Gard

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free