Description:
A simple, infinitely scrolling React Native carousel using Reanimated 2.
How to use it:
1. Install the package.
# Yarn $ yarn add react-native-reanimated-carousel # NPM $ npm i react-native-reanimated-carousel
2. Import the carousel component.
import Carousel from "react-native-reanimated-carousel";
3. Add the carousel component to the app.
<Carousel<{ color: string }>
width={width}
data={[{ color: "red" }, { color: "purple" }, { color: "yellow" }]}
renderItem={({ color }) => {
return (
<View
style={{
backgroundColor: color,
justifyContent: "center",
flex: 1,
}}
/>
);
}}
/>;4. Available props.
/**
* Carousel loop playback.
* @default true
*/
loop?: boolean;
/**
* Carousel Animated transitions.
* @default 'default'
*/
mode?: TMode;
/**
* Render carousel item.
*/
renderItem: (data: T, index: number) => React.ReactNode;
/**
* Specified carousel container width.
*/
width: number;
/**
* Specified carousel container height.
* @default '100%'
*/
height?: FlexStyle['height'];
/**
* Carousel items data set.
*/
data: T[];
/**
* Auto play
*/
autoPlay?: boolean;
/**
* Auto play
* @description reverse playback
*/
autoPlayReverse?: boolean;
/**
* Auto play
* @description playback interval
*/
autoPlayInterval?: number;
/**
* Carousel container style
*/
style?: ViewStyle;
/**
* When use 'default' Layout props,this prop can be control prev/next item offset.
* @default 100
*/
parallaxScrollingOffset?: number;
/**
* When use 'default' Layout props,this prop can be control prev/next item offset.
* @default 0.8
*/
parallaxScrollingScale?: number;
/**
* Callback fired when navigating to an item
*/
onSnapToItem?: (index: number) => void;
/**
* Timing config of translation animated
*/
timingConfig?: Animated.WithTimingConfig;
/**
* On scroll begin
*/
onScrollBegin?: () => void;
/**
* On scroll end
*/
onScrollEnd?: (previous: number, current: number) => void;
/**
* PanGestureHandler props
*/
panGestureHandlerProps?: Omit<
Partial<PanGestureHandlerProps>,
'onHandlerStateChange'
>;Preview:
