react-native-reanimated-carousel 4.0.0-alpha.5 → 4.0.0-alpha.7

package/src/components/ScrollViewGesture.tsx

@@ -1,11 +1,8 @@
 import type { PropsWithChildren } from "react";
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
 import type { GestureStateChangeEvent, PanGestureHandlerEventPayload } from "react-native-gesture-handler";
-import {
-  Gesture,
-  GestureDetector,
-} from "react-native-gesture-handler";
+import { GestureDetector } from "react-native-gesture-handler";
 import Animated, {
   cancelAnimation,
   measure,
@@ -18,7 +15,7 @@ import Animated, {
 } from "react-native-reanimated";
 
 import { Easing } from "../constants";
-import { useUpdateGestureConfig } from "../hooks/useUpdateGestureConfig";
+import { usePanGestureProxy } from "../hooks/usePanGestureProxy";
 import { CTX } from "../store";
 import type { WithTimingAnimation } from "../types";
 import { dealWithAnimation } from "../utils/deal-with-animation";
@@ -42,13 +39,14 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       vertical,
       pagingEnabled,
       snapEnabled,
-      loop: infinite,
+      loop,
       scrollAnimationDuration,
       withAnimation,
       enabled,
       dataLength,
       overscrollEnabled,
       maxScrollDistancePerSwipe,
+      fixedDirection,
     },
   } = React.useContext(CTX);
 
