Saturday, 9 October, 2021 UTC
Summary
react-native-reanimated-carousel
Ref
Contributing
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
EXPO
react-native-gesture-handler and react-native-reanimated(>=2.0.0).If use EXPO managed workflow please ensure that the version is greater than 41.Because the old version not support
Usage
Reanimated(v2)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 |
| 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 |
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