react-native-reanimated-carousel 3.3.1 → 3.3.2

package/src/hooks/useOffsetX.ts

@@ -0,0 +1,88 @@
+import type Animated from "react-native-reanimated";
+import {
+  Extrapolate,
+  interpolate,
+  useDerivedValue,
+} from "react-native-reanimated";
+
+import type { IVisibleRanges } from "./useVisibleRanges";
+
+export interface IOpts {
+  index: number
+  size: number
+  handlerOffset: Animated.SharedValue<number>
+  dataLength: number
+  type?: "positive" | "negative"
+  viewCount?: number
+  loop?: boolean
+}
+
+export const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {
+  const {
+    handlerOffset,
+    index,
+    size,
+    loop,
+    dataLength,
+    type = "positive",
+    viewCount: _viewCount,
+  } = opts;
+
+  const ITEM_LENGTH = dataLength;
+  const VALID_LENGTH = ITEM_LENGTH - 1;
+  const TOTAL_WIDTH = size * ITEM_LENGTH;
+  const HALF_WIDTH = 0.5 * size;
+
+  const viewCount = _viewCount ?? Math.round((ITEM_LENGTH - 1) / 2);
+  const positiveCount
+        = type === "positive" ? viewCount : VALID_LENGTH - viewCount;
+
+  let startPos = size * index;
+  if (index > positiveCount)
+    startPos = (index - ITEM_LENGTH) * size;
+
+  const MAX = positiveCount * size;
+  const MIN = -((VALID_LENGTH - positiveCount) * size);
+
+  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;
+
+    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,
+      ];
+
+      return interpolate(
+        handlerOffset.value,
+        inputRange,
+        outputRange,
+        Extrapolate.CLAMP,
+      );
+    }
+
+    return handlerOffset.value + size * index;
+  }, [loop, dataLength, viewCount, type, size, visibleRanges]);
+
+  return x;
+};

package/src/hooks/useOnProgressChange.ts

@@ -0,0 +1,50 @@
+import type Animated from "react-native-reanimated";
+import {
+  runOnJS,
+  useAnimatedReaction,
+} from "react-native-reanimated";
+
+import type { TCarouselProps } from "../types";
+import { computedOffsetXValueWithAutoFillData } from "../utils/computedWithAutoFillData";
+
+export function useOnProgressChange(
+  opts: {
+    size: number
+    autoFillData: boolean
+    loop: boolean
+    offsetX: Animated.SharedValue<number>
+    rawDataLength: number
+  } & Pick<TCarouselProps, "onProgressChange">,
+) {
+  const { autoFillData, loop, offsetX, size, rawDataLength, onProgressChange }
+        = opts;
+
+  useAnimatedReaction(
+    () => offsetX.value,
+    (_value) => {
+      let value = computedOffsetXValueWithAutoFillData({
+        value: _value,
+        rawDataLength,
+        size,
+        autoFillData,
+        loop,
+      });
+
+      if (!loop) {
+        value = Math.max(
+          -((rawDataLength - 1) * size),
+          Math.min(value, 0),
+        );
+      }
+
+      let absoluteProgress = Math.abs(value / size);
+
+      if (value > 0)
+        absoluteProgress = rawDataLength - absoluteProgress;
+
+      if (onProgressChange)
+        runOnJS(onProgressChange)(value, absoluteProgress);
+    },
+    [loop, autoFillData, rawDataLength, onProgressChange],
+  );
+}

package/src/hooks/usePropsErrorBoundary.ts

@@ -0,0 +1,31 @@
+import React from "react";
+
+import type { TCarouselProps } from "../types";
+
+export function usePropsErrorBoundary(props: TCarouselProps & { dataLength: number }) {
+  React.useEffect(() => {
+    const { defaultIndex, dataLength: viewCount } = props;
+
+    if (typeof defaultIndex === "number" && viewCount > 0) {
+      if (defaultIndex < 0 || defaultIndex >= viewCount) {
+        throw new Error(
+          "DefaultIndex must be in the range of data length.",
+        );
+      }
+    }
+
+    // TODO
+    if (!props.mode || props.mode === "parallax") {
+      if (!props.vertical && !props.width) {
+        throw new Error(
+          "`width` must be specified for horizontal carousels.",
+        );
+      }
+      if (props.vertical && !props.height) {
+        throw new Error(
+          "`height` must be specified for vertical carousels.",
+        );
+      }
+    }
+  }, [props]);
+}

