@momo-kits/carousel 0.161.2-beta.6 → 0.161.2-beta.8

package/index.tsx

@@ -8,6 +8,7 @@ import React, {
   useState,
 } from 'react';
 import {
+  Animated,
   Dimensions,
   FlatList,
   GestureResponderEvent,
@@ -16,79 +17,14 @@ 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,
@@ -126,7 +62,7 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
 
   const flatListRef = useRef<FlatList>(null);
   const autoplayTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const scrollX = useSharedValue(0);
+  const scrollXRef = useRef(new Animated.Value(0)).current;
   const containerWidthRef = useRef(viewportWidth);
   const isAutoplayPausedRef = useRef(false);
   const currentIndexRef = useRef(firstItem);
@@ -310,14 +246,15 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
   );
 
   const handleScroll = useCallback(
-    (offsetX: number) => {
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetX = event.nativeEvent.contentOffset.x;
       const index = Math.round(offsetX / itemWidth);
       const realIndex = getRealIndex(index);
 
       if (realIndex !== currentIndexRef.current) {
         currentIndexRef.current = realIndex;
         setCurrentIndex(realIndex);
-
+        
         if (onScrollIndexChanged) {
           onScrollIndexChanged(realIndex);
         }
@@ -414,17 +351,41 @@ 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 (
-        <CarouselItem
-          index={index}
-          itemWidth={itemWidth}
-          scrollX={scrollX}
-          inactiveSlideOpacity={inactiveSlideOpacity}
-          inactiveSlideScale={inactiveSlideScale}
-          slideStyle={slideStyle}
+        <Animated.View
+          style={[
+            { width: itemWidth },
+            slideStyle,
+            {
+              opacity,
+              transform: [{ scale }],
+            },
+          ]}
         >
           {renderItem({ item, index: realIndex })}
-        </CarouselItem>
+        </Animated.View>
       );
     },
     [
@@ -434,7 +395,7 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
       itemWidth,
       slideStyle,
       renderItem,
-      scrollX,
+      scrollXRef,
     ]
   );
 
@@ -448,24 +409,24 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
     [keyExtractor]
   );
 
-  const emitScrollProp = useCallback(
-    (offsetX: number) => {
-      if (onScrollProp) {
-        onScrollProp({
-          nativeEvent: { contentOffset: { x: offsetX, y: 0 } },
-        } as NativeSyntheticEvent<NativeScrollEvent>);
+  const onScrollEvent = useMemo(() => {
+    const scrollHandler = Animated.event(
+      [{ nativeEvent: { contentOffset: { x: scrollXRef } } }],
+      {
+        useNativeDriver: true,
+        listener: handleScroll,
       }
-    },
-    [onScrollProp],
-  );
+    );
 
-  const onScrollEvent = useAnimatedScrollHandler({
-    onScroll: (event) => {
-      scrollX.value = event.contentOffset.x;
-      runOnJS(handleScroll)(event.contentOffset.x);
-      runOnJS(emitScrollProp)(event.contentOffset.x);
-    },
-  });
+    if (onScrollProp) {
+      return (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        scrollHandler(event);
+        onScrollProp(event);
+      };
+    }
+
+    return scrollHandler;
+  }, [scrollXRef, handleScroll, onScrollProp]);
 
   useEffect(() => {
     if (isLayoutReady && firstItem > 0 && firstItem < data.length) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/carousel",
-    "version": "0.161.2-beta.6",
+    "version": "0.161.2-beta.8",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {