gusgard / React Native Swiper Flatlist
Licence: apache-2.0
👆 Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox
Stars: ✭ 217
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Native Swiper Flatlist
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+13503.23%)
Mutual labels: swipe, slider, carousel, swiper
Vue Slick Carousel
🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
Stars: ✭ 447 (+105.99%)
Mutual labels: slider, carousel, swiper
Vue Easy Slider
Slider Component of Vue.js.
Stars: ✭ 313 (+44.24%)
Mutual labels: swipe, slider, swiper
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+5463.13%)
Mutual labels: swipe, slider, swiper
React Responsive Carousel
React.js Responsive Carousel (with Swipe)
Stars: ✭ 1,962 (+804.15%)
Mutual labels: swipe, slider, carousel
vue-piece-slider
animated slides in a fragmented look 🐞🌳✡️📐
Stars: ✭ 95 (-56.22%)
Mutual labels: slider, images, carousel
Vue Gallery
📷 Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
Stars: ✭ 405 (+86.64%)
Mutual labels: images, slider, carousel
Vue Swipe Mobile
😃 A siwpe (touch slider) component for Vue2
Stars: ✭ 97 (-55.3%)
Mutual labels: swipe, slider, swiper
React Soft Slider
Simple, fast and impartial slider
Stars: ✭ 54 (-75.12%)
Mutual labels: swipe, slider, carousel
Tiny Swiper
Ingenious JavaScript Carousel powered by wonderful plugins. Lightweight yet extensible. Import plugins as needed, No more, no less.
Stars: ✭ 1,061 (+388.94%)
Mutual labels: slider, carousel, swiper
React Native Web Swiper
Swiper-Slider for React-Native and React-Native-Web
Stars: ✭ 125 (-42.4%)
Mutual labels: swipe, slider, swiper
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+842.86%)
Mutual labels: swipe, slider, carousel
skeleton-carousel
Carousel component. Horizontal and vertical swipe navigation
Stars: ✭ 31 (-85.71%)
Mutual labels: slider, carousel, swipe
slider-manager
simple wrapper to create sliders focused on animations
Stars: ✭ 28 (-87.1%)
Mutual labels: slider, swipe, scroll
pinar
🌲☀️ Customizable, lightweight React Native carousel component with accessibility support.
Stars: ✭ 214 (-1.38%)
Mutual labels: slider, carousel, swiper
MediaSliderView
Pure java based, highly customizable media slider gallery supporting both images and videos for android.
Stars: ✭ 85 (-60.83%)
Mutual labels: slider, images, carousel
Splide
Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
Stars: ✭ 786 (+262.21%)
Mutual labels: swipe, slider, carousel
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (-46.08%)
Mutual labels: swipe, slider, swiper
Widget
A set of widgets based on jQuery&&javascript. 一套基于jquery或javascript的插件库 :轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等
Stars: ✭ 1,579 (+627.65%)
Mutual labels: slider, carousel
👆 Swiper FlatList component
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 | |
2.x | >= 0.59 | |
3.x | >= 0.59 |
Examples
Expo example with renderItems, children and more
React Native example with renderItems and custom pagination
React Native example with children
Code
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;
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
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].