react-native-reanimated-carousel 3.1.0 → 3.1.2

package/src/hooks/useVisibleRanges.tsx

@@ -1,49 +1,49 @@
-import type Animated from 'react-native-reanimated';
-import { useDerivedValue } from 'react-native-reanimated';
+import type Animated from "react-native-reanimated";
+import { useDerivedValue } from "react-native-reanimated";
 
 export type IVisibleRanges = Animated.SharedValue<{
-    negativeRange: number[];
-    positiveRange: number[];
+  negativeRange: number[]
+  positiveRange: number[]
 }>;
 
 export function useVisibleRanges(options: {
-    total: number;
-    viewSize: number;
-    windowSize?: number;
-    translation: Animated.SharedValue<number>;
+  total: number
+  viewSize: number
+  windowSize?: number
+  translation: Animated.SharedValue<number>
 }): IVisibleRanges {
-    const {
-        total = 0,
-        viewSize,
-        translation,
-        windowSize: _windowSize = 0,
-    } = options;
+  const {
+    total = 0,
+    viewSize,
+    translation,
+    windowSize: _windowSize = 0,
+  } = options;
 
-    const windowSize = total <= _windowSize ? total : _windowSize;
+  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]);
+  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;
+  return ranges;
 }

package/src/index.tsx

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

package/src/layouts/BaseLayout.tsx

@@ -1,116 +1,118 @@
-import React from 'react';
-import type { ViewStyle } from 'react-native';
+import React from "react";
+import type { ViewStyle } from "react-native";
+import type { AnimatedStyleProp } from "react-native-reanimated";
 import Animated, {
-    AnimatedStyleProp,
-    runOnJS,
-    useAnimatedReaction,
-    useAnimatedStyle,
-    useDerivedValue,
-} from 'react-native-reanimated';
-import { useCheckMounted } from '../hooks/useCheckMounted';
-import { IOpts, useOffsetX } from '../hooks/useOffsetX';
-import type { IVisibleRanges } from '../hooks/useVisibleRanges';
-import { LazyView } from '../LazyView';
-import { CTX } from '../store';
-import type { ILayoutConfig } from './stack';
+  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;
+  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 mounted = useCheckMounted();
+  const { handlerOffset, index, children, visibleRanges, animationStyle }
+        = props;
 
-    const context = React.useContext(CTX);
-    const {
-        props: {
-            loop,
-            data,
-            width,
-            height,
-            vertical,
-            customConfig,
-            mode,
-            modeConfig,
-        },
-    } = context;
-    const size = vertical ? height : width;
-    const [shouldUpdate, setShouldUpdate] = React.useState(false);
-    let offsetXConfig: IOpts = {
-        handlerOffset: handlerOffset,
-        index,
-        size,
-        data,
-        loop,
-        ...(typeof customConfig === 'function' ? customConfig() : {}),
-    };
+  const context = React.useContext(CTX);
+  const {
+    props: {
+      loop,
+      data,
+      width,
+      height,
+      vertical,
+      customConfig,
+      mode,
+      modeConfig,
+    },
+  } = context;
+  const size = vertical ? height : width;
+  const [shouldUpdate, setShouldUpdate] = React.useState(false);
+  let offsetXConfig: IOpts = {
+    handlerOffset,
+    index,
+    size,
+    data,
+    loop,
+    ...(typeof customConfig === "function" ? customConfig() : {}),
+  };
 
-    if (mode === 'horizontal-stack') {
-        const { snapDirection, showLength } = modeConfig as ILayoutConfig;
+  if (mode === "horizontal-stack") {
+    const { snapDirection, showLength } = modeConfig as ILayoutConfig;
 
-        offsetXConfig = {
-            handlerOffset: handlerOffset,
-            index,
-            size,
-            data,
-            loop,
-            type: snapDirection === 'right' ? 'negative' : 'positive',
-            viewCount: showLength,
-        };
-    }
+    offsetXConfig = {
+      handlerOffset,
+      index,
+      size,
+      data,
+      loop,
+      type: snapDirection === "right" ? "negative" : "positive",
+      viewCount: showLength,
+    };
+  }
 
