react-native-reanimated-carousel 3.3.0 → 3.3.1

package/src/layouts/stack.ts

@@ -1,362 +0,0 @@
-import { useMemo } from "react";
-import type { TransformsStyle, ViewStyle } from "react-native";
-import { Dimensions } from "react-native";
-import { Extrapolate, interpolate } from "react-native-reanimated";
-
-import type { IComputedDirectionTypes, CustomConfig } from "../types";
-
-const screen = Dimensions.get("window");
-
-export interface ILayoutConfig {
-  showLength?: number
-  moveSize?: number
-  stackInterval?: number
-  scaleInterval?: number
-  opacityInterval?: number
-  rotateZDeg?: number
-  snapDirection?: "left" | "right"
-}
-
-export type TStackModeProps = IComputedDirectionTypes<{
-  /**
-     * Carousel Animated transitions.
-     */
-  mode?: "horizontal-stack" | "vertical-stack"
-  /**
-     * Stack animation style.
-     * @default
-     *     mode: 'vertical',
-     *     snapDirection: 'right',
-     *     moveSize: window.width,
-     *     stackInterval: 30,
-     *     scaleInterval: 0.08,
-     *     rotateZDeg: 135,
-     */
-  modeConfig?: ILayoutConfig
-}>;
-
-export function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {
-  return (_value: number) => {
-    "worklet";
-
-    const {
-      showLength,
-      snapDirection = "left",
-      moveSize = screen.width,
-      stackInterval = 18,
-      scaleInterval = 0.04,
-      opacityInterval = 0.1,
-      rotateZDeg = 30,
-    } = modeConfig;
-
-    const transform: TransformsStyle["transform"] = [];
-    const { validLength, value, inputRange } = getCommonVariables({
-      showLength: showLength!,
-      value: _value,
-      snapDirection,
-    });
-    const { zIndex, opacity } = getCommonStyles({
-      validLength,
-      value,
-      opacityInterval,
-      snapDirection,
-    });
-
-    const styles: ViewStyle = {
-      transform,
-      zIndex,
-      opacity,
-    };
-
-    let translateX: number;
-    let scale: number;
-    let rotateZ: string;
-
-    if (snapDirection === "left") {
-      translateX = interpolate(
-        value,
-        inputRange,
-        [-moveSize, 0, validLength * stackInterval],
-        Extrapolate.CLAMP,
-      );
-      scale = interpolate(
-        value,
-        inputRange,
-        [1, 1, 1 - validLength * scaleInterval],
-        Extrapolate.CLAMP,
-      );
-      rotateZ = `${interpolate(
-        value,
-        inputRange,
-        [-rotateZDeg, 0, 0],
-        Extrapolate.CLAMP,
-      )}deg`;
-    }
-    else if (snapDirection === "right") {
-      translateX = interpolate(
-        value,
-        inputRange,
-        [-validLength * stackInterval, 0, moveSize],
-        Extrapolate.CLAMP,
-      );
-      scale = interpolate(
-        value,
-        inputRange,
-        [1 - validLength * scaleInterval, 1, 1],
-        Extrapolate.CLAMP,
-      );
-      rotateZ = `${interpolate(
-        value,
-        inputRange,
-        [0, 0, rotateZDeg],
-        Extrapolate.CLAMP,
-      )}deg`;
-    }
-
-    transform.push(
-      {
-        translateX: translateX!,
-      },
-      {
-        scale: scale!,
-      },
-      {
-        rotateZ: rotateZ!,
-      },
-    );
-
-    return styles;
-  };
-}
-
-export function useHorizontalStackLayout(
-  customAnimationConfig: ILayoutConfig = {},
-  customConfig: CustomConfig = {},
-) {
-  const config = useMemo(
-    () => ({
-      type:
-                customAnimationConfig.snapDirection === "right"
-                  ? "negative"
-                  : "positive",
-      viewCount: customAnimationConfig.showLength,
-      ...customConfig,
-    }),
-    [customAnimationConfig, customConfig],
-  );
-
-  return {
-    layout: horizontalStackLayout(customAnimationConfig),
-    config,
-  };
-}
-
-export function verticalStackLayout(modeConfig: ILayoutConfig = {}) {
-  return (_value: number) => {
-    "worklet";
-
-    const {
-      showLength,
-      snapDirection = "left",
-      moveSize = screen.width,
-      stackInterval = 18,
-      scaleInterval = 0.04,
-      opacityInterval = 0.1,
-      rotateZDeg = 30,
-    } = modeConfig;
-    const transform: TransformsStyle["transform"] = [];
-    const { validLength, value, inputRange } = getCommonVariables({
-      showLength: showLength!,
-      value: _value,
-      snapDirection,
-    });
-    const { zIndex, opacity } = getCommonStyles({
-      validLength,
-      value,
-      opacityInterval,
-      snapDirection,
-    });
-
-    const styles: ViewStyle = {
-      transform,
-      zIndex,
-      opacity,
-    };
-
-    let translateX: number;
-    let scale: number;
-    let rotateZ: string;
-    let translateY: number;
-
-    if (snapDirection === "left") {
-      translateX = interpolate(
-        value,
-        inputRange,
-        [-moveSize, 0, 0],
-        Extrapolate.CLAMP,
-      );
-      scale = interpolate(
-        value,
-        inputRange,
-        [1, 1, 1 - validLength * scaleInterval],
-        Extrapolate.CLAMP,
-      );
-      rotateZ = `${interpolate(
-        value,
-        inputRange,
-        [-rotateZDeg, 0, 0],
-        Extrapolate.CLAMP,
-      )}deg`;
-      translateY = interpolate(
-        value,
-        inputRange,
-        [0, 0, validLength * stackInterval],
-        Extrapolate.CLAMP,
-      );
-    }
-    else if (snapDirection === "right") {
-      translateX = interpolate(
-        value,
-        inputRange,
-        [0, 0, moveSize],
-        Extrapolate.CLAMP,
-      );
-      scale = interpolate(
-        value,
-        inputRange,
-        [1 - validLength * scaleInterval, 1, 1],
-        Extrapolate.CLAMP,
-      );
-      rotateZ = `${interpolate(
-        value,
-        inputRange,
-        [0, 0, rotateZDeg],
-        Extrapolate.CLAMP,
-      )}deg`;
-      translateY = interpolate(
-        value,
-        inputRange,
-        [validLength * stackInterval, 0, 0],
-        Extrapolate.CLAMP,
-      );
-    }
-
-    transform.push(
-      {
-        translateX: translateX!,
-      },
-      {
-        scale: scale!,
-      },
-      {
-        rotateZ: rotateZ!,
-      },
-      {
-        translateY: translateY!,
-      },
-    );
-
-    return styles;
-  };
-}
-
-function getCommonVariables(opts: {
-  value: number
-  showLength: number
-  snapDirection: "left" | "right"
-}) {
-  "worklet";
-
-  const { showLength, value: _value, snapDirection } = opts;
-  function easeInOutCubic(v: number): number {
-    return v < 0.5 ? 4 * v * v * v : 1 - (-2 * v + 2) ** 3 / 2;
-  }
-  const page = Math.floor(Math.abs(_value));
-  const diff = Math.abs(_value) % 1;
-  const value
-        = _value < 0
-          ? -(page + easeInOutCubic(diff))
-          : page + easeInOutCubic(diff);
-  const validLength = showLength! - 1;
-
-  let inputRange: [number, number, number];
-
-  if (snapDirection === "left")
-    inputRange = [-1, 0, validLength];
-  else if (snapDirection === "right")
-    inputRange = [-validLength, 0, 1];
-  else
-    throw new Error("snapDirection must be set to either left or right");
-
-  return {
-    inputRange,
-    validLength,
-    value,
-  };
-}
-
-function getCommonStyles(opts: {
-  value: number
-  validLength: number
-  opacityInterval: number
-  snapDirection: "left" | "right"
-}) {
-  "worklet";
-
-  const { snapDirection, validLength, value, opacityInterval } = opts;
-
-  let zIndex: number;
-  let opacity: number;
-
-  if (snapDirection === "left") {
-    zIndex
-            = Math.floor(
-        interpolate(
-          value,
-          [-1.5, -1, -1 + Number.MIN_VALUE, 0, validLength],
-          [
-            Number.MIN_VALUE,
-            validLength,
-            validLength,
-            validLength - 1,
-            -1,
-          ],
-        ) * 10000,
-      ) / 100;
-
-    opacity = interpolate(
-      value,
-      [-1, 0, validLength - 1, validLength],
-      [0.25, 1, 1 - (validLength - 1) * opacityInterval, 0.25],
-    );
-  }
-  else if (snapDirection === "right") {
-    zIndex
-            = Math.floor(
-        interpolate(
-          value,
-          [-validLength, 0, 1 - Number.MIN_VALUE, 1, 1.5],
-          [
-            1,
-            validLength - 1,
-            validLength,
-            validLength,
-            Number.MIN_VALUE,
-          ],
-        ) * 10000,
-      ) / 100;
-    opacity = interpolate(
-      value,
-      [-validLength, 1 - validLength, 0, 1],
-      [0.25, 1 - (validLength - 1) * opacityInterval, 1, 0.25],
-    );
-  }
-  else {
-    throw new Error("snapDirection must be set to either left or right");
-  }
-
-  return {
-    zIndex,
-    opacity,
-  };
-}

