react-native-carousel-loop

react-native-carousel-loop

Typescript implementation of https://github.com/phil-r/react-native-looped-carousel with small fixes.

Example usage

import React, { Component } from 'react';
import { Text, View, Dimensions } from 'react-native';
import Carousel from 'react-native-looped-carousel';

const { width, height } = Dimensions.get('window');

export default function Example() {
  const handleNextPage = (index: number) => {
    console.log(index);
  };
  return (
    <View style={{ flex: 1 }}>
      <Carousel
        delay={2000}
        style={{ width, height }}
        autoplay
        pageInfo
        onAnimateNextPage={handleNextPage}
      >
        <View style={[{ backgroundColor: '#BADA55' }, this.state.size]}>
          <Text>1</Text>
        </View>
        <View style={[{ backgroundColor: 'red' }, this.state.size]}>
          <Text>2</Text>
        </View>
        <View style={[{ backgroundColor: 'blue' }, this.state.size]}>
          <Text>3</Text>
        </View>
      </Carousel>
    </View>
  );
}

Props

interface CarouselProps {
  children: ReactNode;
  autoplay?: boolean;
  delay?: number;
  currentPage?: number;
  style?: ViewProps['style'];
  pageStyle?: ViewProps['style'];
  contentContainerStyle?: ViewProps['style'];
  pageInfo?: boolean;
  pageInfoBackgroundColor?: string;
  pageInfoTextStyle?: TextProps['style'];
  pageInfoBottomContainerStyle?: ViewProps['style'];
  pageInfoTextSeparator?: string;
  bullets: boolean;
  bulletsContainerStyle?: TextProps['style'];
  bulletStyle?: TextProps['style'];
  arrows?: boolean;
  arrowsContainerStyle?: TextProps['style'];
  arrowStyle?: TextProps['style'];
  leftArrowStyle?: TextProps['style'];
  rightArrowStyle?: TextProps['style'];
  leftArrowText?: string;
  rightArrowText?: string;
  chosenBulletStyle?: TextProps['style'];
  onAnimateNextPage?: (index: number) => void;
  onPageBeingChanged?: (index: number) => void;
  swipe?: boolean;
  isLooped?: boolean;
}