related-ui-components 2.7.5 → 2.7.7

package/src/components/CarouselCardStack/CarouselCardStack.tsx

@@ -25,9 +25,11 @@ const SIDE_CARD_TRANSLATE_X_FACTOR = Math.min(0.32, MAX_X_FACTOR);
 const SIDE_CARD_TRANSLATE_X = CARD_WIDTH * SIDE_CARD_TRANSLATE_X_FACTOR;
 const ACTIVE_CARD_SCALE = 1.0;
 const SPRING_CONFIG = { damping: 18, stiffness: 120, mass: 0.6 };
-const FADE_SPRING_CONFIG = { damping: 35, stiffness: 50, mass: 1.2 };
 const SIDE_CARD_ROTATION_DEGREES = 7;
 
+// Only render visible items + buffer
+const VISIBLE_RANGE = 2; // Items on each side of active item
+
 interface CarouselItemOriginal {
   id: string;
   image: string;
@@ -42,7 +44,7 @@ interface CarouselCardStackProps {
   data: CarouselItemOriginal[];
   cardHeight?: number;
   cardWidth?: number;
-  backgroundColor? : string;
+  backgroundColor?: string;
 }
 
 const createVirtualData = (
@@ -66,6 +68,91 @@ const createVirtualData = (
   return [...prevSegment, ...currSegment, ...nextSegment];
 };
 
+// Memoized card component
+const CarouselCard = React.memo<{
+  item: CarouselItemVirtual;
+  index: number;
+  activeIndex: Animated.SharedValue<number>;
+  gestureTranslateX: Animated.SharedValue<number>;
+  cardWidth: number;
+  cardHeight: number;
+  virtualDataLength: number;
+}>(({ item, index, activeIndex, gestureTranslateX, cardWidth, cardHeight, virtualDataLength }) => {
+  const animatedStyle = useAnimatedStyle(() => {
+    const currentCardDragOffset = gestureTranslateX.value / cardWidth;
+    const displayOffset = index - (activeIndex.value - currentCardDragOffset);
+
+    // Early return for items that are too far away to optimize performance
+    const absDisplayOffset = Math.abs(displayOffset);
+    if (absDisplayOffset > 2.5) {
+      return {
+        opacity: 0,
+        transform: [{ translateX: 0 }, { scale: 0.8 }, { rotateZ: '0deg' }],
+        zIndex: 0,
+      };
+    }
+    
+    const scale = interpolate(
+      displayOffset,
+      [-1, 0, 1],
+      [SIDE_CARD_SCALE_FACTOR, ACTIVE_CARD_SCALE, SIDE_CARD_SCALE_FACTOR],
+      Extrapolation.CLAMP
+    );
+
+    const translateX = interpolate(
+      displayOffset,
+      [-1, 0, 1],
+      [-SIDE_CARD_TRANSLATE_X, 0, SIDE_CARD_TRANSLATE_X],
+      Extrapolation.CLAMP
+    );
+
+    const rotation = interpolate(
+      displayOffset,
+      [-1, 0, 1],
+      [-SIDE_CARD_ROTATION_DEGREES, 0, SIDE_CARD_ROTATION_DEGREES],
+      Extrapolation.CLAMP
+    );
+
+    const opacity = interpolate(
+      absDisplayOffset,
+      [0, 1, 2, 2.75],
+      [1, 1, 0.6, 0],
+      Extrapolation.CLAMP
+    );
+
+    const snappedDisplayOffset = index - Math.round(activeIndex.value);
+    const zIndex = virtualDataLength - Math.abs(snappedDisplayOffset);
+
+    return {
+      transform: [{ translateX }, { scale }, { rotateZ: `${rotation}deg` }],
+      opacity,
+      zIndex,
+    };
+  }, [index, cardWidth, virtualDataLength]);
+
+  return (
+    <Animated.View
+      style={[
+        styles.card,
+        { width: cardWidth, height: cardHeight },
+        animatedStyle,
+      ]}
+    >
+      <Image 
+        source={{ uri: item.image }} 
+        style={styles.cardImage}
+        resizeMode="cover"
+        fadeDuration={0}
+      />
+      {item.title && (
+        <View style={styles.titleContainer}>
+          <Text style={styles.cardTitle}>{item.title}</Text>
+        </View>
+      )}
+    </Animated.View>
+  );
+});
+
 const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
   data: originalData,
   cardHeight = CARD_HEIGHT,
@@ -73,7 +160,6 @@ const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
   backgroundColor = "transparent"
 }) => {
   const { theme } = useTheme();
-
   const N_original = originalData.length;
 
   const virtualData = useMemo(
@@ -90,35 +176,29 @@ const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
     gestureTranslateX.value = 0;
   }, [N_original, activeIndex, gestureTranslateX]);
 
-  // Worklet to handle the loop reset
-  const handleLoopReset = () => {
-    "worklet";
-    if (N_original === 0) return;
-
-    const currentValue = Math.round(activeIndex.value);
-
-    // If in the "next" segment (indices >= 2*N_original)
-    if (currentValue >= N_original * 2) {
-      activeIndex.value = currentValue - N_original;
-    }
-    // If in the "prev" segment (indices < N_original)
-    else if (currentValue < N_original) {
-      activeIndex.value = currentValue + N_original;
-    }
-  };
+  // Calculate visible items - moved outside of render
+  const visibleItems = useDerivedValue(() => {
+    const center = Math.round(activeIndex.value);
+    const start = Math.max(0, center - VISIBLE_RANGE);
+    const end = Math.min(virtualData.length - 1, center + VISIBLE_RANGE);
+    
+    return virtualData.slice(start, end + 1).map((item, sliceIndex) => ({
+      item,
+      originalIndex: start + sliceIndex
+    }));
+  });
 
   useDerivedValue(() => {
-  const currentValue = Math.round(activeIndex.value);
-  
-  // Only reset if we're at the boundaries and not currently animating (gestureTranslateX is 0)
-  if (gestureTranslateX.value === 0) { // i.e., spring animation for gesture has finished
-    if (currentValue >= N_original * 2) {
-      activeIndex.value = currentValue - N_original;
-    } else if (currentValue < N_original) {
-      activeIndex.value = currentValue + N_original;
+    const currentValue = Math.round(activeIndex.value);
+    
+    if (gestureTranslateX.value === 0) {
+      if (currentValue >= N_original * 2) {
+        activeIndex.value = currentValue - N_original;
+      } else if (currentValue < N_original) {
+        activeIndex.value = currentValue + N_original;
+      }
     }
-  }
-});
+  });
 
   const panGesture = Gesture.Pan()
     .activeOffsetX([-10, 10])
@@ -140,22 +220,12 @@ const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
         newTargetVirtualIndex = activeIndex.value - 1;
       }
 
-      // Clamp to virtual data bounds
       newTargetVirtualIndex = Math.max(
         0,
         Math.min(newTargetVirtualIndex, virtualData.length - 1)
       );
 
-      activeIndex.value = withSpring(
-        newTargetVirtualIndex,
-        SPRING_CONFIG,
-        (finished) => {
-          "worklet";
-          if (finished) {
-            handleLoopReset();
-          }
-        }
-      );
+      activeIndex.value = withSpring(newTargetVirtualIndex, SPRING_CONFIG);
       gestureTranslateX.value = withSpring(0, SPRING_CONFIG);
       contextX.value = 0;
     });
@@ -175,100 +245,40 @@ const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
   }
 
   return (
-    <View style={[styles.container, { height: cardHeight + 60, backgroundColor: backgroundColor}]}>
+    <View style={[styles.container, { height: cardHeight + 60, backgroundColor }]}>
       <GestureDetector gesture={panGesture}>
         <Animated.View style={[styles.cardContainer, { height: cardHeight }]}>
-          {virtualData.map((item, index) => {
-            const animatedStyle = useAnimatedStyle(() => {
-              const currentCardDragOffset = gestureTranslateX.value / cardWidth;
-              const displayOffset =
-                index - (activeIndex.value - currentCardDragOffset);
-
-              const scale = interpolate(
-                displayOffset,
-                [-1, 0, 1],
-                [
-                  SIDE_CARD_SCALE_FACTOR,
-                  ACTIVE_CARD_SCALE,
-                  SIDE_CARD_SCALE_FACTOR,
-                ],
-                Extrapolation.CLAMP
-              );
-
-              const translateX = interpolate(
-                displayOffset,
-                [-1, 0, 1],
-                [-SIDE_CARD_TRANSLATE_X, 0, SIDE_CARD_TRANSLATE_X],
-                Extrapolation.CLAMP
-              );
-
-              const rotation = interpolate(
-                displayOffset,
-                [-1, 0, 1], 
-                [
-                  -SIDE_CARD_ROTATION_DEGREES,
-                  0,
-                  SIDE_CARD_ROTATION_DEGREES,
-                ], 
-                Extrapolation.CLAMP,
-              );
-
-              const opacity = interpolate(
-                Math.abs(displayOffset),
-                [0, 1, 2, 2.75],
-                [1, 1, 0.6, 0],
-                Extrapolation.CLAMP
-              );
-
-              const snappedDisplayOffset =
-                index - Math.round(activeIndex.value);
-              const zIndex =
-                virtualData.length - Math.abs(snappedDisplayOffset);
-
-
-              return {
-                transform: [{ translateX }, { scale }, { rotateZ: `${rotation}deg` }],
-                opacity,
-                zIndex,
-              };
-            });
-
-            return (
-              <Animated.View
-                key={item.uniqueId}
-                style={[
-                  styles.card,
-                  { width: cardWidth, height: cardHeight },
-                  animatedStyle,
-                ]}
-              >
-                <Image source={{ uri: item.image }} style={styles.cardImage} />
-                {item.title && (
-                  <View style={styles.titleContainer}>
-                    <Text style={styles.cardTitle}>{item.title}</Text>
-                  </View>
-                )}
-              </Animated.View>
-            );
-          })}
+          {/* Render all items but optimize with early returns in animations */}
+          {virtualData.map((item, index) => (
+            <CarouselCard
+              key={item.uniqueId}
+              item={item}
+              index={index}
+              activeIndex={activeIndex}
+              gestureTranslateX={gestureTranslateX}
+              cardWidth={cardWidth}
+              cardHeight={cardHeight}
+              virtualDataLength={virtualData.length}
+            />
+          ))}
         </Animated.View>
       </GestureDetector>
 
       {N_original > 0 && (
         <View style={styles.paginationContainer}>
           {originalData.map((_, i) => {
-            const isActiveDot = useDerivedValue(() => {
-              return activeDotIndex.value === i;
-            });
             const dotStyle = useAnimatedStyle(() => {
+              const isActive = activeDotIndex.value === i;
               return {
-                width: withSpring(isActiveDot.value ? 24 : 8, SPRING_CONFIG),
+                width: withSpring(isActive ? 24 : 8, SPRING_CONFIG),
                 height: 8,
                 borderRadius: 4,
-                backgroundColor: isActiveDot.value ? theme.primary : "#FFFFFF",
+                backgroundColor: isActive ? theme.primary : "#FFFFFF",
                 marginHorizontal: 4,
+                opacity: isActive ? 1 : 0.5,
               };
             });
+
             return <Animated.View key={`dot-${i}`} style={dotStyle} />;
           })}
         </View>
@@ -325,4 +335,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default CarouselCardStack;
+export default CarouselCardStack;