package/src/store/index.ts

@@ -1,13 +0,0 @@
-import React from "react";
-
-import type { TInitializeCarouselProps } from "../hooks/useInitProps";
-
-export interface IContext {
-  props: TInitializeCarouselProps<any>
-  common: {
-    size: number
-    validLength: number
-  }
-}
-
-export const CTX = React.createContext<IContext>({} as IContext);

package/src/types.ts

@@ -1,237 +0,0 @@
-import type { StyleProp, ViewStyle } from "react-native";
-import type { PanGestureHandlerProps } from "react-native-gesture-handler";
-import type {
-  AnimatedStyleProp,
-  SharedValue,
-  WithSpringConfig,
-  WithTimingConfig,
-} from "react-native-reanimated";
-import type Animated from "react-native-reanimated";
-
-import type { TParallaxModeProps } from "./layouts/parallax";
-import type { TStackModeProps } from "./layouts/stack";
-
-export type IComputedDirectionTypes<T, VP = {}, HP = {}> =
-    | (T &
-    VP & {
-      /**
-               * Layout items vertically instead of horizontally
-               */
-      vertical: true
-      /**
-               * Layout items vertically instead of horizontally
-               */
-      /**
-               * Specified carousel container width.
-               */
-      width?: number
-      height: number
-    })
-    | (T &
-    HP & {
-      /**
-               * Layout items vertically instead of horizontally
-               */
-      vertical?: false
-      /**
-               * Layout items vertically instead of horizontally
-               */
-      /**
-               * Specified carousel container width.
-               */
-      width: number
-      height?: number
-    });
-
-export interface CustomConfig {
-  type?: "negative" | "positive"
-  viewCount?: number
-}
-
-export interface WithSpringAnimation {
-  type: "spring"
-  config: WithSpringConfig
-}
-
-export interface WithTimingAnimation {
-  type: "timing"
-  config: WithTimingConfig
-}
-
-export type WithAnimation = WithSpringAnimation | WithTimingAnimation;
-
-export type TCarouselProps<T = any> = {
-  ref?: React.Ref<ICarouselInstance>
-  /**
-     * The default animated value of the carousel.
-     */
-  defaultScrollOffsetValue?: SharedValue<number>
-  /**
-     * Carousel loop playback.
-     * @default true
-     */
-  loop?: boolean
-  /**
-     * Carousel items data set.
-     */
-  data: T[]
-  /**
-     * Auto fill data array to allow loop playback when the loop props is true.
-     * @default true
-     * @example
-     * [1] => [1, 1, 1]
-     * [1, 2] => [1, 2, 1, 2]
-     */
-  autoFillData?: boolean
-  /**
-     * Default index
-     * @default 0
-     */
-  defaultIndex?: number
-  /**
-     * Auto play
-     */
-  autoPlay?: boolean
-  /**
-     * Auto play
-     * @description reverse playback
-     */
-  autoPlayReverse?: boolean
-  /**
-     * Auto play
-     * @description playback interval
-     */
-  autoPlayInterval?: number
-  /**
-     * Time a scroll animation takes to finish
-     * @default 500 (ms)
-     */
-  scrollAnimationDuration?: number
-  /**
-     * Carousel container style
-     */
-  style?: StyleProp<ViewStyle>
-  /**
-     * PanGestureHandler props
-     */
-  panGestureHandlerProps?: Partial<
-  Omit<PanGestureHandlerProps, "onHandlerStateChange" | "enabled">
-  >
-  /**
-     * Determines the maximum number of items will respond to pan gesture events,
-     * windowSize={11} will active visible item plus up to 5 items above and 5 below the viewpor,
-     * Reducing this number will reduce the calculation of the animation value and may improve performance.
-     * @default 0 all items will respond to pan gesture events.
-     */
-  windowSize?: number
-  /**
-     * When true, the scroll view stops on multiples of the scroll view's size when scrolling.
-     * @default true
-     */
-  pagingEnabled?: boolean
-  /**
-     * If enabled, releasing the touch will scroll to the nearest item.
-     * valid when pagingEnabled=false
-     * @default true
-     */
-  snapEnabled?: boolean
-  /**
-     * If enabled, items will scroll to the first placement when scrolling past the edge rather than closing to the last. (previous conditions: loop=false)
-     * @default true
-     */
-  overscrollEnabled?: boolean
-  /**
-     * If false, Carousel will not respond to any gestures.
-     * @default true
-     */
-  enabled?: boolean
-  /**
-     * Specifies the scrolling animation effect.
-     */
-  withAnimation?: WithAnimation
-  /**
-     * Used to locate this view in end-to-end tests.
-     */
-  testID?: string
-  /**
-     * Custom carousel config.
-     */
-  customConfig?: () => CustomConfig
-  /**
-     * Custom animations.
-     * Must use `worklet`, Details: https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/worklets/
-     */
-  customAnimation?: (value: number) => AnimatedStyleProp<ViewStyle>
-  /**
-     * Render carousel item.
-     */
-  renderItem: CarouselRenderItem<T>
-  /**
-     * Callback fired when navigating to an item.
-     */
-  onSnapToItem?: (index: number) => void
-  /**
-     * On scroll begin
-     */
-  onScrollBegin?: () => void
-  /**
-     * On scroll end
-     */
-  onScrollEnd?: (index: number) => void
-  /**
-     * On progress change
-     * @param offsetProgress Total of offset distance (0 390 780 ...)
-     * @param absoluteProgress Convert to index (0 1 2 ...)
-     */
-  onProgressChange?: (
-    offsetProgress: number,
-    absoluteProgress: number
-  ) => void
-
-  // ============================== deprecated props ==============================
-  /**
-     * If enabled, releasing the touch will scroll to the nearest item.
-     * valid when pagingEnabled=false
-     * @deprecated please use snapEnabled instead
-     */
-  enableSnap?: boolean
-} & (TParallaxModeProps | TStackModeProps);
-
-export interface ICarouselInstance {
-  /**
-     * Scroll to previous item, it takes one optional argument (count),
-     * which allows you to specify how many items to cross
-     */
-  prev: (opts?: Omit<TCarouselActionOptions, "index">) => void
-  /**
-     * Scroll to next item, it takes one optional argument (count),
-     * which allows you to specify how many items to cross
-     */
-  next: (opts?: Omit<TCarouselActionOptions, "index">) => void
-  /**
-     * Get current item index
-     */
-  getCurrentIndex: () => number
-  /**
-     * Use value to scroll to a position where relative to the current position,
-     * scrollTo(-2) is equivalent to prev(2), scrollTo(2) is equivalent to next(2)
-     */
-  scrollTo: (opts?: TCarouselActionOptions) => void
-}
-
-export interface CarouselRenderItemInfo<ItemT> {
-  item: ItemT
-  index: number
-  animationValue: Animated.SharedValue<number>
-}
-
-export type CarouselRenderItem<ItemT> = (
-  info: CarouselRenderItemInfo<ItemT>
-) => React.ReactElement;
-
-export interface TCarouselActionOptions {
-  index?: number
-  count?: number
-  animated?: boolean
-  onFinished?: () => void
-}

