react-native-flat-swiper

React Native Flat Swiper

Preview

Installation

Type in the following to the command line to install the module.

$ npm install --save react-native-flat-swiper

or

$ yarn add react-native-flat-swiper

Usage

Add an import to the top of the file. At minimal, place array data into the data prop and render the pages using the renderItem prop.

import FlatSwiper from 'react-native-flat-swiper';
import { View, Image, StyleSheet } from 'react-native';
import React, { useRef } from 'react';

const SomeComponent = () => {
	const flatSwiperRef = useRef(null);

  const onSwipeIndexChange = (index: number) => {
    // get the index of the card when on swiping
  };

  //Trigger to next card by ref:
  flatSwiperRef?.current?.scrollBy(1, false);  //scrollBy(cardIndex: number, animation: boolean)

  //Trigger to any card by ref with index:
  flatSwiperRef?.current?.scrollTo(yourCardIndex, false); //scrollTo(cardIndex: number, animation: boolean)

return (
   <FlatSwiper
	index={0}
	loop={false}
	ref={flatSwiperRef}
	horizontal={false}
	loadMinimal={true}
	data={yourData[] || []}
	enableAndroidViewPager={false}
	onIndexChangeReached={(index) => onSwipeIndexChange(index)}
	renderItem={({ item, index }) => {
	   //IMPORTANT: props name "item" is required
	   return (
		<View key={index} style={styles.item}>
			<Text>View {index}</Text>
		</View>
	   );
	}}
   />
);
};

const styles = StyleSheet.create({
  item: { flex: 1}  // to display 1 item per time
})