package/src/hooks/useVisibleRanges.tsx

@@ -0,0 +1,49 @@
+import type Animated from "react-native-reanimated";
+import { useDerivedValue } from "react-native-reanimated";
+
+export type IVisibleRanges = Animated.SharedValue<{
+  negativeRange: number[]
+  positiveRange: number[]
+}>;
+
+export function useVisibleRanges(options: {
+  total: number
+  viewSize: number
+  windowSize?: number
+  translation: Animated.SharedValue<number>
+}): IVisibleRanges {
+  const {
+    total = 0,
+    viewSize,
+    translation,
+    windowSize: _windowSize = 0,
+  } = options;
+
+  const windowSize = total <= _windowSize ? total : _windowSize;
+
+  const ranges = useDerivedValue(() => {
+    const positiveCount = Math.round(windowSize / 2);
+    const negativeCount = windowSize - positiveCount;
+    let curIndex = Math.round(-translation.value / viewSize);
+    curIndex = curIndex < 0 ? (curIndex % total) + total : curIndex;
+    const negativeRange = [
+      (curIndex - negativeCount + total) % total,
+      (curIndex - 1 + total) % total,
+    ];
+    const positiveRange = [
+      (curIndex + total) % total,
+      (curIndex + positiveCount + total) % total,
+    ];
+    if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {
+      negativeRange[1] = total - 1;
+      positiveRange[0] = 0;
+    }
+    if (positiveRange[0] > positiveRange[1]) {
+      negativeRange[1] = total - 1;
+      positiveRange[0] = 0;
+    }
+    return { negativeRange, positiveRange };
+  }, [total, windowSize, translation]);
+
+  return ranges;
+}

package/src/index.tsx

@@ -0,0 +1,8 @@
+import Carousel from "./Carousel";
+export type {
+  TCarouselProps,
+  ICarouselInstance,
+  IComputedDirectionTypes,
+} from "./types";
+
+export default Carousel;

package/src/layouts/BaseLayout.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import type { ViewStyle } from "react-native";
+import type { AnimatedStyleProp } from "react-native-reanimated";
+import Animated, {
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useDerivedValue,
+} from "react-native-reanimated";
+
+import type { ILayoutConfig } from "./stack";
+
+import { useCheckMounted } from "../hooks/useCheckMounted";
+import type { IOpts } from "../hooks/useOffsetX";
+import { useOffsetX } from "../hooks/useOffsetX";
+import type { IVisibleRanges } from "../hooks/useVisibleRanges";
+import { LazyView } from "../LazyView";
+import { CTX } from "../store";
+
+export type TAnimationStyle = (value: number) => AnimatedStyleProp<ViewStyle>;
+
+export const BaseLayout: React.FC<{
+  index: number
+  handlerOffset: Animated.SharedValue<number>
+  visibleRanges: IVisibleRanges
+  animationStyle: TAnimationStyle
+  children: (ctx: {
+    animationValue: Animated.SharedValue<number>
+  }) => React.ReactElement
+}> = (props) => {
+  const mounted = useCheckMounted();
+  const { handlerOffset, index, children, visibleRanges, animationStyle }
+  = props;
+
+  const context = React.useContext(CTX);
+  const {
+    props: {
+      loop,
+      dataLength,
+      width,
+      height,
+      vertical,
+      customConfig,
+      mode,
+      modeConfig,
+    },
+  } = context;
+  const size = vertical ? height : width;
+  const [shouldUpdate, setShouldUpdate] = React.useState(false);
+  let offsetXConfig: IOpts = {
+    handlerOffset,
+    index,
+    size,
+    dataLength,
+    loop,
+    ...(typeof customConfig === "function" ? customConfig() : {}),
+  };
+
+  if (mode === "horizontal-stack") {
+    const { snapDirection, showLength } = modeConfig as ILayoutConfig;
+
+    offsetXConfig = {
+      handlerOffset,
+      index,
+      size,
+      dataLength,
+      loop,
+      type: snapDirection === "right" ? "negative" : "positive",
+      viewCount: showLength,
+    };
+  }
+
+  const x = useOffsetX(offsetXConfig, visibleRanges);
+  const animationValue = useDerivedValue(() => x.value / size, [x, size]);
+  const animatedStyle = useAnimatedStyle(
+    () => animationStyle(x.value / size),
+    [animationStyle],
+  );
+
+  const updateView = React.useCallback(
+    (negativeRange: number[], positiveRange: number[]) => {
+      mounted.current
+                && setShouldUpdate(
+                  (index >= negativeRange[0] && index <= negativeRange[1])
+                        || (index >= positiveRange[0] && index <= positiveRange[1]),
+                );
+    },
+    [index, mounted],
+  );
+
+  useAnimatedReaction(
+    () => visibleRanges.value,
+    () => {
+      runOnJS(updateView)(
+        visibleRanges.value.negativeRange,
+        visibleRanges.value.positiveRange,
+      );
+    },
+    [visibleRanges.value],
+  );
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width: width || "100%",
+          height: height || "100%",
+          position: "absolute",
+        },
+        animatedStyle,
+      ]}
+      /**
+       * We use this testID to know when the carousel item is ready to be tested in test.
+       * e.g.
+       *  The testID of first item will be changed to __CAROUSEL_ITEM_0_READY__ from __CAROUSEL_ITEM_0_NOT_READY__ when the item is ready.
+       * */
+      testID={`__CAROUSEL_ITEM_${index}_${shouldUpdate ? "READY" : "NOT_READY"}__`}
+    >
+      <LazyView shouldUpdate={shouldUpdate}>
+        {children({ animationValue })}
+      </LazyView>
+    </Animated.View>
+  );
+};

