Simple carousel component.Fully implemented using Reanimated v2.Support to IOS a...
source link: https://reactnativeexample.com/simple-carousel-component-fully-implemented-using-reanimated-v2-support-to-ios-and-android/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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).
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 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
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK