related-ui-components 2.7.6 → 2.7.8

package/src/components/CarouselCardStack/CarouselCardStack.tsx

@@ -1,20 +1,19 @@
-import React, { useState, useEffect, useMemo } from "react";
-import { View, StyleSheet, Image, Dimensions, Text } from "react-native";
+import { Image } from "expo-image";
+import React, { useEffect, useMemo } from "react";
+import { Dimensions, StyleSheet, Text, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withSpring,
-  interpolate,
-  Extrapolate,
-  useDerivedValue,
-  runOnJS,
-  Extrapolation,
+    Extrapolation,
+    interpolate,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
+    withSpring,
 } from "react-native-reanimated";
 import { useTheme } from "../../theme";
 
+// --- Constants remain the same ---
 const { width: SCREEN_WIDTH } = Dimensions.get("window");
-
 const CARD_WIDTH_FACTOR = 0.5;
 const CARD_ASPECT_RATIO = 1.35;
 const SIDE_CARD_SCALE_FACTOR = 0.85;
@@ -25,31 +24,29 @@ 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;
+const VISIBILITY_WINDOW = 3; // Render active card + 2 on each side
 
+// --- Interfaces remain the same ---
 interface CarouselItemOriginal {
   id: string;
   image: string;
   title?: string;
 }
-
 interface CarouselItemVirtual extends CarouselItemOriginal {
   uniqueId: string;
 }
-
 interface CarouselCardStackProps {
   data: CarouselItemOriginal[];
   cardHeight?: number;
   cardWidth?: number;
-  backgroundColor? : string;
+  backgroundColor?: string;
 }
 
 const createVirtualData = (
   originalData: CarouselItemOriginal[]
 ): CarouselItemVirtual[] => {
   if (!originalData || originalData.length === 0) return [];
-
   const prefixItems = (
     items: CarouselItemOriginal[],
     segmentPrefix: string
@@ -58,221 +55,209 @@ const createVirtualData = (
       ...item,
       uniqueId: `${segmentPrefix}-${item.id}-${idx}`,
     }));
-
   const prevSegment = prefixItems(originalData, "prev");
   const currSegment = prefixItems(originalData, "curr");
   const nextSegment = prefixItems(originalData, "next");
-
   return [...prevSegment, ...currSegment, ...nextSegment];
 };
 
-const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
+const CarouselCard = React.memo(
+  ({
+    item,
+    index,
+    activeIndex,
+    gestureTranslateX,
+    cardWidth,
+    cardHeight,
+    virtualDataLength,
+  }: {
+    item: CarouselItemVirtual;
+    index: number;
+    activeIndex: Animated.SharedValue<number>;
+    gestureTranslateX: Animated.SharedValue<number>;
+    cardWidth: number;
+    cardHeight: number;
+    virtualDataLength: number;
+  }) => {
+    const animatedStyle = useAnimatedStyle(() => {
+      const currentCardDragOffset = gestureTranslateX.value / cardWidth;
+      const displayOffset =
+        index - (activeIndex.value - currentCardDragOffset);
+
+      // --- THE CORE CHANGE IS HERE ---
+      // Check if the card is within our visibility window on the UI thread.
+      const isVisible = Math.abs(displayOffset) < VISIBILITY_WINDOW;
+
+      // If not visible, we don't need to calculate transforms.
+      // `display: 'none'` is highly performant as it removes the item from the layout.
+      if (!isVisible) {
+        return { display: "none" };
+      }
+
+      // Calculations now only run for visible cards
+      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],
+        [1, 1, 0], // Fade out the outermost cards
+        Extrapolation.CLAMP
+      );
+      const snappedDisplayOffset = index - Math.round(activeIndex.value);
+      const zIndex = virtualDataLength - Math.abs(snappedDisplayOffset);
+
+      return {
+        display: "flex", // Ensure it's visible
+        transform: [{ translateX }, { scale }, { rotateZ: `${rotation}deg` }],
+        opacity,
+        zIndex,
+      };
+    });
+
+    return (
+      <Animated.View
+        style={[
+          styles.card,
+          { width: cardWidth, height: cardHeight },
+          animatedStyle,
+        ]}
+      >
+        <Image
+          source={{ uri: item.image }}
+          style={styles.cardImage}
+          cachePolicy="memory-disk"
+          transition={250}
+        />
+        {item.title && (
+          <View style={styles.titleContainer}>
+            <Text style={styles.cardTitle}>{item.title}</Text>
+          </View>
+        )}
+      </Animated.View>
+    );
+  }
+);
+
+CarouselCard.displayName = "CarouselCard"
+
+export const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
   data: originalData,
   cardHeight = CARD_HEIGHT,
   cardWidth = CARD_WIDTH,
