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

package/src/hooks/useCarouselController.tsx

@@ -21,12 +21,13 @@ interface IOpts {
   loop: boolean
   size: number
   dataLength: number
-  autoFillData: TCarouselProps["autoFillData"]
   handlerOffset: Animated.SharedValue<number>
+  autoFillData: TCarouselProps["autoFillData"]
   withAnimation?: TCarouselProps["withAnimation"]
+  fixedDirection?: TCarouselProps["fixedDirection"]
   duration?: number
   defaultIndex?: number
-  onScrollBegin?: () => void
+  onScrollStart?: () => void
   onScrollEnd?: () => void
 }
 
@@ -48,6 +49,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
     defaultIndex = 0,
     duration,
     autoFillData,
+    fixedDirection,
   } = options;
 
   const dataInfo = React.useMemo(
@@ -136,8 +138,8 @@ export function useCarouselController(options: IOpts): ICarouselController {
     options.onScrollEnd?.();
   }, [options]);
 
-  const onScrollBegin = React.useCallback(() => {
-    options.onScrollBegin?.();
+  const onScrollStart = React.useCallback(() => {
+    options.onScrollStart?.();
   }, [options]);
 
   const scrollWithTiming = React.useCallback(
@@ -171,7 +173,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
       if (!canSliding() || (!loop && index.value >= dataInfo.length - 1))
         return;
 
-      onScrollBegin?.();
+      onScrollStart?.();
 
       const nextPage = currentFixedPage() + count;
       index.value = nextPage;
@@ -192,7 +194,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
       loop,
       index,
       dataInfo,
-      onScrollBegin,
+      onScrollStart,
       handlerOffset,
       size,
       scrollWithTiming,
@@ -205,7 +207,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
       const { count = 1, animated = true, onFinished } = opts;
       if (!canSliding() || (!loop && index.value <= 0)) return;
 
-      onScrollBegin?.();
+      onScrollStart?.();
 
       const prevPage = currentFixedPage() - count;
       index.value = prevPage;
@@ -225,7 +227,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
       canSliding,
       loop,
       index,
-      onScrollBegin,
+      onScrollStart,
       handlerOffset,
       size,
       scrollWithTiming,
@@ -239,9 +241,9 @@ export function useCarouselController(options: IOpts): ICarouselController {
       if (i === index.value) return;
       if (!canSliding()) return;
 
-      onScrollBegin?.();
+      onScrollStart?.();
       // direction -> 1 | -1
-      const direction = handlerOffsetDirection(handlerOffset);
+      const direction = handlerOffsetDirection(handlerOffset, fixedDirection);
 
       // target offset
       const offset = i * size * direction;
@@ -252,16 +254,16 @@ export function useCarouselController(options: IOpts): ICarouselController {
 
       if (loop) {
         isCloseToNextLoop
-                    = Math.abs(handlerOffset.value % totalSize) / totalSize
-                    >= 0.5;
+          = Math.abs(handlerOffset.value % totalSize) / totalSize
+          >= 0.5;
       }
 
       const finalOffset
-                = (Math.floor(Math.abs(handlerOffset.value / totalSize))
-                    + (isCloseToNextLoop ? 1 : 0))
-                    * totalSize
-                    * direction
-                + offset;
+        = (Math.floor(Math.abs(handlerOffset.value / totalSize))
+          + (isCloseToNextLoop ? 1 : 0))
+        * totalSize
+        * direction
+        + offset;
 
       if (animated) {
         index.value = i;
@@ -274,13 +276,14 @@ export function useCarouselController(options: IOpts): ICarouselController {
       }
     },
     [
+      size,
+      loop,
       index,
-      canSliding,
-      onScrollBegin,
+      fixedDirection,
       handlerOffset,
-      size,
       dataInfo.length,
-      loop,
+      canSliding,
+      onScrollStart,
       scrollWithTiming,
     ],
   );

package/src/hooks/useCommonVariables.test.tsx

@@ -0,0 +1,41 @@
+import { renderHook } from "@testing-library/react-hooks";
+
+import { useCommonVariables } from "./useCommonVariables";
+
+type UseCommonVariablesInput = Parameters<typeof useCommonVariables>[0];
+
+const input = {
+  vertical: false,
+  width: 700,
+  height: 350,
+  loop: true,
+  enabled: true,
+  testID: "xxx",
+  style: {
+    width: "100%",
+  },
+  autoPlay: false,
+  autoPlayInterval: 2000,
+  data: [0, 1, 2, 3],
+  pagingEnabled: true,
+  defaultIndex: 0,
+  autoFillData: true,
+  dataLength: 4,
+  rawData: [0, 1, 2, 3],
+  rawDataLength: 4,
+  scrollAnimationDuration: 500,
+  snapEnabled: true,
+  overscrollEnabled: true,
+} as unknown as UseCommonVariablesInput;
+
+describe("useCommonVariables", () => {
+  it("should return the correct values", async () => {
+    const hook = renderHook(() => useCommonVariables(input));
+
+    expect(hook.result.current.size).toMatchInlineSnapshot("700");
+    expect(hook.result.current.validLength).toMatchInlineSnapshot("3");
+    expect(hook.result.current.handlerOffset.value).toMatchInlineSnapshot(
+      "-0",
+    );
+  });
+});

package/src/hooks/useCommonVariables.ts

@@ -1,10 +1,10 @@
-import React from "react";
 import type Animated from "react-native-reanimated";
 import { useSharedValue, useAnimatedReaction } from "react-native-reanimated";
 
 import type { TInitializeCarouselProps } from "./useInitProps";
 
-import { computeNewIndexWhenDataChanges } from "../utils/computeNewIndexWhenDataChanges";
+import { computeOffsetIfDataChanged } from "../utils/compute-offset-if-data-changed";
+import { computeOffsetIfSizeChanged } from "../utils/compute-offset-if-size-changed";
 import { handlerOffsetDirection } from "../utils/handleroffset-direction";
 
 interface ICommonVariables {
@@ -26,21 +26,20 @@ export function useCommonVariables(
     loop,
   } = props;
   const size = vertical ? height : width;
-  const validLength = dataLength - 1;
   const defaultHandlerOffsetValue = -Math.abs(defaultIndex * size);
   const _handlerOffset = useSharedValue<number>(defaultHandlerOffsetValue);
   const handlerOffset = defaultScrollOffsetValue ?? _handlerOffset;
   const prevDataLength = useSharedValue(dataLength);
+  const prevSize = useSharedValue(size);
 
-  React.useEffect(() => {
-    handlerOffset.value = defaultHandlerOffsetValue;
-  }, [vertical, handlerOffset, defaultHandlerOffsetValue]);
-
+  /**
+   * When data changes, we need to compute new index for handlerOffset
+  */
   useAnimatedReaction(() => {
     const previousLength = prevDataLength.value;
     const currentLength = dataLength;
     const isLengthChanged = previousLength !== currentLength;
-    const shouldComputed = isLengthChanged && loop;
+    const shouldComputed = (isLengthChanged && loop);
 
     if (shouldComputed)
       prevDataLength.value = dataLength;
@@ -55,7 +54,7 @@ export function useCommonVariables(
       // direction -> 1 | -1
       const direction = handlerOffsetDirection(handlerOffset);
 
-      handlerOffset.value = computeNewIndexWhenDataChanges({
+      handlerOffset.value = computeOffsetIfDataChanged({
         direction,
         previousLength,
         currentLength,
@@ -65,9 +64,35 @@ export function useCommonVariables(
     }
   }, [dataLength, loop]);
 
+  /**
+   * When size changes, we need to compute new index for handlerOffset
+  */
+  useAnimatedReaction(() => {
+    const previousSize = prevSize.value;
+    const isSizeChanged = previousSize !== size;
+    const shouldComputed = isSizeChanged;
+
+    if (shouldComputed)
+      prevSize.value = size;
+
+    return {
+      shouldComputed,
+      previousSize,
+      size,
+    };
+  }, ({ shouldComputed, previousSize, size }) => {
+    if (shouldComputed) {
+      handlerOffset.value = computeOffsetIfSizeChanged({
+        handlerOffset: handlerOffset.value,
+        prevSize: previousSize,
+        size,
+      });
+    }
+  }, [size]);
+
   return {
     size,
-    validLength,
+    validLength: dataLength - 1,
     handlerOffset,
   };
 }

package/src/hooks/useLayoutConfig.ts

@@ -2,8 +2,8 @@ import React from "react";
 
 import type { TInitializeCarouselProps } from "./useInitProps";
 
+import type { TAnimationStyle } from "../components/BaseLayout";
 import { Layouts } from "../layouts";
-import type { TAnimationStyle } from "../layouts/BaseLayout";
 
 type TLayoutConfigOpts<T> = TInitializeCarouselProps<T> & { size: number };
 

package/src/hooks/useOffsetX.test.ts

@@ -0,0 +1,54 @@
+import { useSharedValue } from "react-native-reanimated";
+
+import { renderHook } from "@testing-library/react-hooks";
+
+import type { IOpts } from "./useOffsetX";
+import { useOffsetX } from "./useOffsetX";
+import type { IVisibleRanges } from "./useVisibleRanges";
+
+describe("useSharedValue", () => {
+  it("should return the correct values", async () => {
+    const hook = renderHook(() => {
+      const range = useSharedValue({
+        negativeRange: [7, 9],
+        positiveRange: [0, 3],
+      }) as IVisibleRanges;
+      const inputs: Array<{
+        config: IOpts
+        range: IVisibleRanges
+      }> = Array.from({ length: 10 }).map((_, index) => ({
+        config: {
+          dataLength: 10,
+          handlerOffset: useSharedValue(-0),
+          index,
+          loop: false,
+          size: 393,
+        },
+        range,
+      }));
+
+      return inputs.map((input) => {
+        const { config, range } = input;
+
+        return useOffsetX(config, range);
+      });
+    });
+
+    const expected = hook.result.current.map(v => v.value).slice();
+
+    expect(expected).toMatchInlineSnapshot(`
+            [
+              0,
+              393,
+              786,
+              1179,
+              9007199254740991,
+              9007199254740991,
+              9007199254740991,
+              2751,
+              3144,
+              3537,
+            ]
+        `);
+  });
+});

package/src/hooks/useOffsetX.ts

@@ -35,7 +35,7 @@ export const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {
 
   const viewCount = _viewCount ?? Math.round((ITEM_LENGTH - 1) / 2);
   const positiveCount
-        = type === "positive" ? viewCount : VALID_LENGTH - viewCount;
+    = type === "positive" ? viewCount : VALID_LENGTH - viewCount;
 
   let startPos = size * index;
   if (index > positiveCount)
@@ -46,42 +46,44 @@ export const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {
 
   const x = useDerivedValue(() => {
     const { negativeRange, positiveRange } = visibleRanges.value;
+
     if (
-      (index < negativeRange[0] || index > negativeRange[1])
-            && (index < positiveRange[0] || index > positiveRange[1])
-    )
-      return Number.MAX_SAFE_INTEGER;
+      (index >= negativeRange[0] && index <= negativeRange[1])
+      || (index >= positiveRange[0] && index <= positiveRange[1])
+    ) {
+      if (loop) {
+        const inputRange = [
+          -TOTAL_WIDTH,
+          MIN - HALF_WIDTH - startPos - Number.MIN_VALUE,
+          MIN - HALF_WIDTH - startPos,
+          0,
+          MAX + HALF_WIDTH - startPos,
+          MAX + HALF_WIDTH - startPos + Number.MIN_VALUE,
+          TOTAL_WIDTH,
+        ];
 
-    if (loop) {
-      const inputRange = [
-        -TOTAL_WIDTH,
-        MIN - HALF_WIDTH - startPos - Number.MIN_VALUE,
-        MIN - HALF_WIDTH - startPos,
-        0,
-        MAX + HALF_WIDTH - startPos,
-        MAX + HALF_WIDTH - startPos + Number.MIN_VALUE,
-        TOTAL_WIDTH,
-      ];
+        const outputRange = [
+          startPos,
+          MAX + HALF_WIDTH - Number.MIN_VALUE,
+          MIN - HALF_WIDTH,
+          startPos,
+          MAX + HALF_WIDTH,
+          MIN - HALF_WIDTH + Number.MIN_VALUE,
+          startPos,
+        ];
 
-      const outputRange = [
-        startPos,
-        MAX + HALF_WIDTH - Number.MIN_VALUE,
-        MIN - HALF_WIDTH,
-        startPos,
-        MAX + HALF_WIDTH,
-        MIN - HALF_WIDTH + Number.MIN_VALUE,
-        startPos,
-      ];
+        return interpolate(
+          handlerOffset.value,
+          inputRange,
+          outputRange,
+          Extrapolate.CLAMP,
+        );
+      }
 
-      return interpolate(
-        handlerOffset.value,
-        inputRange,
-        outputRange,
-        Extrapolate.CLAMP,
-      );
+      return handlerOffset.value + size * index;
     }
 
-    return handlerOffset.value + size * index;
+    return Number.MAX_SAFE_INTEGER;
   }, [loop, dataLength, viewCount, type, size, visibleRanges]);
 
   return x;

package/src/hooks/useOnProgressChange.ts

@@ -42,8 +42,13 @@ export function useOnProgressChange(
       if (value > 0)
         absoluteProgress = rawDataLength - absoluteProgress;
 
-      if (onProgressChange)
-        runOnJS(onProgressChange)(value, absoluteProgress);
+      if (onProgressChange) {
+        if (typeof onProgressChange === "function")
+          runOnJS(onProgressChange)(value, absoluteProgress);
+
+        else
+          onProgressChange.value = absoluteProgress;
+      }
     },
     [loop, autoFillData, rawDataLength, onProgressChange],
   );