react-native-reanimated-carousel 3.1.0 → 3.1.2

package/src/hooks/useCommonVariables.ts

@@ -1,37 +1,74 @@
-import React from 'react';
-import Animated, { useSharedValue } from 'react-native-reanimated';
-import type { TInitializeCarouselProps } from './useInitProps';
+import React from "react";
+import type Animated from "react-native-reanimated";
+import { useSharedValue, useAnimatedReaction } from "react-native-reanimated";
+
+import { computeNewIndexWhenDataChanges } from "./computeNewIndexWhenDataChanges";
+import type { TInitializeCarouselProps } from "./useInitProps";
+
+import { handlerOffsetDirection } from "../utils/handlerOffsetDirection";
 
 interface ICommonVariables {
-    size: number;
-    validLength: number;
-    handlerOffset: Animated.SharedValue<number>;
+  size: number
+  validLength: number
+  handlerOffset: Animated.SharedValue<number>
 }
 
 export function useCommonVariables(
-    props: TInitializeCarouselProps<any>
+  props: TInitializeCarouselProps<any>,
 ): ICommonVariables {
-    const {
-        vertical,
-        height,
-        width,
-        data,
-        defaultIndex,
-        defaultScrollOffsetValue,
-    } = props;
-    const size = vertical ? height : width;
-    const validLength = data.length - 1;
-    const defaultHandlerOffsetValue = -Math.abs(defaultIndex * size);
-    const _handlerOffset = useSharedValue<number>(defaultHandlerOffsetValue);
-    const handlerOffset = defaultScrollOffsetValue ?? _handlerOffset;
-
-    React.useEffect(() => {
-        handlerOffset.value = defaultHandlerOffsetValue;
-    }, [vertical, handlerOffset, defaultHandlerOffsetValue]);
+  const {
+    vertical,
+    height,
+    width,
+    data,
+    defaultIndex,
+    defaultScrollOffsetValue,
+    loop,
+  } = props;
+  const size = vertical ? height : width;
+  const validLength = data.length - 1;
+  const defaultHandlerOffsetValue = -Math.abs(defaultIndex * size);
+  const _handlerOffset = useSharedValue<number>(defaultHandlerOffsetValue);
+  const handlerOffset = defaultScrollOffsetValue ?? _handlerOffset;
+  const prevData = useSharedValue(data);
+
+  React.useEffect(() => {
+    handlerOffset.value = defaultHandlerOffsetValue;
+  }, [vertical, handlerOffset, defaultHandlerOffsetValue]);
+
+  useAnimatedReaction(() => {
+    const _data = data.slice();
+    const previousLength = prevData.value.length;
+    const currentLength = _data.length;
+    const isLengthChanged = previousLength !== currentLength;
+    const shouldComputed = isLengthChanged && loop;
+
+    if (shouldComputed)
+      prevData.value = _data;
 
     return {
-        size,
-        validLength,
-        handlerOffset,
+      shouldComputed,
+      previousLength,
+      currentLength,
     };
+  }, ({ shouldComputed, previousLength, currentLength }) => {
+    if (shouldComputed) {
+      // direction -> 1 | -1
+      const direction = handlerOffsetDirection(handlerOffset);
+
+      handlerOffset.value = computeNewIndexWhenDataChanges({
+        direction,
+        previousLength,
+        currentLength,
+        size,
+        handlerOffset: handlerOffset.value,
+      });
+    }
+  }, [data, loop]);
+
+  return {
+    size,
+    validLength,
+    handlerOffset,
+  };
 }

package/src/hooks/useInitProps.ts

@@ -1,82 +1,83 @@
-import { computedFillDataWithAutoFillData } from '../utils/computedWithAutoFillData';
-import React from 'react';
-import type { TCarouselProps } from '../types';
+import React from "react";
+
+import type { TCarouselProps } from "../types";
+import { computedFillDataWithAutoFillData } from "../utils/computedWithAutoFillData";
 
 type TGetRequiredProps<P extends keyof TCarouselProps> = Record<
-    P,
-    Required<TCarouselProps>[P]
+P,
+Required<TCarouselProps>[P]
 >;
 
 export type TInitializeCarouselProps<T> = TCarouselProps<T> &