package/src/utils/computedWithAutoFillData.ts

@@ -1,94 +0,0 @@
-import { DATA_LENGTH } from "../constants";
-
-const { SINGLE_ITEM, DOUBLE_ITEM } = DATA_LENGTH;
-
-function isAutoFillData(params: { autoFillData: boolean; loop: boolean }) {
-  "worklet";
-  return !!params.loop && !!params.autoFillData;
-}
-
-type BaseParams<T extends object = {}> = {
-  autoFillData: boolean
-  loop: boolean
-} & T;
-
-export function convertToSharedIndex(
-  params: BaseParams<{ index: number; rawDataLength: number }>,
-) {
-  "worklet";
-  const { loop, rawDataLength, index, autoFillData } = params;
-
-  if (isAutoFillData({ loop, autoFillData })) {
-    switch (rawDataLength) {
-      case SINGLE_ITEM:
-        return 0;
-      case DOUBLE_ITEM:
-        return index % 2;
-    }
-  }
-
-  return index;
-}
-
-export function computedOffsetXValueWithAutoFillData(
-  params: BaseParams<{
-    rawDataLength: number
-    value: number
-    size: number
-  }>,
-) {
-  "worklet";
-
-  const { rawDataLength, value, size, loop, autoFillData } = params;
-
-  if (isAutoFillData({ loop, autoFillData })) {
-    switch (rawDataLength) {
-      case SINGLE_ITEM:
-        return value % size;
-      case DOUBLE_ITEM:
-        return value % (size * 2);
-    }
-  }
-
-  return value;
-}
-
-export function computedRealIndexWithAutoFillData(
-  params: BaseParams<{
-    index: number
-    dataLength: number
-  }>,
-) {
-  const { index, dataLength, loop, autoFillData } = params;
-
-  if (isAutoFillData({ loop, autoFillData })) {
-    switch (dataLength) {
-      case SINGLE_ITEM:
-        return index % 1;
-      case DOUBLE_ITEM:
-        return index % 2;
-    }
-  }
-
-  return index;
-}
-
-export function computedFillDataWithAutoFillData<T>(
-  params: BaseParams<{
-    data: T[]
-    dataLength: number
-  }>,
-): T[] {
-  const { data, loop, autoFillData, dataLength } = params;
-
-  if (isAutoFillData({ loop, autoFillData })) {
-    switch (dataLength) {
-      case SINGLE_ITEM:
-        return [data[0], data[0], data[0]];
-      case DOUBLE_ITEM:
-        return [data[0], data[1], data[0], data[1]];
-    }
-  }
-
-  return data;
-}

package/src/utils/dealWithAnimation.ts

@@ -1,19 +0,0 @@
-import { withSpring, withTiming } from "react-native-reanimated";
-
-import type { WithAnimation } from "../types";
-
-export function dealWithAnimation(
-  withAnimation: WithAnimation,
-): (value: number, cb: (isFinished: boolean) => void) => number {
-  "worklet";
-  switch (withAnimation.type) {
-    case "spring":
-      return (value, cb) => withSpring(value, withAnimation.config, isFinished =>
-        cb(isFinished as boolean),
-      );
-    case "timing":
-      return (value, cb) => withTiming(value, withAnimation.config, isFinished =>
-        cb(isFinished as boolean),
-      );
-  }
-}