cddluv / react-native-reanimated-carousel

Simple React Native carousel component,fully implemented using reanimated v2,support to IOS/Android.

English | 简体中文

react-native-reanimated-carousel

Reason

🎉 Simple、Infinitely scrolling very smooth、Fully implemented using Reanimated 2!

The common RN infinite scroll component. It's common to get stuck on a fast slide. Wait for the next element to appear. This component will not have similar problems. That's why this library was created.

At present, it only meets the needs of my work. Welcome to raise PR/ISSUES.Try it with snack

Use react-native-snap-carousel for quick swiping,you can see caton clearly when you reach the junction.(gif 4.6mb)

Compared with react-native-reanimated-carousel,The actual test was ten slides per second, but it didn't show up very well in gif.（gif 83mb）

---

Installation

Open a Terminal in the project root and run:

yarn add react-native-reanimated-carousel

Or if you use npm:

npm install react-native-reanimated-carousel

Now we need to install react-native-gesture-handler and react-native-reanimated(>=2.0.0).

EXPO

If use EXPO managed workflow please ensure that the version is greater than 41.Because the old version not support Reanimated(v2)

Usage

import Carousel from "react-native-reanimated-carousel";

// ...

<Carousel<{ color: string }>
  width={width}
  data={[{ color: "red" }, { color: "purple" }, { color: "yellow" }]}
  renderItem={({ color }) => {
    return (
      <View
        style={{
          backgroundColor: color,
          justifyContent: "center",
          flex: 1,
        }}
      />
    );
  }}
/>;

Props

name	required	default	types	description
data	✅		T[]	Carousel items data set
width	✅		number	Specified carousel container width
renderItem	✅		(data: T, index: number) => React.ReactNode	Render carousel item
autoPlay	❌	false	boolean	Auto play
autoPlayReverse	❌	false	boolean	Auto play reverse playback
autoPlayInterval	❌	1000	autoPlayInterval	Auto play playback interval
mode	❌	defalut	'default'|'parallax'	Carousel Animated transitions
loop	❌	true	boolean	Carousel loop playback
parallaxScrollingOffset	❌	100	number	When use 'parallax' Layout props,this prop can be control prev/next item offset
parallaxScrollingScale	❌	0.8	number	When use 'parallax' Layout props,this prop can be control prev/next item scale
style	❌	{}	ViewStyle	Carousel container style
height	❌	'100%'	undefined | string | number	Specified carousel container height
timingConfig	❌	{duration: 250}	Animated.WithTimingConfig	Timing config of translation animated
onSnapToItem	❌		(index: number) => void	Callback fired when navigating to an item
onScrollBegin	❌		() => void	Callback fired when scroll begin
onScrollEnd	❌		(previous: number, current: number) => void	Callback fired when scroll end
panGestureHandlerProps	❌	{}	Omit<Partial<PanGestureHandlerProps>,'onHandlerStateChange'>	PanGestureHandler props

Ref

name	types	description
prev	()=>void	Play the last one
loop	()=>void	Play the next one
goToIndex	(index: number, animated?: boolean) => void	Go to index
getCurrentIndex	()=>number	Get current item index

Example

yarn example -- ios
yarn example -- android

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT