Skip to content

πŸ‘† Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox

License

Notifications You must be signed in to change notification settings

wilav-dev/react-native-swiper-flatlist

Folders and files

NameName
Last commit message
Last commit date

Latest commit

6cb1ab9 Β· Feb 25, 2018

History

10 Commits
Feb 25, 2018
Feb 25, 2018
Nov 20, 2017
Nov 20, 2017
Nov 20, 2017
Nov 20, 2017
Nov 20, 2017
Nov 20, 2017
Nov 20, 2017
Nov 20, 2017
Nov 19, 2017
Feb 25, 2018
Feb 25, 2018
Nov 20, 2017
Nov 20, 2017
Dec 6, 2017
Feb 25, 2018

Repository files navigation

πŸ‘† Swiper FlatList component

platforms npm npm travis license

Demo

Installation

yarn add react-native-swiper-flatlist

or

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

Implemented using with FlatList

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

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 func Takes an item from data and renders it into the list.
onMomentumScrollEnd - func Called after scroll end
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
PaginationComponent Component node Overwrite Pagination component
Autoplay
autoplay false bool Change index automatically
autoplayDelay 3 number Delay between every page
autoplayLoop false bool Continue playing after reach end

Limitations

Note: Vertical pagination is not supported on Android. Doc

Author

Gustavo Gard

About

πŸ‘† Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 43.9%
  • JavaScript 29.3%
  • Java 12.3%
  • Objective-C 8.7%
  • Starlark 3.8%
  • Ruby 1.7%
  • CSS 0.3%