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

package/src/hooks/usePanGestureProxy.test.tsx

@@ -0,0 +1,377 @@
+import React from "react";
+import { Text } from "react-native";
+import type { PanGesture, PanGestureHandler, TapGesture } from "react-native-gesture-handler";
+import { Gesture, GestureDetector, GestureHandlerRootView, State } from "react-native-gesture-handler";
+
+import { cleanup, render } from "@testing-library/react-native";
+import { fireGestureHandler, getByGestureTestId } from "react-native-gesture-handler/jest-utils";
+
+import { usePanGestureProxy } from "./usePanGestureProxy";
+
+beforeEach(cleanup);
+
+const mockedEventHandlers = () => {
+  return {
+    begin: jest.fn(),
+    start: jest.fn(),
+    active: jest.fn(),
+    end: jest.fn(),
+    fail: jest.fn(),
+    cancel: jest.fn(),
+    finish: jest.fn(),
+  };
+};
+
+const mockedEventHandlersFromUser = () => {
+  return {
+    begin: jest.fn(),
+    start: jest.fn(),
+    active: jest.fn(),
+    end: jest.fn(),
+    fail: jest.fn(),
+    cancel: jest.fn(),
+    finish: jest.fn(),
+  };
+};
+
+describe("Using RNGH v2 gesture API", () => {
+  interface SingleHandlerProps {
+    handlers: ReturnType<typeof mockedEventHandlers>
+    handlersFromUser: ReturnType<typeof mockedEventHandlers>
+    treatStartAsUpdate?: boolean
+  }
+
+  function SingleHandler({ handlers, handlersFromUser, treatStartAsUpdate }: SingleHandlerProps) {
+    const pan = usePanGestureProxy({
+      onConfigurePanGesture: (gesture: PanGesture) => {
+        // This is user's customizations
+        gesture
+          .onStart(treatStartAsUpdate ? handlers.active : handlers.start)
+          .onBegin(handlersFromUser.begin)
+          .onUpdate(handlersFromUser.active)
+          .onEnd(handlersFromUser.end)
+          .onFinalize(handlers.finish)
+          .withTestId("pan");
+      },
+      onGestureBegin: handlers.begin,
+      onGestureUpdate: handlers.active,
+      onGestureEnd: handlers.end,
+      options: { enabled: true },
+    });
+
+    return (
+      <GestureHandlerRootView>
+        <GestureDetector gesture={pan}>
+          <Text>v2 API test</Text>
+        </GestureDetector>
+      </GestureHandlerRootView>
+    );
+  }
+
+  interface RacingHandlersProps {
+    tapHandlers: ReturnType<typeof mockedEventHandlers>
+    panHandlers: ReturnType<typeof mockedEventHandlers>
+  }
+
+  function RacingHandlers({ tapHandlers, panHandlers }: RacingHandlersProps) {
+    const tap = Gesture.Tap()
+      .onBegin(tapHandlers.begin)
+      .onEnd(tapHandlers.end)
+      .withTestId("tap");
+
+    const pan = usePanGestureProxy({
+      onConfigurePanGesture: (_: PanGesture) => {
+        _
+          .onFinalize(panHandlers.finish)
+          .withTestId("pan");
+      },
+      onGestureBegin: panHandlers.begin,
+      onGestureUpdate: panHandlers.active,
+      onGestureEnd: panHandlers.end,
+      options: { enabled: true },
+    });
+
+    return (
+      <GestureHandlerRootView>
+        <GestureDetector gesture={Gesture.Race(tap, pan)}>
+          <Text>v2 API test</Text>
+        </GestureDetector>
+      </GestureHandlerRootView>
+    );
+  }
+
+  it("sends events to handlers", () => {
+    const tapHandlers = mockedEventHandlers();
+    const panHandlers = mockedEventHandlers();
+    render(
+      <RacingHandlers tapHandlers={tapHandlers} panHandlers={panHandlers} />,
+    );
+
+    fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [
+      { state: State.BEGAN },
+      { state: State.ACTIVE },
+      { state: State.END },
+    ]);
+    expect(panHandlers.begin).toBeCalledWith(
+      expect.objectContaining({ state: State.BEGAN }),
+    );
+    expect(panHandlers.finish).toBeCalled();
+    expect(tapHandlers.begin).not.toBeCalled();
+  });
+
+  it("sends events with additional data to handlers", () => {
+    const panHandlers = mockedEventHandlers();
+    const panHandlersFromUser = mockedEventHandlersFromUser();
+    render(<SingleHandler handlers={panHandlers} handlersFromUser={panHandlersFromUser} treatStartAsUpdate />);
+    fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [
+      { state: State.BEGAN, translationX: 0 },
+      { state: State.ACTIVE, translationX: 10 },
+      { translationX: 20 },
+      { translationX: 20 },
+      { state: State.END, translationX: 30 },
+    ]);
+
+    expect(panHandlersFromUser.begin).toBeCalledTimes(1);
+    expect(panHandlersFromUser.active).toBeCalledTimes(2);
+    expect(panHandlersFromUser.end).toBeCalledTimes(1);
+
+    expect(panHandlers.active).toBeCalledTimes(3);
+    expect(panHandlers.active).toHaveBeenLastCalledWith(
+      expect.objectContaining({ translationX: 20 }),
+    );
+  });
+});
+
+describe("Event list validation", () => {
+  interface SingleHandlerProps {
+    handlers: ReturnType<typeof mockedEventHandlers>
+    handlersFromUser: ReturnType<typeof mockedEventHandlers>
+    treatStartAsUpdate?: boolean
+  }
+
+  function SingleHandler({ handlers, handlersFromUser, treatStartAsUpdate }: SingleHandlerProps) {
+    const pan = usePanGestureProxy({
+      onConfigurePanGesture: (_: PanGesture) => {
+        _
+          .onStart(treatStartAsUpdate ? handlers.active : handlers.start)
+          .onBegin(handlersFromUser.begin)
+          .onUpdate(handlersFromUser.active)
+          .onEnd(handlersFromUser.end)
+          .onFinalize(handlers.finish)
+          .withTestId("pan");
+      },
+      onGestureBegin: handlers.begin,
+      onGestureUpdate: handlers.active,
+      onGestureEnd: handlers.end,
+      options: { enabled: true },
+    });
+
+    return (
+      <GestureHandlerRootView>
+        <GestureDetector gesture={pan}>
+          <Text>v2 API test</Text>
+        </GestureDetector>
+      </GestureHandlerRootView>
+    );
+  }
+
+  it("throws error when oldState doesn't correspond to previous event's state", () => {
+    const panHandlers = mockedEventHandlers();
+    const panHandlersFromUser = mockedEventHandlersFromUser();
+    render(<SingleHandler handlers={panHandlers} handlersFromUser={panHandlersFromUser} />);
+
+    expect(() => {
+      fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [
+        { oldState: State.UNDETERMINED, state: State.BEGAN, x: 0, y: 10 },
+        { oldState: State.UNDETERMINED, state: State.ACTIVE, x: 1, y: 11 },
+      ]);
+    }).toThrow(
+      "when state changes, oldState should be the same as previous event' state",
+    );
+  });
+
+  it.each([[State.END], [State.FAILED], [State.CANCELLED]])(
+    "correctly handles events ending with state %s",
+    (lastState) => {
+      const panHandlers = mockedEventHandlers();
+      const panHandlersFromUser = mockedEventHandlersFromUser();
+      render(<SingleHandler handlers={panHandlers} handlersFromUser={panHandlersFromUser} />);
+      fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [
+        { state: State.BEGAN },
+        { state: State.ACTIVE },
+        { state: lastState },
+      ]);
+
+      expect(panHandlersFromUser.begin).toBeCalledTimes(1);
+      expect(panHandlersFromUser.active).toBeCalledTimes(0);
+      expect(panHandlersFromUser.end).toBeCalledTimes(1);
+
+      if (lastState === State.END)
+        expect(panHandlers.end).toBeCalled();
+
+      else
+        expect(panHandlers.finish).toBeCalledWith(expect.any(Object), false);
+    },
+  );
+});
+
+describe("Filling event list with defaults", () => {
+  interface RacingTapAndPanProps {
+    handlers: ReturnType<typeof mockedEventHandlers>
+    treatStartAsUpdate?: boolean
+  }
+
+  function RacingTapAndPan({
+    handlers,
+    treatStartAsUpdate,
+  }: RacingTapAndPanProps) {
+    const tap = Gesture.Tap()
+      .onBegin(handlers.begin)
+      .onEnd(handlers.end)
+      .withTestId("tap");
+
+    const pan = usePanGestureProxy({
+      onConfigurePanGesture: (_: PanGesture) => {
+        _
+          .onStart(treatStartAsUpdate ? handlers.active : handlers.start)
+          .onFinalize(handlers.finish)
+          .withTestId("pan");
+      },
+      onGestureBegin: handlers.begin,
+      onGestureUpdate: handlers.active,
+      onGestureEnd: handlers.end,
+      options: { enabled: true },
+    });
+
+    return (
+      <GestureHandlerRootView>
+        <GestureDetector gesture={Gesture.Exclusive(pan, tap)}>
+          <Text>v2 API test</Text>
+        </GestureDetector>
+      </GestureHandlerRootView>
+    );
+  }
+
+  it("fills oldState if not passed", () => {
+    const handlers = mockedEventHandlers();
+    render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
+    fireGestureHandler<PanGestureHandler>(getByGestureTestId("pan"), [
+      { state: State.BEGAN },
+      { state: State.ACTIVE },
+      { state: State.ACTIVE },
+      { state: State.ACTIVE },
+      { state: State.END },
+    ]);
+
+    expect(handlers.begin).toBeCalledWith(
+      expect.objectContaining({ oldState: State.UNDETERMINED }),
+    );
+    expect(handlers.active).nthCalledWith(
+      1,
+      expect.objectContaining({ oldState: State.BEGAN }),
+    );
+    expect(handlers.active).lastCalledWith(
+      expect.not.objectContaining({ oldState: expect.anything() }),
+    );
+    expect(handlers.end).toBeCalledWith(
+      expect.objectContaining({ oldState: State.ACTIVE }),
+      true,
+    );
+  });
+
+  it("fills missing ACTIVE states", () => {
+    const panHandlers = mockedEventHandlers();
+    render(<RacingTapAndPan handlers={panHandlers} treatStartAsUpdate />);
+    fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [
+      { state: State.BEGAN, x: 0, y: 10 },
+      { state: State.ACTIVE, x: 1, y: 11 },
+      { x: 2, y: 12 },
+      { x: 3, y: 13 },
+      { state: State.END, x: 4, y: 14 },
+    ]);
+
+    expect(panHandlers.active).toBeCalledTimes(3);
+    expect(panHandlers.active).toHaveBeenLastCalledWith(
+      expect.objectContaining({ x: 3, y: 13 }),
+    );
+  });
+
+  it("fills BEGIN and END events for discrete handlers", () => {
+    const handlers = mockedEventHandlers();
+    render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
+    fireGestureHandler<TapGesture>(getByGestureTestId("tap"), [{ x: 5 }]);
+    expect(handlers.begin).toBeCalledTimes(1);
+    expect(handlers.end).toBeCalledTimes(1);
+  });
+
+  it("with FAILED event, fills BEGIN event for discrete handlers", () => {
+    const handlers = mockedEventHandlers();
+    render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
+    fireGestureHandler<TapGesture>(getByGestureTestId("tap"), [
+      { state: State.FAILED },
+    ]);
+    expect(handlers.begin).toBeCalledTimes(1);
+    expect(handlers.end).toBeCalledTimes(1);
+    expect(handlers.end).toBeCalledWith(expect.anything(), false);
+  });
+
+  it("uses event data from first event in filled BEGIN, ACTIVE events", () => {
+    const handlers = mockedEventHandlers();
+    render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
+    fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [{ x: 120 }]);
+    expect(handlers.begin).toBeCalledWith(expect.objectContaining({ x: 120 }));
+    expect(handlers.active).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({ x: 120 }),
+    );
+  });
+
+  it("uses event data from last event in filled END events", () => {
+    const handlers = mockedEventHandlers();
+    render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
+    fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [
+      { x: 120, state: State.FAILED },
+    ]);
+    expect(handlers.begin).toBeCalledTimes(1);
+    expect(handlers.active).toBeCalledTimes(1);
+    expect(handlers.end).toBeCalledWith(
+      expect.objectContaining({ x: 120 }),
+      false,
+    );
+  });
+
+  it("uses event data filled events", () => {
+    const handlers = mockedEventHandlers();
+    render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
+    fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [
+      { x: 5, y: 15 },
+      { x: 6, y: 16 },
+      { x: 7, y: 17 },
+    ]);
+    expect(handlers.begin).toBeCalledWith(
+      expect.objectContaining({ x: 5, y: 15 }),
+    );
+    expect(handlers.active).toBeCalledTimes(3);
+    expect(handlers.end).toBeCalledWith(
+      expect.objectContaining({ x: 7, y: 17 }),
+      true,
+    );
+  });
+
+  it("fills BEGIN and END events when they're not present, for discrete handlers", () => {
+    const handlers = mockedEventHandlers();
+    render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
+    fireGestureHandler<TapGesture>(getByGestureTestId("tap"));
+    expect(handlers.begin).toBeCalledTimes(1);
+    expect(handlers.end).toHaveBeenCalledTimes(1);
+  });
+
+  it("fills BEGIN, ACTIVE and END events when they're not present, for continuous handlers", () => {
+    const handlers = mockedEventHandlers();
+    render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
+    fireGestureHandler<PanGesture>(getByGestureTestId("pan"));
+    expect(handlers.begin).toBeCalledTimes(1);
+    expect(handlers.active).toBeCalledTimes(1);
+    expect(handlers.end).toHaveBeenCalledTimes(1);
+  });
+});

package/src/hooks/usePanGestureProxy.ts

@@ -0,0 +1,110 @@
+import { useMemo } from "react";
+import type { GestureStateChangeEvent, GestureUpdateEvent, PanGesture, PanGestureHandlerEventPayload } from "react-native-gesture-handler";
+import { Gesture } from "react-native-gesture-handler";
+
+import type { GestureConfig } from "./useUpdateGestureConfig";
+import { useUpdateGestureConfig } from "./useUpdateGestureConfig";
+
+export const usePanGestureProxy = (
+  customization: {
+    onConfigurePanGesture?: (gesture: PanGesture) => void
+    onGestureBegin: (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void
+    onGestureUpdate: (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => void
+    onGestureEnd: (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>, success: boolean) => void
+    options?: GestureConfig
+  },
+) => {
+  const {
+    onConfigurePanGesture,
+    onGestureBegin,
+    onGestureUpdate,
+    onGestureEnd,
+    options = {},
+  } = customization;
+
+  const gesture = useMemo(() => {
+    const gesture = Gesture.Pan();
+
+    // Save the original gesture callbacks
+    const originalGestures = {
+      onBegin: gesture.onBegin,
+      onUpdate: gesture.onUpdate,
+      onEnd: gesture.onEnd,
+    };
+
+    // Save the user defined gesture callbacks
+    const userDefinedConflictGestures: {
+      onBegin?: Parameters<(typeof gesture)["onBegin"]>[0]
+      onUpdate?: Parameters<(typeof gesture)["onUpdate"]>[0]
+      onEnd?: Parameters<(typeof gesture)["onEnd"]>[0]
+    } = {
+      onBegin: undefined,
+      onUpdate: undefined,
+      onEnd: undefined,
+    };
+
+    const fakeOnBegin: typeof gesture.onBegin = (cb) => {
+      // Using fakeOnBegin to save the user defined callback
+      userDefinedConflictGestures.onBegin = cb;
+      return gesture;
+    };
+
+    const fakeOnUpdate: typeof gesture.onUpdate = (cb) => {
+      // Using fakeOnUpdate to save the user defined callback
+      userDefinedConflictGestures.onUpdate = cb;
+      return gesture;
+    };
+
+    const fakeOnEnd: typeof gesture.onEnd = (cb) => {
+      // Using fakeOnEnd to save the user defined callback
+      userDefinedConflictGestures.onEnd = cb;
+      return gesture;
+    };
+
+    // Setup the fake callbacks
+    gesture.onBegin = fakeOnBegin;
+    gesture.onUpdate = fakeOnUpdate;
+    gesture.onEnd = fakeOnEnd;
+
+    if (onConfigurePanGesture)
+      // Get the gesture with the user defined configuration
+      onConfigurePanGesture(gesture);
+
+    // Restore the original callbacks
+    gesture.onBegin = originalGestures.onBegin;
+    gesture.onUpdate = originalGestures.onUpdate;
+    gesture.onEnd = originalGestures.onEnd;
+
+    // Setup the original callbacks with the user defined callbacks
+    gesture
+      .onBegin((e) => {
+        onGestureBegin(e);
+
+        if (userDefinedConflictGestures.onBegin)
+          userDefinedConflictGestures.onBegin(e);
+      })
+      .onUpdate((e) => {
+        onGestureUpdate(e);
+
+        if (userDefinedConflictGestures.onUpdate)
+          userDefinedConflictGestures.onUpdate(e);
+      })
+      .onEnd((e, success) => {
+        onGestureEnd(e, success);
+
+        if (userDefinedConflictGestures.onEnd)
+          userDefinedConflictGestures.onEnd(e, success);
+      });
+
+    return gesture;
+  }, [
+    onGestureBegin,
+    onGestureUpdate,
+    onGestureEnd,
+    onConfigurePanGesture,
+  ]);
+
+  useUpdateGestureConfig(gesture, options);
+
+  return gesture;
+};

package/src/hooks/useUpdateGestureConfig.ts

@@ -1,9 +1,11 @@
 import { useEffect } from "react";
 import type { PanGesture } from "react-native-gesture-handler";
 
-export const useUpdateGestureConfig = (gesture: PanGesture, config: {
+export interface GestureConfig {
   enabled?: boolean
-}) => {
+}
+
+export const useUpdateGestureConfig = (gesture: PanGesture, config: GestureConfig) => {
   const { enabled } = config;
 
   useEffect(() => {

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