perf: add props 'windowSize'

#46

src/Carousel.tsx

@@ -95,6 +95,13 @@ export interface ICarouselProps<T extends unknown> {
         Partial<PanGestureHandlerProps>,
         'onHandlerStateChange'
     >;
+    /**
+     * Determines the maximum number of items will respond to scroll animation events,
+     * windowSize={11} will active visible item plus up to 5 items above and 5 below the viewpor,
+     * Reducing this number will reduce the calculation of the animation value and may improve performance.
+     * @default 0
+     */
+    windowSize?: number;
     /**
      * Render carousel item.
      */
@@ -161,6 +168,7 @@ function Carousel<T extends unknown = any>(
         renderItem,
         onSnapToItem,
         onProgressChange,
+        windowSize,
     } = props;
 
     usePropsErrorBoundary({
@@ -384,6 +392,7 @@ function Carousel<T extends unknown = any>(
         total: data.length,
         viewSize: width,
         translation: handlerOffsetX,
+        windowSize,
     });
 
     const renderLayout = React.useCallback(

src/hooks/useOffsetX.ts

@@ -31,12 +31,10 @@ export const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {
     const HALF_WIDTH = 0.5 * width;
 
     const x = useDerivedValue(() => {
-        function inRange(i: number, range: number[]) {
-            return i >= range[0] && i <= range[1];
-        }
+        const { negativeRange, positiveRange } = visibleRanges.value;
         if (
-            !inRange(index, visibleRanges.value.negativeRange) &&
-            !inRange(index, visibleRanges.value.positiveRange)
+            (index < negativeRange[0] || index > negativeRange[1]) &&
+            (index < positiveRange[0] || index > positiveRange[1])
         ) {
             return Number.MAX_SAFE_INTEGER;
         }

src/hooks/useVisibleRanges.tsx

@@ -9,19 +9,14 @@ export type IVisibleRanges = Animated.SharedValue<{
 export function useVisibleRanges(options: {
     total: number;
     viewSize: number;
-    positiveCount?: number;
-    negativeCount?: number;
+    windowSize?: number;
     translation: Animated.SharedValue<number>;
 }): IVisibleRanges {
-    const {
-        total,
-        viewSize,
-        positiveCount = 1,
-        negativeCount = 1,
-        translation,
-    } = options;
+    const { total, viewSize, windowSize = 0, translation } = options;
 
     const ranges = useDerivedValue(() => {
+        const positiveCount = Math.round(windowSize / 2);
+        const negativeCount = windowSize - positiveCount;
         let curIndex = Math.round(-translation.value / viewSize);
         curIndex = curIndex < 0 ? (curIndex % total) + total : curIndex;
         const negativeRange = [
@@ -41,7 +36,7 @@ export function useVisibleRanges(options: {
             positiveRange[0] = 0;
         }
         return { negativeRange, positiveRange };
-    }, [positiveCount, positiveCount, total, translation]);
+    }, [total, windowSize, translation]);
 
     return ranges;
 }

src/utils/log.ts

@@ -2,6 +2,6 @@
  * In worklet
  * e.g. runOnJS(lop)(...);
  */
-export function log(msg: any) {
-    console.log(msg);
+export function log(...msg: any) {
+    console.log(...msg);
 }