-    TGetRequiredProps<
-        | 'defaultIndex'
-        | 'loop'
-        | 'width'
-        | 'height'
-        | 'scrollAnimationDuration'
-        | 'autoPlayInterval'
-        | 'autoFillData'
-    > & {
-        // Raw data that has not been processed
-        rawData: T[];
-    };
+TGetRequiredProps<
+| "defaultIndex"
+| "loop"
+| "width"
+| "height"
+| "scrollAnimationDuration"
+| "autoPlayInterval"
+| "autoFillData"
+> & {
+  // Raw data that has not been processed
+  rawData: T[]
+};
 
 export function useInitProps<T>(
-    props: TCarouselProps<T>
+  props: TCarouselProps<T>,
 ): TInitializeCarouselProps<T> {
-    const {
-        defaultIndex = 0,
-        data: rawData = [],
-        loop = true,
-        enabled = true,
-        autoPlayInterval: _autoPlayInterval = 1000,
-        scrollAnimationDuration = 500,
-        style = {},
-        panGestureHandlerProps = {},
-        pagingEnabled = true,
-        autoFillData = true,
-        snapEnabled = props.enableSnap ?? true,
-        width: _width,
-        height: _height,
-    } = props;
-
-    const width = Math.round(_width || 0);
-    const height = Math.round(_height || 0);
-    const autoPlayInterval = Math.max(_autoPlayInterval, 0);
+  const {
+    defaultIndex = 0,
+    data: rawData = [],
+    loop = true,
+    enabled = true,
+    autoPlayInterval: _autoPlayInterval = 1000,
+    scrollAnimationDuration = 500,
+    style = {},
+    panGestureHandlerProps = {},
+    pagingEnabled = true,
+    autoFillData = true,
+    snapEnabled = props.enableSnap ?? true,
+    width: _width,
+    height: _height,
+  } = props;
 
-    const data = React.useMemo<T[]>(
-        () =>
-            computedFillDataWithAutoFillData<T>({
-                loop,
-                autoFillData,
-                data: rawData,
-                dataLength: rawData.length,
-            }),
-        [rawData, loop, autoFillData]
-    );
+  const width = Math.round(_width || 0);
+  const height = Math.round(_height || 0);
+  const autoPlayInterval = Math.max(_autoPlayInterval, 0);
 
-    if (props.mode === 'vertical-stack' || props.mode === 'horizontal-stack') {
-        if (!props.modeConfig) {
-            props.modeConfig = {};
-        }
-        props.modeConfig.showLength =
-            props.modeConfig?.showLength ?? data.length - 1;
-    }
-    return {
-        ...props,
-        defaultIndex,
-        autoFillData,
-        data,
-        rawData,
+  const data = React.useMemo<T[]>(
+    () =>
+      computedFillDataWithAutoFillData<T>({
         loop,
-        enabled,
-        autoPlayInterval,
-        scrollAnimationDuration,
-        style,
-        panGestureHandlerProps,
-        pagingEnabled,
-        snapEnabled,
-        width,
-        height,
-    };
+        autoFillData,
+        data: rawData,
+        dataLength: rawData.length,
+      }),
+    [rawData, loop, autoFillData],
+  );
+
+  if (props.mode === "vertical-stack" || props.mode === "horizontal-stack") {
+    if (!props.modeConfig)
+      props.modeConfig = {};
+
+    props.modeConfig.showLength
+            = props.modeConfig?.showLength ?? data.length - 1;
+  }
+  return {
+    ...props,
+    defaultIndex,
+    autoFillData,
+    data,
+    rawData,
+    loop,
+    enabled,
+    autoPlayInterval,
+    scrollAnimationDuration,
+    style,
+    panGestureHandlerProps,
+    pagingEnabled,
+    snapEnabled,
+    width,
+    height,
+  };
 }

package/src/hooks/useLayoutConfig.ts