@@ -78,7 +76,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
   const getLimit = React.useCallback(() => {
     "worklet";
 
-    if (!infinite && !overscrollEnabled) {
+    if (!loop && !overscrollEnabled) {
       const { width: containerWidth = 0 } = measure(containerRef);
 
       // If the item's total width is less than the container's width, then there is no need to scroll.
@@ -90,7 +88,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     }
 
     return dataLength * size;
-  }, [infinite, size, dataLength, overscrollEnabled]);
+  }, [loop, size, dataLength, overscrollEnabled]);
 
   const withSpring = React.useCallback(
     (toValue: number, onFinished?: () => void) => {
@@ -141,7 +139,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
           const computed = offset < 0 ? Math.ceil : Math.floor;
           const page = computed(-translation.value / size);
 
-          if (infinite) {
+          if (loop) {
             const finalPage = page + offset;
             finalTranslation = withSpring(withProcessTranslation(-finalPage * size), onFinished);
           }
@@ -161,7 +159,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       translation.value = finalTranslation;
 
       function withProcessTranslation(translation: number) {
-        if (!infinite && !overscrollEnabled) {
+        if (!loop && !overscrollEnabled) {
           const limit = getLimit();
           const sign = Math.sign(translation);
           return sign * Math.max(0, Math.min(limit, Math.abs(translation)));
@@ -174,7 +172,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       withSpring,
       size,
       maxPage,
-      infinite,
+      loop,
       snapEnabled,
       translation,
       pagingEnabled,
@@ -215,7 +213,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
         activeDecay();
         return;
       }
-      if (!infinite) {
+      if (!loop) {
         translation.value = withSpring(0);
         return;
       }
@@ -226,7 +224,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
         activeDecay();
         return;
       }
-      if (!infinite)
+      if (!loop)
         translation.value = withSpring(-((maxPage - 1) * size));
     }
   }, [
@@ -235,7 +233,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     maxPage,
     size,
     scrollEndTranslation.value,
-    infinite,
+    loop,
     activeDecay,
     withSpring,
   ]);
@@ -252,7 +250,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
   function withProcessTranslation(translation: number) {
     "worklet";
 
-    if (!infinite && !overscrollEnabled) {
+    if (!loop && !overscrollEnabled) {
       const limit = getLimit();
       const sign = Math.sign(translation);
       return sign * Math.max(0, Math.min(limit, Math.abs(translation)));
@@ -261,7 +259,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     return translation;
   }
 
-  const onGestureBegin = useCallback(() => {
+  const onGestureBegin = useCallback((_: PanGestureHandlerEventPayload) => {
     "worklet";
 
     touching.value = true;
@@ -269,7 +267,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     onScrollBegin && runOnJS(onScrollBegin)();
 
     max.value = (maxPage - 1) * size;
-    if (!infinite && !overscrollEnabled)
+    if (!loop && !overscrollEnabled)
       max.value = getLimit();
 
     panOffset.value = translation.value;
@@ -277,7 +275,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     max,
     size,
     maxPage,
-    infinite,
+    loop,
     touching,
     panOffset,
     validStart,
@@ -296,10 +294,18 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     }
     touching.value = true;
     const { translationX, translationY } = e;
-    const panTranslation = isHorizontal.value
+
+    let panTranslation = isHorizontal.value
       ? translationX
       : translationY;
-    if (!infinite) {
+
+    if (fixedDirection === "negative")
+      panTranslation = -Math.abs(panTranslation);
+
+    else if (fixedDirection === "positive")
+      panTranslation = +Math.abs(panTranslation);
+
+    if (!loop) {
       if ((translation.value > 0 || translation.value < -max.value)) {
         const boundary = translation.value > 0 ? 0 : -max.value;
         const fixed = boundary - panOffset.value;
@@ -315,24 +321,34 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     isHorizontal,
     max,
     panOffset,
-    infinite,
+    loop,
     overscrollEnabled,
+    fixedDirection,
     translation,
     validStart,
     touching,
   ]);
 
-  const onGestureFinish = useCallback((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+  const onGestureEnd = useCallback((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>, _success: boolean) => {
     "worklet";
 
     const { velocityX, velocityY, translationX, translationY } = e;
     scrollEndVelocity.value = isHorizontal.value
       ? velocityX
       : velocityY;
-    scrollEndTranslation.value = isHorizontal.value
+
+    let panTranslation = isHorizontal.value
       ? translationX
       : translationY;
 
+    if (fixedDirection === "negative")
+      panTranslation = -Math.abs(panTranslation);
+
+    else if (fixedDirection === "positive")
+      panTranslation = +Math.abs(panTranslation);
+
+    scrollEndTranslation.value = panTranslation;
+
     const totalTranslation = scrollEndVelocity.value + scrollEndTranslation.value;
 
     if (maxScrollDistancePerSwipeIsSet && Math.abs(totalTranslation) > maxScrollDistancePerSwipe) {
@@ -343,17 +359,18 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       endWithSpring(onScrollEnd);
     }
 
-    if (!infinite)
+    if (!loop)
       touching.value = false;
   }, [
     size,
-    infinite,
+    loop,
     touching,
     panOffset,
     translation,
     isHorizontal,
     scrollEndVelocity,
     scrollEndTranslation,
+    fixedDirection,
     maxScrollDistancePerSwipeIsSet,
     maxScrollDistancePerSwipe,
     endWithSpring,
@@ -361,25 +378,13 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     onScrollEnd,
   ]);
 
-  const gesture = useMemo(() => {
-    const gesture = Gesture.Pan()
-      .onBegin(onGestureBegin)
-      .onUpdate(onGestureUpdate)
-      .onEnd(onGestureFinish);
-
-    if (onConfigurePanGesture)
-      onConfigurePanGesture(gesture);
-
-    return gesture;
-  },
-  [
+  const gesture = usePanGestureProxy({
+    onConfigurePanGesture,
     onGestureBegin,
     onGestureUpdate,
-    onGestureFinish,
-    onConfigurePanGesture,
-  ]);
-
-  useUpdateGestureConfig(gesture, { enabled });
+    onGestureEnd,
+    options: { enabled },
+  });
 
   return (
     <GestureDetector gesture={gesture}>

package/src/hooks/useCarouselController.tsx

@@ -21,9 +21,10 @@ 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
@@ -48,6 +49,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
     defaultIndex = 0,
     duration,
     autoFillData,
+    fixedDirection,
   } = options;
 
   const dataInfo = React.useMemo(
@@ -241,7 +243,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
 
       onScrollBegin?.();
       // 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,
+      onScrollBegin,
       scrollWithTiming,
     ],
   );

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],
+      });
+      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;