@momo-kits/carousel 0.159.1-beta.5 → 0.160.1-beta.7

package/index.tsx

@@ -8,7 +8,6 @@ import React, {
   useState,
 } from 'react';
 import {
-  Animated,
   Dimensions,
   FlatList,
   GestureResponderEvent,
@@ -17,14 +16,79 @@ import {
   NativeSyntheticEvent,
   Platform,
   StyleSheet,
-  View
+  View,
 } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  runOnJS,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+  type SharedValue,
+} from 'react-native-reanimated';
 import { CarouselProps, CarouselRef } from './types';
 
 const { width: viewportWidth } = Dimensions.get('window');
 
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
 
+type CarouselItemProps = {
+  index: number;
+  itemWidth: number;
+  scrollX: SharedValue<number>;
+  inactiveSlideOpacity: number;
+  inactiveSlideScale: number;
+  slideStyle: any;
+  children: React.ReactNode;
+};
+
+const CarouselItem: React.FC<CarouselItemProps> = ({
+  index,
+  itemWidth,
+  scrollX,
+  inactiveSlideOpacity,
+  inactiveSlideScale,
+  slideStyle,
+  children,
+}) => {
+  const animatedStyle = useAnimatedStyle(() => {
+    const inputRange = [
+      (index - 1) * itemWidth,
+      index * itemWidth,
+      (index + 1) * itemWidth,
+    ];
+    const opacity =
+      inactiveSlideOpacity < 1
+        ? interpolate(
+            scrollX.value,
+            inputRange,
+            [inactiveSlideOpacity, 1, inactiveSlideOpacity],
+            Extrapolation.CLAMP,
+          )
+        : 1;
+    const scale =
+      inactiveSlideScale < 1
+        ? interpolate(
+            scrollX.value,
+            inputRange,
+            [inactiveSlideScale, 1, inactiveSlideScale],
+            Extrapolation.CLAMP,
+          )
+        : 1;
+    return {
+      opacity,
+      transform: [{ scale }],
+    };
+  });
+
+  return (
+    <Animated.View style={[{ width: itemWidth }, slideStyle, animatedStyle]}>
+      {children}
+    </Animated.View>
+  );
+};
+
 const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
   const {
     data,
@@ -62,7 +126,7 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
 
   const flatListRef = useRef<FlatList>(null);
   const autoplayTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const scrollXRef = useRef(new Animated.Value(0)).current;
+  const scrollX = useSharedValue(0);
   const containerWidthRef = useRef(viewportWidth);
   const isAutoplayPausedRef = useRef(false);
   const currentIndexRef = useRef(firstItem);
@@ -246,15 +310,14 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
   );
 
   const handleScroll = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const offsetX = event.nativeEvent.contentOffset.x;
+    (offsetX: number) => {
       const index = Math.round(offsetX / itemWidth);
       const realIndex = getRealIndex(index);
 
       if (realIndex !== currentIndexRef.current) {
         currentIndexRef.current = realIndex;
         setCurrentIndex(realIndex);
-        
+
         if (onScrollIndexChanged) {
           onScrollIndexChanged(realIndex);
         }
@@ -351,41 +414,17 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
         );
       }
 
-      const inputRange = [
-        (index - 1) * itemWidth,
-        index * itemWidth,
-        (index + 1) * itemWidth,
-      ];
-
-      const opacity = hasOpacityAnimation
-        ? scrollXRef.interpolate({
-            inputRange,
-            outputRange: [inactiveSlideOpacity, 1, inactiveSlideOpacity],
-            extrapolate: 'clamp',
-          })
-        : 1;
-
-      const scale = hasScaleAnimation
-        ? scrollXRef.interpolate({
-            inputRange,
-            outputRange: [inactiveSlideScale, 1, inactiveSlideScale],
-            extrapolate: 'clamp',
-          })
-        : 1;
-
       return (
-        <Animated.View
-          style={[
-            { width: itemWidth },
-            slideStyle,
-            {
-              opacity,
-              transform: [{ scale }],
-            },
-          ]}
+        <CarouselItem
+          index={index}
+          itemWidth={itemWidth}
+          scrollX={scrollX}
+          inactiveSlideOpacity={inactiveSlideOpacity}
+          inactiveSlideScale={inactiveSlideScale}
+          slideStyle={slideStyle}
         >
           {renderItem({ item, index: realIndex })}
-        </Animated.View>
+        </CarouselItem>
       );
     },
     [
@@ -395,7 +434,7 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
       itemWidth,
       slideStyle,
       renderItem,
-      scrollXRef,
+      scrollX,
     ]
   );
 
@@ -409,24 +448,24 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
     [keyExtractor]
   );
 
-  const onScrollEvent = useMemo(() => {
-    const scrollHandler = Animated.event(
-      [{ nativeEvent: { contentOffset: { x: scrollXRef } } }],
-      {
-        useNativeDriver: true,
-        listener: handleScroll,
+  const emitScrollProp = useCallback(
+    (offsetX: number) => {
+      if (onScrollProp) {
+        onScrollProp({
+          nativeEvent: { contentOffset: { x: offsetX, y: 0 } },
+        } as NativeSyntheticEvent<NativeScrollEvent>);
       }
-    );
-
-    if (onScrollProp) {
-      return (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-        scrollHandler(event);
-        onScrollProp(event);
-      };
-    }
+    },
+    [onScrollProp],
+  );
 
-    return scrollHandler;
-  }, [scrollXRef, handleScroll, onScrollProp]);
+  const onScrollEvent = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      scrollX.value = event.contentOffset.x;
+      runOnJS(handleScroll)(event.contentOffset.x);
+      runOnJS(emitScrollProp)(event.contentOffset.x);
+    },
+  });
 
   useEffect(() => {
     if (isLayoutReady && firstItem > 0 && firstItem < data.length) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/carousel",
-    "version": "0.159.1-beta.5",
+    "version": "0.160.1-beta.7",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {