react-native-reanimated-carousel 4.0.0-alpha.1 → 4.0.0-alpha.10

package/src/hooks/useVisibleRanges.test.tsx

@@ -0,0 +1,179 @@
+import { useSharedValue } from "react-native-reanimated";
+
+import { renderHook } from "@testing-library/react-hooks";
+
+import { useVisibleRanges } from "./useVisibleRanges";
+
+const viewSize = 393;
+
+describe("useVisibleRanges", () => {
+  it("should only display the front of the list when loop is false", async () => {
+    const hook = renderHook(() => {
+      const translation = useSharedValue(-0);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false,
+      });
+
+      return range;
+    });
+
+    const expected = hook.result.current.value;
+
+    expect(expected).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                -3,
+                0,
+              ],
+              "positiveRange": [
+                0,
+                3,
+              ],
+            }
+        `);
+  });
+
+  it("should display the rear of the list and the front of the list when loop is true", async () => {
+    const hook = renderHook(() => {
+      const translation = useSharedValue(-0);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: true,
+      });
+
+      return range;
+    });
+
+    const expected = hook.result.current.value;
+
+    expect(expected).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                8,
+                9,
+              ],
+              "positiveRange": [
+                0,
+                2,
+              ],
+            }
+        `);
+  });
+
+  it("should shows the increased range of the list when the loop is false and swiped the carousel.", async () => {
+    const slide0hook = renderHook(() => {
+      const translation = useSharedValue(-0 * viewSize);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false,
+      });
+
+      return range;
+    }).result.current.value;
+
+    const slide1hook = renderHook(() => {
+      const translation = useSharedValue(-1 * viewSize);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false,
+      });
+
+      return range;
+    }).result.current.value;
+
+    const slide2hook = renderHook(() => {
+      const translation = useSharedValue(-2 * viewSize);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false,
+      });
+
+      return range;
+    }).result.current.value;
+
+    const slide3hook = renderHook(() => {
+      const translation = useSharedValue(-3 * viewSize);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false,
+      });
+
+      return range;
+    }).result.current.value;
+
+    // [0,3] Display the 0,1,2,3 items.
+    expect(slide0hook).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                -3,
+                0,
+              ],
+              "positiveRange": [
+                0,
+                3,
+              ],
+            }
+        `);
+
+    // [1,4] Display the 1,2,3,4 items.
+    expect(slide1hook).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                -2,
+                1,
+              ],
+              "positiveRange": [
+                1,
+                4,
+              ],
+            }
+        `);
+
+    // [2,5] Display the 2,3,4,5 items.
+    expect(slide2hook).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                -1,
+                2,
+              ],
+              "positiveRange": [
+                2,
+                5,
+              ],
+            }
+        `);
+
+    // [3.6] Display the 3,4,5,6 items.
+    expect(slide3hook).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                0,
+                3,
+              ],
+              "positiveRange": [
+                3,
+                6,
+              ],
+            }
+        `);
+  });
+});

package/src/hooks/useVisibleRanges.tsx

@@ -1,49 +1,97 @@
+import { useRef } from "react";
 import type Animated from "react-native-reanimated";
 import { useDerivedValue } from "react-native-reanimated";
 
-export type IVisibleRanges = Animated.SharedValue<{
-  negativeRange: number[]
-  positiveRange: number[]
-}>;
+type Range = [number, number];
+
+export interface VisibleRanges {
+  negativeRange: Range
+  positiveRange: Range
+}
+
+export type IVisibleRanges = Animated.SharedValue<VisibleRanges>;
 
 export function useVisibleRanges(options: {
   total: number
   viewSize: number
   windowSize?: number
   translation: Animated.SharedValue<number>
+  loop?: boolean
 }): IVisibleRanges {
   const {
     total = 0,
     viewSize,
     translation,
-    windowSize: _windowSize = 0,
+    windowSize: _windowSize,
+    loop,
   } = options;
 
-  const windowSize = total <= _windowSize ? total : _windowSize;
+  const windowSize = _windowSize ?? total;
+  const cachedRanges = useRef<VisibleRanges>(null!);
 
   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 = [
-      (curIndex - negativeCount + total) % total,
-      (curIndex - 1 + total) % total,
-    ];
-    const positiveRange = [
-      (curIndex + total) % total,
-      (curIndex + positiveCount + total) % total,
-    ];
-    if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {
-      negativeRange[1] = total - 1;
-      positiveRange[0] = 0;
+
+    let currentIndex = Math.round(-translation.value / viewSize);
+    currentIndex = currentIndex < 0 ? (currentIndex % total) + total : currentIndex;
+
+    let newRanges: VisibleRanges;
+
+    if (!loop) {
+      // Adjusting negative range if the carousel is not loopable.
+      // So, It will be only displayed the positive items.
+      newRanges = {
+        negativeRange: [0 + currentIndex - (windowSize - 1), 0 + currentIndex],
+        positiveRange: [0 + currentIndex, currentIndex + (windowSize - 1)],
+      };
     }
-    if (positiveRange[0] > positiveRange[1]) {
-      negativeRange[1] = total - 1;
-      positiveRange[0] = 0;
+    else {
+      const negativeRange: Range = [
+        (currentIndex - negativeCount + total) % total,
+        (currentIndex - 1 + total) % total,
+      ];
+
+      const positiveRange: Range = [
+        (currentIndex + total) % total,
+        (currentIndex + positiveCount + total) % total,
+      ];
+
+      if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {
+        negativeRange[1] = total - 1;
+        positiveRange[0] = 0;
+      }
+      if (positiveRange[0] > positiveRange[1]) {
+        negativeRange[1] = total - 1;
+        positiveRange[0] = 0;
+      }
+
+      // console.log({ negativeRange, positiveRange ,total,windowSize,a:total <= _windowSize})
+      newRanges = { negativeRange, positiveRange };
     }
-    return { negativeRange, positiveRange };
-  }, [total, windowSize, translation]);
+
+    if (
+      isArraysEqual(
+        cachedRanges.current?.negativeRange ?? [],
+        newRanges.negativeRange,
+      )
+      && isArraysEqual(
+        cachedRanges.current?.positiveRange ?? [],
+        newRanges.positiveRange,
+      )
+    )
+      return cachedRanges.current;
+
+    cachedRanges.current = newRanges;
+    return cachedRanges.current;
+  }, [loop, total, windowSize, translation]);
 
   return ranges;
 }
+
+function isArraysEqual(a: number[], b: number[]): boolean {
+  "worklet";
+  if (a.length !== b.length) return false;
+
+  return a.every((value, index) => value === b[index]);
+}

package/src/index.tsx

@@ -1,10 +1,12 @@
 import Carousel from "./components/Carousel";
+
 export type {
   TCarouselProps,
   ICarouselInstance,
   IComputedDirectionTypes,
   CarouselRenderItem,
 } from "./types";
+export type { TAnimationStyle } from "./components/BaseLayout";
 export type { ILayoutConfig } from "./layouts/stack";
 
 export default Carousel;

package/src/types.ts