package/src/layouts/ParallaxLayout.tsx

@@ -0,0 +1,142 @@
+import React from "react";
+import Animated, {
+  Extrapolate,
+  interpolate,
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+} from "react-native-reanimated";
+
+import type { ILayoutConfig } from "./parallax";
+
+import { useOffsetX } from "../hooks/useOffsetX";
+import type { IVisibleRanges } from "../hooks/useVisibleRanges";
+import { LazyView } from "../LazyView";
+import type { IComputedDirectionTypes } from "../types";
+
+export const ParallaxLayout: React.FC<
+IComputedDirectionTypes<
+{
+  loop?: boolean
+  handlerOffset: Animated.SharedValue<number>
+  index: number
+  dataLength: number
+  visibleRanges: IVisibleRanges
+} & ILayoutConfig
+>
+> = (props) => {
+  const {
+    handlerOffset,
+    parallaxScrollingOffset = 100,
+    parallaxScrollingScale = 0.8,
+    parallaxAdjacentItemScale = parallaxScrollingScale ** 2,
+    index,
+    width,
+    height,
+    loop,
+    dataLength,
+    children,
+    visibleRanges,
+    vertical,
+  } = props;
+
+  const [shouldUpdate, setShouldUpdate] = React.useState(false);
+
+  const size = props.vertical ? props.height : props.width;
+
+  const x = useOffsetX(
+    {
+      handlerOffset,
+      index,
+      size,
+      dataLength,
+      loop,
+    },
+    visibleRanges,
+  );
+
+  const offsetXStyle = useAnimatedStyle(() => {
+    const value = x.value / size;
+
+    const translate = interpolate(
+      value,
+      [-1, 0, 1],
+      [
+        -size + parallaxScrollingOffset,
+        0,
+        size - parallaxScrollingOffset,
+      ],
+      Extrapolate.EXTEND,
+    );
+
+    const zIndex = interpolate(
+      value,
+      [-1, 0, 1],
+      [0, size, 0],
+      Extrapolate.CLAMP,
+    );
+
+    const scale = interpolate(
+      value,
+      [-1, 0, 1],
+      [
+        parallaxAdjacentItemScale,
+        parallaxScrollingScale,
+        parallaxAdjacentItemScale,
+      ],
+      Extrapolate.CLAMP,
+    );
+
+    return {
+      transform: [
+        vertical
+          ? {
+            translateY: translate,
+          }
+          : {
+            translateX: translate,
+          },
+        {
+          scale,
+        },
+      ],
+      zIndex,
+    };
+  }, [loop, vertical, parallaxScrollingOffset]);
+
+  const updateView = React.useCallback(
+    (negativeRange: number[], positiveRange: number[]) => {
+      setShouldUpdate(
+        (index >= negativeRange[0] && index <= negativeRange[1])
+                    || (index >= positiveRange[0] && index <= positiveRange[1]),
+      );
+    },
+    [index],
+  );
+
+  useAnimatedReaction(
+    () => visibleRanges.value,
+    () => {
+      runOnJS(updateView)(
+        visibleRanges.value.negativeRange,
+        visibleRanges.value.positiveRange,
+      );
+    },
+    [visibleRanges.value],
+  );
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width: width || "100%",
+          height: height || "100%",
+          position: "absolute",
+        },
+        offsetXStyle,
+      ]}
+    >
+      <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>
+    </Animated.View>
+  );
+};