-  backgroundColor = "transparent"
+  backgroundColor = "transparent",
 }) => {
   const { theme } = useTheme();
-
   const N_original = originalData.length;
 
-  const virtualData = useMemo(
-    () => createVirtualData(originalData),
-    [originalData]
-  );
+  const virtualData = useMemo(() => createVirtualData(originalData), [originalData]);
 
   const activeIndex = useSharedValue(N_original > 0 ? N_original : 0);
   const gestureTranslateX = useSharedValue(0);
-  const contextX = useSharedValue(0);
 
   useEffect(() => {
     activeIndex.value = N_original > 0 ? N_original : 0;
     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) {
+    } else if (currentValue < N_original) {
       activeIndex.value = currentValue + N_original;
     }
   };
-
-  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;
+  useDerivedValue(() => {
+    if (gestureTranslateX.value === 0) {
+      handleLoopReset();
     }
-  }
-});
+  });
 
   const panGesture = Gesture.Pan()
     .activeOffsetX([-10, 10])
-    .onBegin(() => {
-      contextX.value = gestureTranslateX.value;
-    })
     .onUpdate((event) => {
       gestureTranslateX.value = event.translationX;
     })
     .onEnd((event) => {
       if (virtualData.length === 0) return;
-
       const threshold = cardWidth / 3;
-      let newTargetVirtualIndex = activeIndex.value;
-
+      let newTargetVirtualIndex = Math.round(activeIndex.value);
       if (event.translationX < -threshold) {
-        newTargetVirtualIndex = activeIndex.value + 1;
+        newTargetVirtualIndex++;
       } else if (event.translationX > threshold) {
-        newTargetVirtualIndex = activeIndex.value - 1;
+        newTargetVirtualIndex--;
       }
-
-      // 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;
     });
 
   const activeDotIndex = useDerivedValue(() => {
     if (N_original === 0) return 0;
-    const currentVal = Math.round(activeIndex.value);
-    return ((currentVal % N_original) + N_original) % N_original;
+    return (Math.round(activeIndex.value) % N_original + N_original) % N_original;
   });
 
-  if (virtualData.length === 0) {
-    return (
-      <View style={[styles.container, { height: cardHeight + 60 }]}>
-        <Text style={styles.emptyText}>No items to display</Text>
-      </View>
-    );
-  }
+  if (virtualData.length === 0) { /* ... */ }
 
   return (
-    <View style={[styles.container, { height: cardHeight + 60, backgroundColor: backgroundColor}]}>
+    <View
+      style={[
+        styles.container,
+        { height: cardHeight + 60, backgroundColor: 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>
-            );
-          })}
+          {/* We map over all data, but the logic inside CarouselCard handles visibility */}
+          {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>
 
+      {/* Pagination dots remain the same */}
       {N_original > 0 && (
-        <View style={styles.paginationContainer}>
-          {originalData.map((_, i) => {
-            const isActiveDot = useDerivedValue(() => {
-              return activeDotIndex.value === i;
-            });
-            const dotStyle = useAnimatedStyle(() => {
-              return {
-                width: withSpring(isActiveDot.value ? 24 : 8, SPRING_CONFIG),
-                height: 8,
-                borderRadius: 4,
-                backgroundColor: isActiveDot.value ? theme.primary : "#FFFFFF",
-                marginHorizontal: 4,
-              };
-            });
-            return <Animated.View key={`dot-${i}`} style={dotStyle} />;
-          })}
-        </View>
-      )}
+         <View style={styles.paginationContainer}>
+           {originalData.map((_, i) => {
+             const isActiveDot = useDerivedValue(() => activeDotIndex.value === i);
+             const dotStyle = useAnimatedStyle(() => ({
+                 width: withSpring(isActiveDot.value ? 24 : 8, SPRING_CONFIG),
+                 height: 8,
+                 borderRadius: 4,
+                 backgroundColor: isActiveDot.value ? theme.primary : "#FFFFFF",
+                 marginHorizontal: 4,
+             }));
+             return <Animated.View key={`dot-${i}`} style={dotStyle} />;
+           })}
+         </View>
+       )}
     </View>
   );
 };
@@ -296,7 +281,6 @@ const styles = StyleSheet.create({
   cardImage: {
     width: "100%",
     height: "100%",
-    resizeMode: "cover",
   },
   titleContainer: {
     position: "absolute",
@@ -325,4 +309,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default CarouselCardStack;
+export default CarouselCardStack;