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

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";
@@ -28,7 +25,7 @@ interface Props {
   infinite?: boolean
   testID?: string
   style?: StyleProp<ViewStyle>
-  onScrollBegin?: () => void
+  onScrollStart?: () => void
   onScrollEnd?: () => void
   onTouchBegin?: () => void
   onTouchEnd?: () => void
@@ -42,13 +39,15 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       vertical,
       pagingEnabled,
       snapEnabled,
-      loop: infinite,
+      loop,
       scrollAnimationDuration,
       withAnimation,
       enabled,
       dataLength,
       overscrollEnabled,
       maxScrollDistancePerSwipe,
+      minScrollDistancePerSwipe,
+      fixedDirection,
     },
   } = React.useContext(CTX);
 
@@ -57,7 +56,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     translation,
     testID,
     style = {},
-    onScrollBegin,
+    onScrollStart,
     onScrollEnd,
     onTouchBegin,
     onTouchEnd,
@@ -73,12 +72,13 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
   const scrollEndVelocity = useSharedValue(0);
   const containerRef = useAnimatedRef<Animated.View>();
   const maxScrollDistancePerSwipeIsSet = typeof maxScrollDistancePerSwipe === "number";
+  const minScrollDistancePerSwipeIsSet = typeof minScrollDistancePerSwipe === "number";
 
   // Get the limit of the scroll.
   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 +90,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 +141,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 +161,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 +174,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       withSpring,
       size,
       maxPage,
-      infinite,
+      loop,
       snapEnabled,
       translation,
       pagingEnabled,
@@ -215,7 +215,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
         activeDecay();
         return;
       }
-      if (!infinite) {
+      if (!loop) {
         translation.value = withSpring(0);
         return;
       }
@@ -226,7 +226,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
         activeDecay();
         return;
       }
-      if (!infinite)
+      if (!loop)
         translation.value = withSpring(-((maxPage - 1) * size));
     }
   }, [
@@ -235,7 +235,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     maxPage,
     size,
     scrollEndTranslation.value,
-    infinite,
+    loop,
     activeDecay,
     withSpring,
   ]);
@@ -252,7 +252,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,15 +261,15 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     return translation;
   }
 
-  const onGestureBegin = useCallback(() => {
+  const onGestureStart = useCallback((_: PanGestureHandlerEventPayload) => {
     "worklet";
 
     touching.value = true;
     validStart.value = true;
-    onScrollBegin && runOnJS(onScrollBegin)();
+    onScrollStart && runOnJS(onScrollStart)();
 
     max.value = (maxPage - 1) * size;
-    if (!infinite && !overscrollEnabled)
+    if (!loop && !overscrollEnabled)
       max.value = getLimit();
 
     panOffset.value = translation.value;
@@ -277,14 +277,14 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     max,
     size,
     maxPage,
-    infinite,
+    loop,
     touching,
     panOffset,
     validStart,
     translation,
     overscrollEnabled,
     getLimit,
-    onScrollBegin,
+    onScrollStart,
   ]);
 
   const onGestureUpdate = useCallback((e: PanGestureHandlerEventPayload) => {
@@ -296,10 +296,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,71 +323,88 @@ 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) {
+    /**
+     * If the maximum scroll distance is set and the translation `exceeds the maximum scroll distance`,
+     * the carousel will keep the view at the current position.
+    */
+    if (
+      maxScrollDistancePerSwipeIsSet && Math.abs(totalTranslation) > maxScrollDistancePerSwipe
+    ) {
       const nextPage = Math.round((panOffset.value + maxScrollDistancePerSwipe * Math.sign(totalTranslation)) / size) * size;
       translation.value = withSpring(withProcessTranslation(nextPage), onScrollEnd);
     }
+    /**
+     * If the minimum scroll distance is set and the translation `didn't exceeds the minimum scroll distance`,
+     * the carousel will keep the view at the current position.
+    */
+    else if (
+      minScrollDistancePerSwipeIsSet && Math.abs(totalTranslation) < minScrollDistancePerSwipe
+    ) {
+      const nextPage = Math.round((panOffset.value + minScrollDistancePerSwipe * Math.sign(totalTranslation)) / size) * size;
+      translation.value = withSpring(withProcessTranslation(nextPage), onScrollEnd);
+    }
     else {
       endWithSpring(onScrollEnd);
     }
 
-    if (!infinite)
+    if (!loop)
       touching.value = false;
   }, [
     size,
-    infinite,
+    loop,
     touching,
     panOffset,
     translation,
     isHorizontal,
     scrollEndVelocity,
     scrollEndTranslation,
+    fixedDirection,
     maxScrollDistancePerSwipeIsSet,
     maxScrollDistancePerSwipe,
+    maxScrollDistancePerSwipeIsSet,
+    minScrollDistancePerSwipe,
     endWithSpring,
     withSpring,
     onScrollEnd,
   ]);
 
-  const gesture = useMemo(() => {
-    const gesture = Gesture.Pan()
-      .onBegin(onGestureBegin)
-      .onUpdate(onGestureUpdate)
-      .onEnd(onGestureFinish);
-
-    if (onConfigurePanGesture)
-      onConfigurePanGesture(gesture);
-
-    return gesture;
-  },
-  [
-    onGestureBegin,
-    onGestureUpdate,
-    onGestureFinish,
+  const gesture = usePanGestureProxy({
     onConfigurePanGesture,
-  ]);
-
-  useUpdateGestureConfig(gesture, { enabled });
+    onGestureStart,
+    onGestureUpdate,
+    onGestureEnd,
+    options: { enabled },
+  });
 
   return (
     <GestureDetector gesture={gesture}>

package/src/components/rnr-demo.test.tsx

@@ -0,0 +1,43 @@
+import type { FC } from "react";
+import React from "react";
+import Animated, { useAnimatedStyle, useDerivedValue } from "react-native-reanimated";
+import renderer from "react-test-renderer";
+
+describe("useSharedValue", () => {
+  it("retains value on rerender", () => {
+    const initialValue = 0;
+    const updatedValue = 1;
+
+    interface Props {
+      key: string
+      value: number
+    }
+
+    const TestComponent: FC<Props> = (props) => {
+      const opacity = useDerivedValue(() => props.value, [props.value]);
+      const animatedStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+      }), [opacity]);
+
+      return <Animated.View style={animatedStyle} />;
+    };
+
+    // When rendering with initial value
+    const wrapper = renderer.create(<TestComponent key="box" value={initialValue} />);
+
+    expect(
+      typeof wrapper.root.children[0] !== "string"
+        ? wrapper.root.children[0].props.style.animatedStyle.current.value.opacity
+        : false,
+    ).toBe(initialValue);
+
+    // When rendering with updated value
+    wrapper.update(<TestComponent key="box" value={updatedValue} />);
+
+    expect(
+      typeof wrapper.root.children[0] !== "string"
+        ? wrapper.root.children[0].props.style.animatedStyle.current.value.opacity
+        : false,
+    ).toBe(initialValue);
+  });
+});

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