@leonsilicon/react-native-reanimated-carousel 0.0.0

package/src/components/ScrollViewGesture.tsx

@@ -0,0 +1,577 @@
+import type { PropsWithChildren } from "react";
+import React, { useCallback } from "react";
+import type { LayoutChangeEvent, StyleProp, ViewStyle } from "react-native";
+import type {
+  GestureStateChangeEvent,
+  PanGestureHandlerEventPayload,
+} from "react-native-gesture-handler";
+import { GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  cancelAnimation,
+  measure,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useDerivedValue,
+  useSharedValue,
+  withDecay,
+} from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+
+import { Easing } from "../constants";
+import { usePanGestureProxy } from "../hooks/usePanGestureProxy";
+import { useGlobalState } from "../store";
+import type { WithTimingAnimation } from "../types";
+import { computeGestureTranslation } from "../utils/compute-gesture-translation";
+import { dealWithAnimation } from "../utils/deal-with-animation";
+
+interface Props {
+  size: number;
+  infinite?: boolean;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+  translation: SharedValue<number>;
+  onLayout?: (e: LayoutChangeEvent) => void;
+  onScrollStart?: () => void;
+  onScrollEnd?: () => void;
+  onTouchBegin?: () => void;
+  onTouchEnd?: () => void;
+}
+
+const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
+  const {
+    props: {
+      onConfigurePanGesture,
+      vertical,
+      pagingEnabled,
+      snapEnabled,
+      loop,
+      scrollAnimationDuration,
+      withAnimation,
+      enabled,
+      dataLength,
+      overscrollEnabled,
+      maxScrollDistancePerSwipe,
+      minScrollDistancePerSwipe,
+      fixedDirection,
+      variableSize,
+    },
+    common: { size, resolvedSize, sizePhase, sizeExplicit },
+    sizeResolver,
+    layout: { updateContainerSize },
+  } = useGlobalState();
+
+  const {
+    translation,
+    testID,
+    style = {},
+    onScrollStart,
+    onScrollEnd,
+    onTouchBegin,
+    onTouchEnd,
+  } = props;
+
+  const maxPage = dataLength;
+  const isHorizontal = useDerivedValue(() => !vertical, [vertical]);
+  const max = useSharedValue(0);
+  const panOffset = useSharedValue<number | undefined>(undefined); // set to undefined when not actively in a pan gesture
+  const touching = useSharedValue(false);
+  const validStart = useSharedValue(false);
+  const scrollEndTranslation = useSharedValue(0);
+  const scrollEndVelocity = useSharedValue(0);
+  const containerRef = useAnimatedRef<Animated.View>();
+  const maxScrollDistancePerSwipeIsSet = typeof maxScrollDistancePerSwipe === "number";
+  const minScrollDistancePerSwipeIsSet = typeof minScrollDistancePerSwipe === "number";
+  const sizeReady = useDerivedValue(() => {
+    const currentSize = resolvedSize.value ?? 0;
+    return sizePhase.value === "ready" && currentSize > 0;
+  }, [resolvedSize, sizePhase]);
+
+  // Get the limit of the scroll.
+  const getLimit = React.useCallback(() => {
+    "worklet";
+
+    const totalSpan = variableSize ? sizeResolver.total.value : dataLength * size;
+    if (totalSpan <= 0) return 0;
+
+    if (!loop && !overscrollEnabled) {
+      const measurement = measure(containerRef);
+      const containerWidth = (vertical ? measurement?.height : measurement?.width) || 0;
+
+      // If the total span is less than the container's width, then there is no
+      // need to scroll.
+      if (totalSpan < containerWidth) return 0;
+
+      // Disable the "overscroll" effect
+      return totalSpan - containerWidth;
+    }
+
+    return totalSpan;
+  }, [loop, size, dataLength, overscrollEnabled, variableSize, sizeResolver, vertical]);
+
+  const withSpring = React.useCallback(
+    (toValue: number, onFinished?: () => void) => {
+      "worklet";
+      const defaultWithAnimation: WithTimingAnimation = {
+        type: "timing",
+        config: {
+          duration: scrollAnimationDuration + 100,
+          easing: Easing.easeOutQuart,
+        },
+      };
+
+      return dealWithAnimation(withAnimation ?? defaultWithAnimation)(
+        toValue,
+        (isFinished: boolean) => {
+          "worklet";
+          if (isFinished) onFinished && scheduleOnRN(onFinished);
+        }
+      );
+    },
+    [scrollAnimationDuration, withAnimation]
+  );
+
+  const endWithSpring = React.useCallback(
+    (
+      scrollEndTranslationValue: number,
+      scrollEndVelocityValue: number,
+      onFinished?: () => void
+    ) => {
+      "worklet";
+      // Use resolvedSize.value (SharedValue) instead of size (React state)
+      // to avoid race condition where sizeReady is true but size is still 0
+      const currentSize = resolvedSize.value ?? 0;
+      const totalSpan = variableSize ? sizeResolver.total.value : 0;
+      if (variableSize ? totalSpan <= 0 : currentSize <= 0) {
+        return;
+      }
+      const origin = translation.value;
+      const velocity = scrollEndVelocityValue;
+      // Default to scroll in the direction of the slide (with deceleration)
+      let finalTranslation: number = withDecay({ velocity, deceleration: 0.999 });
+
+      // Worklet-safe helpers that translate between scroll offsets and item
+      // indices. In uniform mode they reduce to the original `offset / size`
+      // math; in variable mode they consult the prefix-sum table.
+      const indexForOffset = (offset: number): number => {
+        if (variableSize) return sizeResolver.indexAt(offset);
+        return Math.round(offset / currentSize);
+      };
+      const offsetForIndex = (index: number): number => {
+        if (variableSize) return sizeResolver.offsetAt(index);
+        return index * currentSize;
+      };
+
+      // If the distance of the swipe exceeds the max scroll distance, keep the view at the current position
+      if (
+        maxScrollDistancePerSwipeIsSet &&
+        Math.abs(scrollEndTranslationValue) > maxScrollDistancePerSwipe
+      ) {
+        finalTranslation = origin;
+      } else {
+        // The final pan position plus a small velocity contribution determines
+        // which item we'd naturally land on. `nextPage` is that item's index.
+        const nextPage = indexForOffset(-(origin + velocity * 2));
+
+        if (pagingEnabled) {
+          // we'll never go further than a single page away from the current page when paging
+          // is enabled.
+
+          // distance with direction
+          const offset = -(scrollEndTranslationValue >= 0 ? 1 : -1); // 1 or -1
+          const page = variableSize
+            ? sizeResolver.indexAt(-origin)
+            : (offset < 0 ? Math.ceil : Math.floor)(-origin / currentSize);
+
+          const velocityDirection = -Math.sign(velocity);
+          if (page === nextPage || velocityDirection !== offset) {
+            // not going anywhere! Velocity was insufficient to overcome the distance to get to a
+            // further page. Let's reset gently to the current page.
+            finalTranslation = withSpring(
+              withProcessTranslation(-offsetForIndex(page)),
+              onFinished
+            );
+          } else if (loop) {
+            const finalPage = page + offset;
+            finalTranslation = withSpring(
+              withProcessTranslation(-offsetForIndex(finalPage)),
+              onFinished
+            );
+          } else {
+            const finalPage = Math.min(maxPage - 1, Math.max(0, page + offset));
+            finalTranslation = withSpring(
+              withProcessTranslation(-offsetForIndex(finalPage)),
+              onFinished
+            );
+          }
+        }
+
+        if (!pagingEnabled && snapEnabled) {
+          // scroll to the nearest item
+          finalTranslation = withSpring(
+            withProcessTranslation(-offsetForIndex(nextPage)),
+            onFinished
+          );
+        }
+      }
+
+      translation.value = finalTranslation;
+
+      function withProcessTranslation(translation: number) {
+        if (!loop && !overscrollEnabled) {
+          const limit = getLimit();
+          return Math.min(0, Math.max(-limit, translation));
+        }
+
+        return translation;
+      }
+    },
+    [
+      withSpring,
+      resolvedSize,
+      maxPage,
+      loop,
+      snapEnabled,
+      translation,
+      pagingEnabled,
+      maxScrollDistancePerSwipe,
+      maxScrollDistancePerSwipeIsSet,
+      variableSize,
+      sizeResolver,
+      overscrollEnabled,
+      getLimit,
+    ]
+  );
+
+  const onFinish = React.useCallback(
+    (isFinished: boolean) => {
+      "worklet";
+      if (isFinished) {
+        touching.value = false;
+        onScrollEnd && scheduleOnRN(onScrollEnd);
+      }
+    },
+    [onScrollEnd, touching]
+  );
+
+  const activeDecay = React.useCallback(() => {
+    "worklet";
+    touching.value = true;
+    translation.value = withDecay({ velocity: scrollEndVelocity.value }, (isFinished) =>
+      onFinish(isFinished as boolean)
+    );
+  }, [onFinish, scrollEndVelocity, touching, translation]);
+
+  const resetBoundary = React.useCallback(() => {
+    "worklet";
+    // Use resolvedSize.value (SharedValue) instead of size (React state)
+    // to avoid race condition where sizeReady is true but size is still 0
+    const currentSize = resolvedSize.value ?? 0;
+    const totalSpan = variableSize ? sizeResolver.total.value : 0;
+    if (variableSize ? totalSpan <= 0 : currentSize <= 0) return;
+    if (touching.value) return;
+
+    // Maximum negative translation: the start offset of the last item
+    // (so the last item sits at the left edge of the viewport).
+    const lastItemStart = variableSize
+      ? sizeResolver.offsetAt(maxPage - 1)
+      : (maxPage - 1) * currentSize;
+
+    if (translation.value > 0) {
+      if (scrollEndTranslation.value < 0) {
+        activeDecay();
+        return;
+      }
+      if (!loop) {
+        translation.value = withSpring(0);
+        return;
+      }
+    }
+
+    if (translation.value < -lastItemStart) {
+      if (scrollEndTranslation.value > 0) {
+        activeDecay();
+        return;
+      }
+      if (!loop) translation.value = withSpring(-lastItemStart);
+    }
+  }, [
+    touching,
+    translation,
+    maxPage,
+    resolvedSize,
+    scrollEndTranslation,
+    loop,
+    activeDecay,
+    withSpring,
+    variableSize,
+    sizeResolver,
+  ]);
+
+  useAnimatedReaction(
+    () => translation.value,
+    () => {
+      if (!pagingEnabled) resetBoundary();
+    },
+    [pagingEnabled, resetBoundary]
+  );
+
+  function withProcessTranslation(translation: number) {
+    "worklet";
+
+    if (!loop && !overscrollEnabled) {
+      const limit = getLimit();
+      return Math.min(0, Math.max(-limit, translation));
+    }
+
+    return translation;
+  }
+
+  const onGestureStart = useCallback(
+    (_: PanGestureHandlerEventPayload) => {
+      "worklet";
+      // Use resolvedSize.value (SharedValue) instead of size (React state)
+      // to avoid race condition where sizeReady is true but size is still 0
+      const currentSize = resolvedSize.value ?? 0;
+      const totalSpan = variableSize ? sizeResolver.total.value : 0;
+      const ready = variableSize ? totalSpan > 0 : sizeReady.value && currentSize > 0;
+      if (!ready) {
+        return;
+      }
+      touching.value = true;
+      validStart.value = true;
+      onScrollStart && scheduleOnRN(onScrollStart);
+
+      max.value = variableSize ? sizeResolver.offsetAt(maxPage - 1) : (maxPage - 1) * currentSize;
+      if (!loop && !overscrollEnabled) max.value = getLimit();
+
+      panOffset.value = translation.value;
+    },
+    [
+      max,
+      maxPage,
+      loop,
+      touching,
+      panOffset,
+      validStart,
+      translation,
+      overscrollEnabled,
+      getLimit,
+      onScrollStart,
+      sizeReady,
+      resolvedSize,
+      variableSize,
+      sizeResolver,
+    ]
+  );
+
+  const onGestureUpdate = useCallback(
+    (e: PanGestureHandlerEventPayload) => {
+      "worklet";
+      const currentSize = resolvedSize.value ?? 0;
+      const totalSpan = variableSize ? sizeResolver.total.value : 0;
+      const ready = variableSize ? totalSpan > 0 : sizeReady.value && currentSize > 0;
+      if (!ready) {
+        return;
+      }
+      if (panOffset.value === undefined) {
+        // This may happen if `onGestureStart` is called as a part of the
+        // JS thread (instead of the UI thread / worklet). If so, when
+        // `onGestureStart` sets panOffset.value, the set will be asynchronous,
+        // and so it may not actually occur before `onGestureUpdate` is called.
+        //
+        // Keeping this value as `undefined` when it is not active protects us
+        // from the situation where we may use the previous value for panOffset
+        // instead; this would cause a visual flicker in the carousel.
+
+        // console.warn("onGestureUpdate: panOffset is undefined");
+        return;
+      }
+
+      if (validStart.value) {
+        validStart.value = false;
+        cancelAnimation(translation);
+      }
+      touching.value = true;
+      const { translationX, translationY } = e;
+
+      let panTranslation = isHorizontal.value ? translationX : translationY;
+
+      if (fixedDirection === "negative") panTranslation = -Math.abs(panTranslation);
+      else if (fixedDirection === "positive") panTranslation = +Math.abs(panTranslation);
+
+      translation.value = computeGestureTranslation({
+        loop,
+        overscrollEnabled: overscrollEnabled ?? true,
+        currentTranslation: translation.value,
+        panOffset: panOffset.value,
+        panTranslation,
+        max: max.value,
+      });
+    },
+    [
+      isHorizontal,
+      max,
+      panOffset,
+      loop,
+      overscrollEnabled,
+      fixedDirection,
+      translation,
+      validStart,
+      touching,
+      sizeReady,
+      resolvedSize,
+      variableSize,
+      sizeResolver,
+    ]
+  );
+
+  const onGestureEnd = useCallback(
+    (e: GestureStateChangeEvent<PanGestureHandlerEventPayload>, _success: boolean) => {
+      "worklet";
+      // Use resolvedSize.value (SharedValue) instead of size (React state)
+      // to avoid race condition where sizeReady is true but size is still 0
+      const currentSize = resolvedSize.value ?? 0;
+      const totalSpan = variableSize ? sizeResolver.total.value : 0;
+      const ready = variableSize ? totalSpan > 0 : sizeReady.value && currentSize > 0;
+      if (!ready) {
+        panOffset.value = undefined;
+        return;
+      }
+
+      if (panOffset.value === undefined) {
+        // console.warn("onGestureEnd: panOffset is undefined");
+        return;
+      }
+
+      const { velocityX, velocityY, translationX, translationY } = e;
+      const scrollEndVelocityValue = isHorizontal.value ? velocityX : velocityY;
+      scrollEndVelocity.value = scrollEndVelocityValue; // may update async: see https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue#remarks
+
+      let panTranslation = isHorizontal.value ? translationX : translationY;
+
+      if (fixedDirection === "negative") panTranslation = -Math.abs(panTranslation);
+      else if (fixedDirection === "positive") panTranslation = +Math.abs(panTranslation);
+
+      scrollEndTranslation.value = panTranslation; // may update async: see https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue#remarks
+
+      const totalTranslation = scrollEndVelocityValue + panTranslation;
+
+      // Snap to the item-aligned target nearest a particular pixel offset.
+      // In uniform mode this is `round(target / size) * size`; in variable
+      // mode it's `offsetAt(indexAt(target))` (already item-aligned).
+      const snapToItemAlignedOffset = (rawTarget: number): number => {
+        if (variableSize) {
+          const idx = sizeResolver.indexAt(-rawTarget);
+          return -sizeResolver.offsetAt(idx);
+        }
+        return Math.round(rawTarget / currentSize) * currentSize;
+      };
+
+      /**
+       * 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 target = panOffset.value + maxScrollDistancePerSwipe * Math.sign(totalTranslation);
+        translation.value = withSpring(
+          withProcessTranslation(snapToItemAlignedOffset(target)),
+          onScrollEnd
+        );
+      } else if (
+        /**
+         * 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.
+         */
+        minScrollDistancePerSwipeIsSet &&
+        Math.abs(totalTranslation) < minScrollDistancePerSwipe
+      ) {
+        const target = panOffset.value + minScrollDistancePerSwipe * Math.sign(totalTranslation);
+        translation.value = withSpring(
+          withProcessTranslation(snapToItemAlignedOffset(target)),
+          onScrollEnd
+        );
+      } else {
+        endWithSpring(panTranslation, scrollEndVelocityValue, onScrollEnd);
+      }
+
+      if (!loop) touching.value = false;
+
+      panOffset.value = undefined;
+    },
+    [
+      loop,
+      touching,
+      panOffset,
+      translation,
+      isHorizontal,
+      scrollEndVelocity,
+      scrollEndTranslation,
+      fixedDirection,
+      maxScrollDistancePerSwipeIsSet,
+      maxScrollDistancePerSwipe,
+      minScrollDistancePerSwipeIsSet,
+      minScrollDistancePerSwipe,
+      endWithSpring,
+      withSpring,
+      onScrollEnd,
+      sizeReady,
+      resolvedSize,
+      variableSize,
+      sizeResolver,
+    ]
+  );
+
+  const gesture = usePanGestureProxy({
+    onConfigurePanGesture,
+    onGestureStart,
+    onGestureUpdate,
+    onGestureEnd,
+    options: { enabled },
+  });
+
+  const onLayout = React.useCallback(
+    (e: LayoutChangeEvent) => {
+      "worklet";
+
+      const measuredWidth = e.nativeEvent.layout.width;
+      const measuredHeight = e.nativeEvent.layout.height;
+      const measuredSize = Math.round((vertical ? measuredHeight : measuredWidth) || 0);
+
+      if (!sizeExplicit && measuredSize > 0) {
+        const current = resolvedSize.value ?? 0;
+        if (Math.abs(current - measuredSize) > 0) {
+          sizePhase.value = current > 0 ? "updating" : sizePhase.value;
+          resolvedSize.value = measuredSize;
+          sizePhase.value = "ready";
+        }
+      }
+
+      updateContainerSize({
+        width: measuredWidth,
+        height: measuredHeight,
+      });
+    },
+    [updateContainerSize, resolvedSize, sizePhase, vertical, sizeExplicit]
+  );
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View
+        ref={containerRef}
+        testID={testID}
+        style={style}
+        onTouchStart={onTouchBegin}
+        onTouchEnd={onTouchEnd}
+        onLayout={onLayout}
+      >
+        {props.children}
+      </Animated.View>
+    </GestureDetector>
+  );
+};
+
+export const ScrollViewGesture = IScrollViewGesture;

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