-    const x = useOffsetX(offsetXConfig, visibleRanges);
-    const animationValue = useDerivedValue(() => x.value / size, [x, size]);
-    const animatedStyle = useAnimatedStyle(
-        // @ts-ignore
-        () => animationStyle(x.value / size),
-        [animationStyle]
-    );
+  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])
+  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]
-    );
+    },
+    [index, mounted],
+  );
 
-    useAnimatedReaction(
-        () => visibleRanges.value,
-        () => {
-            runOnJS(updateView)(
-                visibleRanges.value.negativeRange,
-                visibleRanges.value.positiveRange
-            );
-        },
-        [visibleRanges.value]
-    );
+  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>
-    );
+  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,140 +1,142 @@
-import React from 'react';
+import React from "react";
 import Animated, {
-    Extrapolate,
-    interpolate,
-    runOnJS,
-    useAnimatedReaction,
-    useAnimatedStyle,
-} from 'react-native-reanimated';
-import type { IComputedDirectionTypes } from '../types';
-import { useOffsetX } from '../hooks/useOffsetX';
-import type { IVisibleRanges } from '../hooks/useVisibleRanges';
-import { LazyView } from '../LazyView';
-import type { ILayoutConfig } from './parallax';
+  Extrapolate,
+  interpolate,
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+} from "react-native-reanimated";
 
