Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

👆 Swiper component implemented with FlatList using Hooks & Typescript + automation tests with Detox

License

NotificationsYou must be signed in to change notification settings

gusgard/react-native-swiper-flatlist

Repository files navigation

supports iOSsupports Androidsupports webnpmnpmBuild Statuslicense

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.58X
2.x>= 0.59X
3.x>= 0.59Build Status

Note: we are using the featureexport type available inbabel v7.9.0babel/babel#11171, you might have this issue with React Native between 0.60 and 0.63, please updatebabel to at least tov7.9.0

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

UsingrenderItems anddatarun in expo snack

importReactfrom'react';import{Text,Dimensions,StyleSheet,View}from'react-native';import{SwiperFlatList}from'react-native-swiper-flatlist';constcolors=['tomato','thistle','skyblue','teal'];constApp=()=>(<Viewstyle={styles.container}><SwiperFlatListautoplayautoplayDelay={2}autoplayLoopindex={2}showPaginationdata={colors}renderItem={({ item})=>(<Viewstyle={[styles.child,{backgroundColor:item}]}><Textstyle={styles.text}>{item}</Text></View>)}/></View>);const{ width}=Dimensions.get('window');conststyles=StyleSheet.create({container:{flex:1,backgroundColor:'white'},child:{ width,justifyContent:'center'},text:{fontSize:width*0.5,textAlign:'center'},});exportdefaultApp;

Usingchildrenrun in expo snack

importReactfrom'react';import{Text,Dimensions,StyleSheet,View}from'react-native';import{SwiperFlatList}from'react-native-swiper-flatlist';constApp=()=>(<Viewstyle={styles.container}><SwiperFlatListautoplayautoplayDelay={2}autoplayLoopindex={2}showPagination><Viewstyle={[styles.child,{backgroundColor:'tomato'}]}><Textstyle={styles.text}>1</Text></View><Viewstyle={[styles.child,{backgroundColor:'thistle'}]}><Textstyle={styles.text}>2</Text></View><Viewstyle={[styles.child,{backgroundColor:'skyblue'}]}><Textstyle={styles.text}>3</Text></View><Viewstyle={[styles.child,{backgroundColor:'teal'}]}><Textstyle={styles.text}>4</Text></View></SwiperFlatList></View>);const{ width}=Dimensions.get('window');conststyles=StyleSheet.create({container:{flex:1,backgroundColor:'white'},child:{ width,justifyContent:'center'},text:{fontSize:width*0.5,textAlign:'center'},});exportdefaultApp;

Example project with Detox tests

Code example

react-native-gesture-handler

To usereact-native-gesture-handler instead of FlatList import the library like:

import{SwiperFlatListWithGestureHandler}from'react-native-swiper-flatlist/WithGestureHandler';

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 aroundFlatlist, all theirprops works well and the inheritedprops too (fromScrollView andVirtualizedList)

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

Right To Left

This library support RTL languages, whenI18nManager.isRTL istrue.

Limitations

  • Vertical pagination is not supported on Android.Doc, that is way we haveuseReactNativeGestureHandler which is a workaround for this issue.

Author

Gustavo Gard

Packages

No packages published

Contributors21

[8]ページ先頭
©2009-2025 Movatter.jp