@@ -0,0 +1,53 @@
+import { render } from "@testing-library/react-native";
+import type { FC } from "react";
+import React from "react";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+
+describe("Carousel Animations", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it("animates opacity with timing", () => {
+    const TestComponent: FC<{ value: number }> = ({ value }) => {
+      const sharedValue = useSharedValue(value);
+
+      // Using withTiming to wrap the value change, so it can be tested
+      const animatedStyle = useAnimatedStyle(() => ({
+        opacity: withTiming(sharedValue.value, { duration: 500 }),
+      }));
+
+      // When the prop changes, update the shared value
+      React.useEffect(() => {
+        sharedValue.value = value;
+      }, [value, sharedValue]);
+
+      return <Animated.View testID="animated-view" style={animatedStyle} />;
+    };
+
+    const initialValue = 0;
+    const updatedValue = 1;
+
+    const { getByTestId, rerender } = render(<TestComponent value={initialValue} />);
+    const view = getByTestId("animated-view");
+
+    // Verify the initial state
+    expect(view).toHaveAnimatedStyle({ opacity: initialValue });
+
+    // Trigger the value change
+    rerender(<TestComponent value={updatedValue} />);
+
+    // Advance the animation to the middle point
+    jest.advanceTimersByTime(250);
+    expect(view).toHaveAnimatedStyle({ opacity: 0.5 }); // Animation middle value
+
+    // Advance the animation to the completion
+    jest.advanceTimersByTime(250);
+    expect(view).toHaveAnimatedStyle({ opacity: updatedValue }); // Animation completion
+  });
+});

package/src/constants/index.ts

@@ -0,0 +1,11 @@
+import type { EasingFunction } from "react-native-reanimated";
+import { Easing as _Easing } from "react-native-reanimated";
+
+export enum DATA_LENGTH {
+  SINGLE_ITEM = 1,
+  DOUBLE_ITEM = 2,
+}
+
+export const Easing = {
+  easeOutQuart: _Easing.bezier(0.25, 1, 0.5, 1) as unknown as EasingFunction,
+};