react-native-swiper-hook v1.0.11

react-native-swiper-hook

an improvement for react-native-swiper for better swipe handling. For more info about swiperProps visit react-native-swiper page.

install with yarn add react-native-swiper-hook

How to use

import React, { FC, ReactNode } from 'react';
import styled from 'styled-components/native';
import { useSwipeableView } from 'react-native-swiper-hook';
import { View, Button } from 'react-native';
import { SlideIndicator } from '../../atoms/SlideIndicator';

export const OnboardingStoryTemplate: FC = () => {
  const onLastSwipe = () => {
    //Do something on last swipe
  };
  const slidesTexts = ['text1', 'text2', 'text3', 'text4'];
  const slides = (slidesTexts: string[]): ReactNode[] =>
    slidesTexts.map((text) => (
      <>
        <ImagePlaceholder />
        <Paragraph>{text}</Paragraph>
      </>
    ));

  const { SwipeableViews, increaseIndex } = useSwipeableView({
    slides: slides(slidesTexts),
    onLastSwipe,
    swiperProps: {
      dot: <SlideIndicator />,
      activeDot: <SlideIndicator active />,
    },
  });
  return (
    <>
      <PageWrapper>
        <SwipeableViews />
        <View>
          <Button title="CONTINUE" onPress={increaseIndex} />
        </View>
      </PageWrapper>
    </>
  );
};

const ImagePlaceholder = styled.View``;

const Paragraph = styled.Text``;

const PageWrapper = styled.View`
  flex: 1;
`;