@@ -153,10 +153,19 @@ export type TCarouselProps<T = any> = {
   testID?: string
   /**
      * Maximum offset value for once scroll.
-     * props.vertical = true => maxScrollDistancePerSwipeY
-     * props.vertical = false => maxScrollDistancePerSwipeX
+     * Carousel cannot scroll over than this value.
      * */
   maxScrollDistancePerSwipe?: number
+  /**
+    * Minimum offset value for once scroll.
+    * If the translation value is less than this value, the carousel will not scroll.
+    * */
+  minScrollDistancePerSwipe?: number
+  /**
+     * @experimental This API will be changed in the future.
+     * If positive, the carousel will scroll to the positive direction and vice versa.
+     * */
+  fixedDirection?: "positive" | "negative"
   /**
       * Custom carousel config.
       */
@@ -175,9 +184,9 @@ export type TCarouselProps<T = any> = {
       */
   onSnapToItem?: (index: number) => void
   /**
-      * On scroll begin
+      * On scroll start
       */
-  onScrollBegin?: () => void
+  onScrollStart?: () => void
   /**
       * On scroll end
       */

package/src/utils/compute-offset-if-data-changed.test.ts

@@ -0,0 +1,30 @@
+import { computeOffsetIfDataChanged } from "./compute-offset-if-data-changed";
+
+describe("computeOffsetIfDataChanged", () => {
+  const size = 634;
+  it("should return the correct values, if index is 0", () => {
+    const index = 0;
+    const result = computeOffsetIfDataChanged({
+      direction: -1,
+      previousLength: 4,
+      currentLength: 6,
+      size,
+      handlerOffset: index * size,
+    });
+
+    expect(result).toMatchInlineSnapshot("0");
+  });
+
+  it("should return the correct values, if index is 1", () => {
+    const index = 1;
+    const result = computeOffsetIfDataChanged({
+      direction: -1,
+      previousLength: 4,
+      currentLength: 6,
+      size,
+      handlerOffset: index * size,
+    });
+
+    expect(result).toMatchInlineSnapshot("634");
+  });
+});

package/src/utils/{computeNewIndexWhenDataChanges.ts → compute-offset-if-data-changed.ts}

@@ -6,7 +6,7 @@ export function omitZero(a: number, b: number) {
   return b;
 }
 
-export function computeNewIndexWhenDataChanges(params: {
+export function computeOffsetIfDataChanged(params: {
   direction: number
   handlerOffset: number
   size: number

package/src/utils/compute-offset-if-size-changed.test.ts

@@ -0,0 +1,78 @@
+import { computeOffsetIfSizeChanged } from "./compute-offset-if-size-changed";
+
+describe("computeOffsetIfSizeChanged", () => {
+  it("[CASE 1] should return the correct values when size does not change", () => {
+    const prevIndex = 1;
+    const prevSize = 500;
+    const size = 500;
+    const handlerOffset = prevIndex * size;
+    const result = computeOffsetIfSizeChanged({
+      prevSize,
+      size,
+      handlerOffset,
+    });
+
+    const finallyIndex = result / size;
+    expect(finallyIndex).toEqual(prevIndex);
+  });
+
+  it("[CASE 2] should return the correct values when size changes from 500 to 400", () => {
+    const prevIndex = 1;
+    const prevSize = 500;
+    const size = 400;
+    const handlerOffset = prevIndex * prevSize;
+    const result = computeOffsetIfSizeChanged({
+      prevSize,
+      size,
+      handlerOffset,
+    });
+
+    const finallyIndex = result / size;
+    expect(finallyIndex).toEqual(prevIndex);
+  });
+
+  it("[CASE 3] should return the correct values when size changes from 500 to 499", () => {
+    const prevIndex = 1;
+    const prevSize = 500;
+    const size = 499;
+    const handlerOffset = prevIndex * prevSize;
+    const result = computeOffsetIfSizeChanged({
+      prevSize,
+      size,
+      handlerOffset,
+    });
+
+    const finallyIndex = result / size;
+    expect(finallyIndex).toEqual(prevIndex);
+  });
+
+  it("[CASE 4] should return the correct values when size changes from 500 to 501", () => {
+    const prevIndex = 1;
+    const prevSize = 500;
+    const size = 501;
+    const handlerOffset = prevIndex * prevSize;
+    const result = computeOffsetIfSizeChanged({
+      prevSize,
+      size,
+      handlerOffset,
+    });
+
+    const finallyIndex = result / size;
+    expect(finallyIndex).toEqual(prevIndex);
+  });
+
+  it("[CASE 5] should return the correct values when size changes from 224 to 524", () => {
+    const prevIndex = 1;
+    const prevSize = 224;
+    const size = 524;
+    const handlerOffset = prevIndex * prevSize;
+    const result = computeOffsetIfSizeChanged({
+      prevSize,
+      size,
+      handlerOffset,
+    });
+
+    const finallyIndex = result / size;
+    expect(finallyIndex).toEqual(prevIndex);
+  });
+});

package/src/utils/compute-offset-if-size-changed.ts

@@ -0,0 +1,11 @@
+export function computeOffsetIfSizeChanged(params: {
+  handlerOffset: number
+  prevSize: number
+  size: number
+}) {
+  "worklet";
+  const { handlerOffset, prevSize, size } = params;
+
+  return handlerOffset / prevSize * size;
+}
+

package/src/utils/handleroffset-direction.test.ts

@@ -0,0 +1,52 @@
+import { useSharedValue } from "react-native-reanimated";
+
+import { renderHook } from "@testing-library/react-hooks";
+
+import { handlerOffsetDirection } from "./handleroffset-direction";
+
+describe("handlerOffsetDirection", () => {
+  it("should return -1 when default value equals to zero", () => {
+    const result = renderHook(() => {
+      const handlerOffsetAnimVal = useSharedValue(0);
+      return handlerOffsetDirection(handlerOffsetAnimVal);
+    });
+
+    expect(result.result.current).toBe(-1);
+  });
+
+  it("should return 1 when default value is greater than zero", () => {
+    const result = renderHook(() => {
+      const handlerOffsetAnimVal = useSharedValue(1);
+      return handlerOffsetDirection(handlerOffsetAnimVal);
+    });
+
+    expect(result.result.current).toBe(1);
+  });
+
+  it("should return -1 when default value is less than zero", () => {
+    const result = renderHook(() => {
+      const handlerOffsetAnimVal = useSharedValue(-1);
+      return handlerOffsetDirection(handlerOffsetAnimVal);
+    });
+
+    expect(result.result.current).toBe(-1);
+  });
+
+  it("should return 1 when default value equals to zero and fixedDirection is negative", () => {
+    const result = renderHook(() => {
+      const handlerOffsetAnimVal = useSharedValue(-1);
+      return handlerOffsetDirection(handlerOffsetAnimVal, "positive");
+    });
+
+    expect(result.result.current).toBe(1);
+  });
+
+  it("should return -1 when default value is greater than zero and fixedDirection is negative", () => {
+    const result = renderHook(() => {
+      const handlerOffsetAnimVal = useSharedValue(1);
+      return handlerOffsetDirection(handlerOffsetAnimVal, "negative");
+    });
+
+    expect(result.result.current).toBe(-1);
+  });
+});

package/src/utils/handleroffset-direction.ts

@@ -1,15 +1,18 @@
 import type { SharedValue } from "react-native-reanimated";
 
-export function handlerOffsetDirection(handlerOffset: SharedValue<number>): -1 | 1 {
+import type { TCarouselProps } from "../types";
+
+export function handlerOffsetDirection(handlerOffset: SharedValue<number>, fixedDirection?: TCarouselProps["fixedDirection"]): -1 | 1 {
   "worklet";
 
-  const isPositiveZero = Object.is(handlerOffset.value, +0);
-  const isNegativeZero = Object.is(handlerOffset.value, -0);
-  const direction = isPositiveZero
-    ? 1
-    : isNegativeZero
-      ? -1
-      : Math.sign(handlerOffset.value) as -1 | 1;
+  if (fixedDirection === "negative")
+    return -1;
+
+  if (fixedDirection === "positive")
+    return 1;
+
+  if (handlerOffset.value === 0)
+    return -1;
 
-  return direction;
+  return Math.sign(handlerOffset.value) as -1 | 1;
 }

package/src/utils/index.test.ts

@@ -1,4 +1,4 @@
-import { computeNewIndexWhenDataChanges } from "./computeNewIndexWhenDataChanges";
+import { computeOffsetIfDataChanged } from "./compute-offset-if-data-changed";
 
 describe("should work as expected", () => {
   const size = 375;
@@ -24,7 +24,7 @@ describe("should work as expected", () => {
 
   it("The direction is negative, And changing length of data set from 4 to 3, the new index will to be 2.", async () => {
     const currentIndex = 1;
-    const handlerOffset = computeNewIndexWhenDataChanges(params({
+    const handlerOffset = computeOffsetIfDataChanged(params({
       currentIndex,
       direction: "negative",
       previousLength: 4,
@@ -35,7 +35,7 @@ describe("should work as expected", () => {
   });
 
   it("The direction is negative, Changing length of data set from 4 to 3, the index remains original.", async () => {
-    const handlerOffset = computeNewIndexWhenDataChanges(params({
+    const handlerOffset = computeOffsetIfDataChanged(params({
       currentIndex: 2,
       direction: "negative",
       previousLength: 4,
@@ -46,7 +46,7 @@ describe("should work as expected", () => {
   });
 
   it("The direction is positive, Changing length of data set from 4 to 5, the index remains original.", async () => {
-    const handlerOffset = computeNewIndexWhenDataChanges(params({
+    const handlerOffset = computeOffsetIfDataChanged(params({
       currentIndex: 3,
       direction: "positive",
       previousLength: 4,
@@ -57,7 +57,7 @@ describe("should work as expected", () => {
   });
 
   it("The direction is negative, Changing length of data set from 4 to 5, the index remains original.", async () => {
-    const handlerOffset = computeNewIndexWhenDataChanges(params({
+    const handlerOffset = computeOffsetIfDataChanged(params({
       currentIndex: 3,
       direction: "negative",
       previousLength: 4,
@@ -68,7 +68,7 @@ describe("should work as expected", () => {
   });
 
   it("Changing length of data set from 0 to 3, the index remains original.", async () => {
-    const handlerOffset = computeNewIndexWhenDataChanges(params({
+    const handlerOffset = computeOffsetIfDataChanged(params({
       currentIndex: 0,
       direction: "positive",
       previousLength: 0,

package/lib/commonjs/layouts/BaseLayout.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["BaseLayout.tsx"],"names":["BaseLayout","props","mounted","handlerOffset","index","children","visibleRanges","animationStyle","context","React","useContext","CTX","loop","dataLength","width","height","vertical","customConfig","mode","modeConfig","size","shouldUpdate","setShouldUpdate","useState","offsetXConfig","snapDirection","showLength","type","viewCount","x","animationValue","value","animatedStyle","updateView","useCallback","negativeRange","positiveRange","current","position"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport type { ViewStyle } from \"react-native\";\nimport type { AnimatedStyleProp } from \"react-native-reanimated\";\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n} from \"react-native-reanimated\";\n\nimport type { ILayoutConfig } from \"./stack\";\n\nimport { LazyView } from \"../components/LazyView\";\nimport { useCheckMounted } from \"../hooks/useCheckMounted\";\nimport type { IOpts } from \"../hooks/useOffsetX\";\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport { CTX } from \"../store\";\n\nexport type TAnimationStyle = (value: number) => AnimatedStyleProp<ViewStyle>;\n\nexport const BaseLayout: React.FC<{\n  index: number\n  handlerOffset: Animated.SharedValue<number>\n  visibleRanges: IVisibleRanges\n  animationStyle: TAnimationStyle\n  children: (ctx: {\n    animationValue: Animated.SharedValue<number>\n  }) => React.ReactElement\n}> = (props) => {\n  const mounted = useCheckMounted();\n  const { handlerOffset, index, children, visibleRanges, animationStyle }\n  = props;\n\n  const context = React.useContext(CTX);\n  const {\n    props: {\n      loop,\n      dataLength,\n      width,\n      height,\n      vertical,\n      customConfig,\n      mode,\n      modeConfig,\n    },\n  } = context;\n  const size = vertical ? height : width;\n  const [shouldUpdate, setShouldUpdate] = React.useState(false);\n  let offsetXConfig: IOpts = {\n    handlerOffset,\n    index,\n    size,\n    dataLength,\n    loop,\n    ...(typeof customConfig === \"function\" ? customConfig() : {}),\n  };\n\n  if (mode === \"horizontal-stack\") {\n    const { snapDirection, showLength } = modeConfig as ILayoutConfig;\n\n    offsetXConfig = {\n      handlerOffset,\n      index,\n      size,\n      dataLength,\n      loop,\n      type: snapDirection === \"right\" ? \"negative\" : \"positive\",\n      viewCount: showLength,\n    };\n  }\n\n  const x = useOffsetX(offsetXConfig, visibleRanges);\n  const animationValue = useDerivedValue(() => x.value / size, [x, size]);\n  const animatedStyle = useAnimatedStyle(\n    () => animationStyle(x.value / size),\n    [animationStyle],\n  );\n\n  const updateView = React.useCallback(\n    (negativeRange: number[], positiveRange: number[]) => {\n      mounted.current\n                && setShouldUpdate(\n                  (index >= negativeRange[0] && index <= negativeRange[1])\n                        || (index >= positiveRange[0] && index <= positiveRange[1]),\n                );\n    },\n    [index, mounted],\n  );\n\n  useAnimatedReaction(\n    () => visibleRanges.value,\n    () => {\n      runOnJS(updateView)(\n        visibleRanges.value.negativeRange,\n        visibleRanges.value.positiveRange,\n      );\n    },\n    [visibleRanges.value],\n  );\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n        },\n        animatedStyle,\n      ]}\n      /**\n       * We use this testID to know when the carousel item is ready to be tested in test.\n       * e.g.\n       *  The testID of first item will be changed to __CAROUSEL_ITEM_0_READY__ from __CAROUSEL_ITEM_0_NOT_READY__ when the item is ready.\n       * */\n      testID={`__CAROUSEL_ITEM_${index}_${shouldUpdate ? \"READY\" : \"NOT_READY\"}__`}\n    >\n      <LazyView shouldUpdate={shouldUpdate}>\n        {children({ animationValue })}\n      </LazyView>\n    </Animated.View>\n  );\n};\n"]}