react-native-reanimated-carousel
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