React Native Fast Swiper

Preview

Installation

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

$ npm install --save rn-fast-swiper

or

$ yarn add rn-fast-swiper

Usage

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

const SomeComponent = () => {

  const rnFastSwiperRef = useRef(null);

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

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

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

return (
   <RNFastSwiper
	index={0}
	loop={false}
	ref={rnFastSwiperRef}
	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
})