-export const ParallaxLayout: React.FC<
-    IComputedDirectionTypes<
-        {
-            loop?: boolean;
-            handlerOffset: Animated.SharedValue<number>;
-            index: number;
-            data: unknown[];
-            visibleRanges: IVisibleRanges;
-        } & ILayoutConfig
-    >
-> = (props) => {
-    const {
-        handlerOffset,
-        parallaxScrollingOffset = 100,
-        parallaxScrollingScale = 0.8,
-        parallaxAdjacentItemScale = Math.pow(parallaxScrollingScale, 2),
-        index,
-        width,
-        height,
-        loop,
-        data,
-        children,
-        visibleRanges,
-        vertical,
-    } = props;
+import type { ILayoutConfig } from "./parallax";
 
-    const [shouldUpdate, setShouldUpdate] = React.useState(false);
+import { useOffsetX } from "../hooks/useOffsetX";
+import type { IVisibleRanges } from "../hooks/useVisibleRanges";
+import { LazyView } from "../LazyView";
+import type { IComputedDirectionTypes } from "../types";
 
-    const size = props.vertical ? props.height : props.width;
+export const ParallaxLayout: React.FC<
+IComputedDirectionTypes<
+{
+  loop?: boolean
+  handlerOffset: Animated.SharedValue<number>
+  index: number
+  data: unknown[]
+  visibleRanges: IVisibleRanges
+} & ILayoutConfig
+>
+> = (props) => {
+  const {
+    handlerOffset,
+    parallaxScrollingOffset = 100,
+    parallaxScrollingScale = 0.8,
+    parallaxAdjacentItemScale = parallaxScrollingScale ** 2,
+    index,
+    width,
+    height,
+    loop,
+    data,
+    children,
+    visibleRanges,
+    vertical,
+  } = props;
 
-    const x = useOffsetX(
-        {
-            handlerOffset: handlerOffset,
-            index,
-            size,
-            data,
-            loop,
-        },
-        visibleRanges
-    );
+  const [shouldUpdate, setShouldUpdate] = React.useState(false);
 
-    const offsetXStyle = useAnimatedStyle(() => {
-        const value = x.value / size;
+  const size = props.vertical ? props.height : props.width;
 
-        const translate = interpolate(
-            value,
-            [-1, 0, 1],
-            [
-                -size + parallaxScrollingOffset,
-                0,
-                size - parallaxScrollingOffset,
-            ],
-            Extrapolate.EXTEND
-        );
+  const x = useOffsetX(
+    {
+      handlerOffset,
+      index,
+      size,
+      data,
+      loop,
+    },
+    visibleRanges,
+  );
 
-        const zIndex = interpolate(
-            value,
-            [-1, 0, 1],
-            [0, size, 0],
-            Extrapolate.CLAMP
-        );
+  const offsetXStyle = useAnimatedStyle(() => {
+    const value = x.value / size;
 
-        const scale = interpolate(
-            value,
-            [-1, 0, 1],
-            [
-                parallaxAdjacentItemScale,
-                parallaxScrollingScale,
-                parallaxAdjacentItemScale,
-            ],
-            Extrapolate.CLAMP
-        );
+    const translate = interpolate(
+      value,
+      [-1, 0, 1],
+      [
+        -size + parallaxScrollingOffset,
+        0,
+        size - parallaxScrollingOffset,
+      ],
+      Extrapolate.EXTEND,
+    );
 
-        return {
-            transform: [
-                vertical
-                    ? {
-                          translateY: translate,
-                      }
-                    : {
-                          translateX: translate,
-                      },
-                {
-                    scale,
-                },
-            ],
-            zIndex,
-        };
-    }, [loop, vertical, parallaxScrollingOffset]);
+    const zIndex = interpolate(
+      value,
+      [-1, 0, 1],
+      [0, size, 0],
+      Extrapolate.CLAMP,
+    );
 
-    const updateView = React.useCallback(
-        (negativeRange: number[], positiveRange: number[]) => {
-            setShouldUpdate(
-                (index >= negativeRange[0] && index <= negativeRange[1]) ||
-                    (index >= positiveRange[0] && index <= positiveRange[1])
-            );
-        },
-        [index]
+    const scale = interpolate(
+      value,
+      [-1, 0, 1],
+      [
+        parallaxAdjacentItemScale,
+        parallaxScrollingScale,
+        parallaxAdjacentItemScale,
+      ],
+      Extrapolate.CLAMP,
     );
 
-    useAnimatedReaction(
-        () => visibleRanges.value,
-        () => {
-            runOnJS(updateView)(
-                visibleRanges.value.negativeRange,
-                visibleRanges.value.positiveRange
-            );
+    return {
+      transform: [
+        vertical
+          ? {
+            translateY: translate,
+          }
+          : {
+            translateX: translate,
+          },
+        {
+          scale,
         },
-        [visibleRanges.value]
-    );
+      ],
+      zIndex,
+    };
+  }, [loop, vertical, parallaxScrollingOffset]);
 
-    return (
-        <Animated.View
-            style={[
-                {
-                    width: width || '100%',
-                    height: height || '100%',
-                    position: 'absolute',
-                },
-                offsetXStyle,
-            ]}
-        >
-            <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>
-        </Animated.View>
-    );
+  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 +1,12 @@
-import { normalLayout } from './normal';
-import { parallaxLayout } from './parallax';
-import { horizontalStackLayout, verticalStackLayout } from './stack';
+import { normalLayout } from "./normal";
+import { parallaxLayout } from "./parallax";
+import { horizontalStackLayout, verticalStackLayout } from "./stack";
 
-export type TMode = 'parallax' | 'horizontal-stack' | 'vertical-stack';
+export type TMode = "parallax" | "horizontal-stack" | "vertical-stack";
 
 export const Layouts = {
-    normal: normalLayout,
-    parallax: parallaxLayout,
-    horizontalStack: horizontalStackLayout,
-    verticalStack: verticalStackLayout,
+  normal: normalLayout,
+  parallax: parallaxLayout,
+  horizontalStack: horizontalStackLayout,
+  verticalStack: verticalStackLayout,
 };

package/src/layouts/normal.ts

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