react-native-reanimated-carousel 3.2.0 → 3.3.1

package/src/hooks/useOffsetX.ts

@@ -1,88 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

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

package/src/layouts/BaseLayout.tsx

@@ -1,118 +0,0 @@
-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,
-      ]}
-    >
-      <LazyView shouldUpdate={shouldUpdate}>
-        {children({ animationValue })}
-      </LazyView>
-    </Animated.View>
-  );
-};

package/src/layouts/ParallaxLayout.tsx

@@ -1,142 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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,
-    };
-  };
-}