package/src/layouts/index.tsx

@@ -0,0 +1,12 @@
+import { normalLayout } from "./normal";
+import { parallaxLayout } from "./parallax";
+import { horizontalStackLayout, verticalStackLayout } from "./stack";
+
+export type TMode = "parallax" | "horizontal-stack" | "vertical-stack";
+
+export const Layouts = {
+  normal: normalLayout,
+  parallax: parallaxLayout,
+  horizontalStack: horizontalStackLayout,
+  verticalStack: verticalStackLayout,
+};

package/src/layouts/normal.ts

@@ -0,0 +1,22 @@
+import { interpolate } from "react-native-reanimated";
+
+export function normalLayout(opts: { size: number; vertical: boolean }) {
+  const { size, vertical } = opts;
+
+  return (value: number) => {
+    "worklet";
+    const translate = interpolate(value, [-1, 0, 1], [-size, 0, size]);
+
+    return {
+      transform: [
+        vertical
+          ? {
+            translateY: translate,
+          }
+          : {
+            translateX: translate,
+          },
+      ],
+    };
+  };
+}

package/src/layouts/parallax.ts

@@ -0,0 +1,89 @@
+import { Extrapolate, interpolate } from "react-native-reanimated";
+
+import type { IComputedDirectionTypes } from "../types";
+
+interface TBaseConfig {
+  size: number
+  vertical: boolean
+}
+
+export interface ILayoutConfig {
+  /**
+     * control prev/next item offset.
+     * @default 100
+     */
+  parallaxScrollingOffset?: number
+  /**
+     * control prev/current/next item offset.
+     * @default 0.8
+     */
+  parallaxScrollingScale?: number
+  /**
+     * control prev/next item offset.
+     * @default Math.pow(parallaxScrollingScale, 2)
+     */
+  parallaxAdjacentItemScale?: number
+}
+
+export type TParallaxModeProps = IComputedDirectionTypes<{
+  /**
+     * Carousel Animated transitions.
+     */
+  mode?: "parallax"
+  modeConfig?: ILayoutConfig
+}>;
+
+export function parallaxLayout(
+  baseConfig: TBaseConfig,
+  modeConfig: ILayoutConfig = {},
+) {
+  const { size, vertical } = baseConfig;
+  const {
+    parallaxScrollingOffset = 100,
+    parallaxScrollingScale = 0.8,
+    parallaxAdjacentItemScale = parallaxScrollingScale ** 2,
+  } = modeConfig;
+
+  return (value: number) => {
+    "worklet";
+    const translate = interpolate(
+      value,
+      [-1, 0, 1],
+      [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset],
+    );
+
+    const zIndex = interpolate(
+      value,
+      [-1, 0, 1],
+      [0, size, 0],
+      Extrapolate.CLAMP,
+    );
+
+    const scale = interpolate(
+      value,
+      [-1, 0, 1],
+      [
+        parallaxAdjacentItemScale,
+        parallaxScrollingScale,
+        parallaxAdjacentItemScale,
+      ],
+      Extrapolate.CLAMP,
+    );
+
+    return {
+      transform: [
+        vertical
+          ? {
+            translateY: translate,
+          }
+          : {
+            translateX: translate,
+          },
+        {
+          scale,
+        },
+      ],
+      zIndex,
+    };
+  };
+}