Add chunkSize to more efficiently display cards

README.md

@@ -94,6 +94,12 @@ yarn add react-native-reanimated react-native-gesture-handler
 | swipeLeft  | callback | Animates the card to fling to the left and calls onSwipeLeft   |
 | swipeTop   | callback | Animates the card to fling to the top and calls onSwipeTop     |
 
+## Misc props
+
+| props      | type    | description                                                   | default                                    |
+| :--------- | :------ | :------------------------------------------------------------ | :----------------------------------------- |
+| chunkSize  | number  | The number of cards rendered at a given time                  | `3`                                        |
+
 ## Usage 🧑‍💻
 
 ```typescript
@@ -369,6 +375,10 @@ type SwiperOptions<T> = {
   OverlayLabelRight?: () => JSX.Element;
   OverlayLabelLeft?: () => JSX.Element;
   OverlayLabelTop?: () => JSX.Element;
+   /*
+   * Misc Props
+   */
+  chunkSize?: number;
 };
 ```
 

src/Swiper.tsx

@@ -1,4 +1,4 @@
-import React, { useImperativeHandle, type ForwardedRef } from 'react';
+import React, { useEffect, useImperativeHandle, useRef, type ForwardedRef } from 'react';
 import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
 import { Dimensions } from 'react-native';
 import type { SwiperCardRefType, SwiperOptions } from 'rn-swiper-list';
@@ -36,12 +36,16 @@
     onSwipeStart,
     onSwipeActive,
     onSwipeEnd,
+    chunkSize = 3,
   }: SwiperOptions<T>,
   ref: ForwardedRef<SwiperCardRefType>
 ) => {
   const { activeIndex, refs, swipeRight, swipeLeft, swipeBack, swipeTop } =
     useSwipeControls(data);
 
+  const currentIndexRef = useRef(0);
+  const visibleCardsRef = useRef(data.slice(0, chunkSize));
+
   useImperativeHandle(
     ref,
     () => {
@@ -55,6 +59,19 @@
     [swipeLeft, swipeRight, swipeBack, swipeTop]
   );
 
+  useEffect(() => {
+    visibleCardsRef.current = data.slice(0, chunkSize);
+  }, [data]);
+
+  const updateVisibleCards = () => {
+    const currentIndex = currentIndexRef.current;
+    if (currentIndex >= data.length - chunkSize) {
+      visibleCardsRef.current = data.slice(currentIndex, data.length);
+    } else {
+      visibleCardsRef.current = data.slice(currentIndex, currentIndex + chunkSize);
+    }
+  };
+
   useAnimatedReaction(
     () => {
       return activeIndex.value >= data.length;
@@ -67,12 +84,14 @@
     [data]
   );
 
-  return data.map((item, index) => {
+  return visibleCardsRef.current.map((item, index) => {
+    const actualIndex = currentIndexRef.current + index;
+
     return (
       <SwiperCard
-        key={index}
+        key={actualIndex}
         cardStyle={cardStyle}
-        index={index}
+        index={actualIndex}
         disableRightSwipe={disableRightSwipe}
         disableLeftSwipe={disableLeftSwipe}
         disableTopSwipe={disableTopSwipe}
@@ -92,12 +111,20 @@
         OverlayLabelRight={OverlayLabelRight}
         OverlayLabelLeft={OverlayLabelLeft}
         OverlayLabelTop={OverlayLabelTop}
-        ref={refs[index]}
+        ref={refs[actualIndex]}
         onSwipeRight={(cardIndex) => {
           onSwipeRight?.(cardIndex);
+          if (currentIndexRef.current + chunkSize < data.length) {
+            currentIndexRef.current += 1;
+            updateVisibleCards();
+          }
         }}
         onSwipeLeft={(cardIndex) => {
           onSwipeLeft?.(cardIndex);
+          if (currentIndexRef.current + chunkSize < data.length) {
+            currentIndexRef.current += 1;
+            updateVisibleCards();
+          }
         }}
         onSwipeTop={(cardIndex) => {
           onSwipeTop?.(cardIndex);
@@ -106,7 +133,7 @@
         onSwipeActive={onSwipeActive}
         onSwipeEnd={onSwipeEnd}
       >
-        {renderCard(item, index)}
+        {renderCard(item, actualIndex)}
       </SwiperCard>
     );
   });

src/index.ts

@@ -44,6 +44,8 @@ export type SwiperOptions<T> = {
   OverlayLabelRight?: () => JSX.Element;
   OverlayLabelLeft?: () => JSX.Element;
   OverlayLabelTop?: () => JSX.Element;
+  //* Misc
+  chunkSize?: number;
 };
 export type SwiperCardOptions = {
   index: number;