react-native-reanimated-carousel

platforms
npm
npm
github issues
github closed issues


Simple carousel component!

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.

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 true T[] Carousel items data set
width true number Specified carousel container width
renderItem true (data: T, index: number) => React.ReactNode Render carousel item
autoPlay false false boolean Auto play
autoPlayReverse false false boolean Auto play reverse playback
autoPlayInterval false 1000 autoPlayInterval Auto play playback interval
mode false defalut ‘default’|’parallax’ Carousel Animated transitions
loop false true boolean Carousel loop playback
parallaxScrollingOffset false 100 number When use ‘default’ Layout props,this prop can be control prev/next item offset
parallaxScrollingScale false 0.8 number When use ‘default’ Layout props,this prop can be control prev/next item scale
style false {} ViewStyle Carousel container style
height false ‘100%’ undefined | string | number Specified carousel container height
timingConfig false {duration: 250} Animated.WithTimingConfig Timing config of translation animated

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

Contributing

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

License

MIT

GitHub

https://github.com/dohooo/react-native-reanimated-carousel