React Native Fade Carousel Wrapper

A Fade Carousel for react native written in TypeScript in order to handle the Fade Carousel behavior for any react native components.

Installing

For the latest stable version:

using npm:

npm install --save react-native-fadecarousel

using yarn:

yarn add react-native-fadecarousel

Usage Sample

import React from 'react';
import FadeCarousel, { Bearing } from 'react-native-fadecarousel';
import { View, Text } from 'reat-native';

const FadeCarouselScreen = () => {
    return <FadeCarousel 
                loop 
                entranceBearing={Bearing.Left}
                fadeAnimationDuration={1000} 
                autoPlay={{enable: true , delay: 1000 }}>
        {[
            <View key={'slide one'} style={styles.slideItem}><Text style={styles.label}>Side One</Text></View>,
            <View key={'slide two'} style={styles.slideItem}><Text style={styles.label}>Side Two</Text></View>,
            <View key={'slide three'} style={styles.slideItem}><Text style={styles.label}>Side Three</Text></View>
        ]}
    </FadeCarousel>
}

Here is the properties and the descriptions of them:

| Props Name | Default | Type | isRequired | Description | | :--: | :----- | :--: | :--: | :------------------------- | | loop | false | boolean | No | you can determine if the last slider would go back to the first one (and vise versa) or not | | autoPlay | {enable: false} | {   "delay": number,   enable: true } | {   enable: false } | No | if you need the carousel to slide childrens automatically, you can use this properly with a proper delay (between slides) | | entranceBearing | Bearing.Center | Bearing | No | you can swith the entrance direction of slides of the carousel | | leaveBearing | Bearing.Center | Bearing | No | you can swith the leave direction of slides of the carousel | | style | undefined | StyleProp<ViewStyle> | No | you can set an optional style for the whole carousel | | fadeAnimationDuration | undefined | number | No | transition animation duration of the fading action (entrance & leave) | | children | undefined | React.ReactElement[] | YES | an array of the Elements that you want to use them as each slides |

You can also manage controlling the carousel using ref value and here is the type of the reference value:

type FadeCaroselInstance = {
  next: () => void;
  prev: () => void;
  getCurrentIndex: () => number,
  switchToIndex: (index: number) => void;
}

Example:

import FadeCarousel, { FadeCaroselInstance } from 'react-native-fadecarousel';

const carousel = React.useRef<FadeCaroselInstance>(null);

const wantsToGoNext = () => {
    carousel.current?.next();
}

<FadeCarousel ... ref={carousel}>
    ...
</FadeCarousel>