@@ -1,26 +1,28 @@
-import React from 'react';
-import type { TAnimationStyle } from '../layouts/BaseLayout';
-import { Layouts } from '../layouts';
-import type { TInitializeCarouselProps } from './useInitProps';
+import React from "react";
+
+import type { TInitializeCarouselProps } from "./useInitProps";
+
+import { Layouts } from "../layouts";
+import type { TAnimationStyle } from "../layouts/BaseLayout";
 
 type TLayoutConfigOpts<T> = TInitializeCarouselProps<T> & { size: number };
 
 export function useLayoutConfig<T>(
-    opts: TLayoutConfigOpts<T>
+  opts: TLayoutConfigOpts<T>,
 ): TAnimationStyle {
-    const { size, vertical } = opts as Required<TLayoutConfigOpts<T>>;
+  const { size, vertical } = opts as Required<TLayoutConfigOpts<T>>;
 
-    return React.useMemo(() => {
-        const baseConfig = { size, vertical };
-        switch (opts.mode) {
-            case 'parallax':
-                return Layouts.parallax(baseConfig, opts.modeConfig);
-            case 'horizontal-stack':
-                return Layouts.horizontalStack(opts.modeConfig);
-            case 'vertical-stack':
-                return Layouts.verticalStack(opts.modeConfig);
-            default:
-                return Layouts.normal(baseConfig);
-        }
-    }, [opts.mode, opts.modeConfig, size, vertical]);
+  return React.useMemo(() => {
+    const baseConfig = { size, vertical };
+    switch (opts.mode) {
+      case "parallax":
+        return Layouts.parallax(baseConfig, opts.modeConfig);
+      case "horizontal-stack":
+        return Layouts.horizontalStack(opts.modeConfig);
+      case "vertical-stack":
+        return Layouts.verticalStack(opts.modeConfig);
+      default:
+        return Layouts.normal(baseConfig);
+    }
+  }, [opts.mode, opts.modeConfig, size, vertical]);
 }

package/src/hooks/useOffsetX.ts

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

package/src/hooks/useOnProgressChange.ts

@@ -1,51 +1,52 @@
-import Animated, {
-    runOnJS,
-    useAnimatedReaction,
-} from 'react-native-reanimated';
-import { computedOffsetXValueWithAutoFillData } from '../utils/computedWithAutoFillData';
-import type { TCarouselProps } from '../types';
+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>;
-        rawData: TCarouselProps['data'];
-    } & Pick<TCarouselProps, 'onProgressChange'>
+  opts: {
+    size: number
+    autoFillData: boolean
+    loop: boolean
+    offsetX: Animated.SharedValue<number>
+    rawData: TCarouselProps["data"]
+  } & Pick<TCarouselProps, "onProgressChange">,
 ) {
-    const { autoFillData, loop, offsetX, rawData, size, onProgressChange } =
-        opts;
-
-    const rawDataLength = rawData.length;
-
-    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;
-            }
-
-            !!onProgressChange &&
-                runOnJS(onProgressChange)(value, absoluteProgress);
-        },
-        [loop, autoFillData, rawDataLength, onProgressChange]
-    );
+  const { autoFillData, loop, offsetX, rawData, size, onProgressChange }
+        = opts;
+
+  const rawDataLength = rawData.length;
+
+  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 +1,32 @@
-import React from 'react';
-import type { TCarouselProps } from '../types';
+import React from "react";
+
+import type { TCarouselProps } from "../types";
 
 export function usePropsErrorBoundary(props: TCarouselProps) {
-    React.useEffect(() => {
-        const { defaultIndex, data } = props;
+  React.useEffect(() => {
+    const { defaultIndex, data } = props;
 
-        const viewCount = data.length;
-        if (typeof defaultIndex === 'number' && viewCount > 0) {
-            if (defaultIndex < 0 || defaultIndex >= viewCount) {
-                throw Error(
-                    'DefaultIndex must be in the range of data length.'
-                );
-            }
-        }
+    const viewCount = data.length;
+    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 Error(
-                    '`width` must be specified for horizontal carousels.'
-                );
-            }
-            if (props.vertical && !props.height) {
-                throw Error(
-                    '`height` must be specified for vertical carousels.'
-                );
-            }
-        }
-    }, [props]);
+    // 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]);
 }