react-native-reanimated-carousel 5.1.0 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-reanimated-carousel",
-	"version": "5.1.0",
+	"version": "5.2.0",
 	"packageManager": "yarn@4.0.2",
 	"description": "A performant, customizable carousel for React Native powered by Reanimated.",
 	"author": "Doho <zhaodonghao586@outlook.com> (https://github.com/dohooo)",
@@ -54,8 +54,9 @@
 		"test:watch": "jest --watch",
 		"test:coverage": "jest --coverage",
 		"test:ci": "jest --coverage --ci --runInBand --reporters=default --reporters=jest-junit",
-		"types": "tsc --noEmit && yarn types:public",
+		"types": "tsc --noEmit && yarn types:public && yarn types:non-strict",
 		"types:public": "tsc -p tsconfig.type-tests.json",
+		"types:non-strict": "tsc -p tsconfig.non-strict.json",
 		"lint": "biome check .",
 		"lint:fix": "biome check --write .",
 		"format": "biome format .",

package/src/components/CarouselLayout.tsx

@@ -8,6 +8,7 @@ import { useLayoutConfig } from "../hooks/useLayoutConfig";
 import { useOnProgressChange } from "../hooks/useOnProgressChange";
 import { useGlobalState } from "../store";
 import type { CarouselRef } from "../types";
+import { webOnlyDependencies } from "../utils/web-only-dependencies";
 import { ItemRenderer } from "./ItemRenderer";
 import { ScrollViewGesture } from "./ScrollViewGesture";
 
@@ -66,11 +67,13 @@ export const CarouselLayout = React.forwardRef<CarouselRef>((_props, ref) => {
   const { size, handlerOffset, resolvedSize, sizePhase, sizeExplicit } = common;
   const layoutConfig = useLayoutConfig({ ...props, size });
 
+  const isSizeReadyDependencies = webOnlyDependencies([resolvedSize, sizePhase]);
   const isSizeReady = useDerivedValue(() => {
     const currentSize = resolvedSize.value ?? 0;
     return sizePhase.value === "ready" && currentSize > 0;
-  }, [resolvedSize, sizePhase]);
+  }, isSizeReadyDependencies);
 
+  const offsetXDependencies = webOnlyDependencies([loop, dataLength, handlerOffset, resolvedSize]);
   const offsetX = useDerivedValue(() => {
     const currentSize = resolvedSize.value ?? 0;
     if (currentSize <= 0) return 0;
@@ -83,7 +86,7 @@ export const CarouselLayout = React.forwardRef<CarouselRef>((_props, ref) => {
 
     const x = value % totalSize;
     return Number.isNaN(x) ? 0 : x;
-  }, [loop, dataLength, handlerOffset, resolvedSize]);
+  }, offsetXDependencies);
 
   useOnProgressChange({
     loop,
@@ -135,7 +138,7 @@ export const CarouselLayout = React.forwardRef<CarouselRef>((_props, ref) => {
       if (state.ready) scheduleOnRN(triggerAutoPlay);
       else scheduleOnRN(pauseAutoPlay);
     },
-    [autoplay]
+    webOnlyDependencies([autoplay])
   );
 
   const scrollViewGestureOnScrollStart = React.useCallback(() => {
@@ -158,6 +161,14 @@ export const CarouselLayout = React.forwardRef<CarouselRef>((_props, ref) => {
     StyleSheet.flatten(contentContainerStyle as StyleProp<ViewStyle>) || {};
   const flattenedStyle = StyleSheet.flatten(style) || {};
 
+  const layoutStyleDependencies = webOnlyDependencies([
+    flattenedStyle,
+    isSizeReady,
+    isVertical,
+    resolvedSize,
+    sizePhase,
+    sizeExplicit,
+  ]);
   const layoutStyle = useAnimatedStyle(() => {
     const measuredSize = resolvedSize.value ?? 0;
     const { width, height } = resolveCarouselLayoutStyle({
@@ -172,7 +183,7 @@ export const CarouselLayout = React.forwardRef<CarouselRef>((_props, ref) => {
       height,
       opacity: isSizeReady.value ? 1 : 0,
     };
-  }, [flattenedStyle, isSizeReady, isVertical, resolvedSize, sizePhase, sizeExplicit]);
+  }, layoutStyleDependencies);
 
   return (
     <View testID={testID} style={[styles.layoutContainer, style]} onLayout={props.onLayout}>

package/src/components/ItemLayout.tsx

@@ -18,6 +18,7 @@ import type { CarouselItemAnimation } from "../types";
 import { getHorizontalStackOffsetType } from "../utils/carousel-direction";
 import { positiveModulo } from "../utils/carousel-math";
 import { sanitizeAnimationStyle } from "../utils/sanitize-animation-style";
+import { webOnlyDependencies } from "../utils/web-only-dependencies";
 
 export type ItemAnimationStyle = CarouselItemAnimation;
 
@@ -67,6 +68,13 @@ export const ItemLayout: React.FC<{
   const size = (itemSize ?? fallbackSize) || 0;
   const effectivePageSize = size > 0 ? size : undefined;
 
+  const dimensionsStyleDependencies = webOnlyDependencies([
+    effectivePageSize,
+    isVertical,
+    itemSize,
+    styleHeightNumber,
+    styleWidthNumber,
+  ]);
   const dimensionsStyle = useAnimatedStyle<ViewStyle>(() => {
     const widthCandidate = isVertical ? styleWidthNumber : itemSize;
     const heightCandidate = isVertical ? itemSize : styleHeightNumber;
@@ -95,7 +103,7 @@ export const ItemLayout: React.FC<{
       width: computedWidth,
       height: computedHeight,
     };
-  }, [effectivePageSize, isVertical, itemSize, styleHeightNumber, styleWidthNumber]);
+  }, dimensionsStyleDependencies);
 
   let offsetXConfig: OffsetOptions = {
     handlerOffset,
@@ -137,17 +145,19 @@ export const ItemLayout: React.FC<{
         scheduleOnRN(setIsAccessibilityCurrent, isCurrent);
       }
     },
-    [isCurrentForAccessibility]
+    webOnlyDependencies([isCurrentForAccessibility])
   );
 
+  const relativeProgressDependencies = webOnlyDependencies([x, size]);
   const relativeProgress = useDerivedValue(() => {
     if (!size) return 0;
     return x.value / size;
-  }, [x, size]);
+  }, relativeProgressDependencies);
+  const animatedStyleDependencies = webOnlyDependencies([animationStyle, rawIndex, x, size]);
   const animatedStyle = useAnimatedStyle<ViewStyle>(() => {
     const safeSize = size || 1;
     return sanitizeAnimationStyle(animationStyle(x.value / safeSize, rawIndex));
-  }, [animationStyle, rawIndex, x, size]);
+  }, animatedStyleDependencies);
 
   // TODO: For dynamic dimension in the future
   // function handleLayout(e: LayoutChangeEvent) {

package/src/components/ItemRenderer.tsx

@@ -8,9 +8,14 @@ import type { ItemAnimationStyle } from "./ItemLayout";
 import { ItemLayout } from "./ItemLayout";
 
 import type { VisibleRanges } from "../hooks/useVisibleRanges";
-import { computeVisibleRanges, useVisibleRanges } from "../hooks/useVisibleRanges";
+import {
+  computeVisibleRanges,
+  normalizeWindowSize,
+  useVisibleRanges,
+} from "../hooks/useVisibleRanges";
 import type { CarouselItemAnimation, CarouselRenderItem } from "../types";
 import { computedRealIndexWithAutoFillData } from "../utils/computed-with-auto-fill-data";
+import { webOnlyDependencies } from "../utils/web-only-dependencies";
 
 interface Props {
   data: unknown[];
@@ -71,12 +76,34 @@ export const ItemRenderer: FC<Props> = (props) => {
 
   const [displayedItems, setDisplayedItems] = React.useState<VisibleRanges>(initialRanges);
 
+  // When the window covers every item, the ranges always span the whole list. Skip them so a
+  // stale range from before a data change cannot unmount keyed items for one render.
+  const rendersAllItems = normalizeWindowSize(dataLength, renderWindowSize) >= dataLength;
+
   useAnimatedReaction(
     () => visibleRanges.value,
     (ranges) => scheduleOnRN(setDisplayedItems, ranges),
-    [visibleRanges]
+    webOnlyDependencies([visibleRanges])
   );
 
+  // With a render window, the ranges still describe the previous data for the renders between a
+  // data change and the next range update. Keep the keyed items mounted with the last up-to-date
+  // ranges until then, so an item that shifted index is not unmounted and mounted again.
+  const lastSettledRender = React.useRef<{
+    data: unknown[];
+    ranges: VisibleRanges;
+    keys: ReadonlySet<string>;
+  } | null>(null);
+  const settled = lastSettledRender.current;
+  const rangesAreStale =
+    !!keyExtractor && !!settled && settled.ranges === displayedItems && settled.data !== data;
+  const renderedKeys = new Set<string>();
+
+  React.useEffect(() => {
+    if (rangesAreStale) return;
+    lastSettledRender.current = { data, ranges: displayedItems, keys: renderedKeys };
+  });
+
   return (
     <>
       {data.map((item, index) => {
@@ -89,11 +116,12 @@ export const ItemRenderer: FC<Props> = (props) => {
 
         const { negativeRange, positiveRange } = displayedItems;
 
-        const shouldRender =
+        const isInRange =
+          rendersAllItems ||
           (index >= negativeRange[0] && index <= negativeRange[1]) ||
           (index >= positiveRange[0] && index <= positiveRange[1]);
 
-        if (!shouldRender) return null;
+        if (!isInRange && !rangesAreStale) return null;
 
         const rawItem = rawData[realIndex] ?? item;
         const key = keyExtractor
@@ -102,6 +130,10 @@ export const ItemRenderer: FC<Props> = (props) => {
             )}`
           : String(index);
 
+        if (!isInRange && !settled?.keys.has(key)) return null;
+
+        renderedKeys.add(key);
+
         return (
           <ItemLayout
             key={key}

package/src/components/Pagination/PaginationItem.tsx

@@ -12,6 +12,7 @@ import { scheduleOnRN } from "react-native-worklets";
 
 import type { PaginationDotStyle, PaginationProps } from "../../public-types";
 import { getNearestLoopPosition, getSettledRawIndex } from "../../utils/carousel-math";
+import { webOnlyDependencies } from "../../utils/web-only-dependencies";
 
 const DEFAULT_DOT_SIZE = 10;
 const DEFAULT_DOT_COLOR = "#D1D5DB";
@@ -86,9 +87,28 @@ export function PaginationItem(props: {
         scheduleOnRN(setSelected, nextSelected);
       }
     },
-    [count, index, progress]
+    webOnlyDependencies([count, index, progress])
   );
 
+  const animatedStyleDependencies = webOnlyDependencies([
+    activeBackgroundColor,
+    activeBorderColor,
+    activeBorderRadius,
+    activeBorderWidth,
+    activeHeight,
+    activeOpacity,
+    activeWidth,
+    baseBackgroundColor,
+    baseBorderColor,
+    baseBorderRadius,
+    baseBorderWidth,
+    baseHeight,
+    baseOpacity,
+    baseWidth,
+    count,
+    index,
+    progress,
+  ]);
   const animatedStyle = useAnimatedStyle<ViewStyle>(() => {
     const distance = Math.min(1, getPaginationDotDistance(progress.value, index, count));
 
@@ -111,25 +131,7 @@ export function PaginationItem(props: {
       backgroundColor: interpolateDotColor(distance, activeBackgroundColor, baseBackgroundColor),
       opacity: interpolate(distance, [0, 1], [activeOpacity, baseOpacity], Extrapolation.CLAMP),
     };
-  }, [
-    activeBackgroundColor,
-    activeBorderColor,
-    activeBorderRadius,
-    activeBorderWidth,
-    activeHeight,
-    activeOpacity,
-    activeWidth,
-    baseBackgroundColor,
-    baseBorderColor,
-    baseBorderRadius,
-    baseBorderWidth,
-    baseHeight,
-    baseOpacity,
-    baseWidth,
-    count,
-    index,
-    progress,
-  ]);
+  }, animatedStyleDependencies);
 
   const reservedStyle: ViewStyle = {
     alignItems: "center",

package/src/components/ScrollViewGesture.tsx

@@ -21,6 +21,7 @@ import { useGlobalState } from "../store";
 import { toLogicalGestureValue } from "../utils/carousel-direction";
 import { computeGestureTranslation } from "../utils/compute-gesture-translation";
 import { dealWithAnimation } from "../utils/deal-with-animation";
+import { webOnlyDependencies } from "../utils/web-only-dependencies";
 
 interface Props {
   size: number;
@@ -40,6 +41,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       onConfigurePanGesture,
       orientation,
       snapMode,
+      snapMomentum,
       loop,
       animation,
       scrollEnabled,
@@ -63,7 +65,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
   const isVertical = orientation === "vertical";
 
   const maxPage = dataLength;
-  const isHorizontal = useDerivedValue(() => !isVertical, [isVertical]);
+  const isHorizontal = useDerivedValue(() => !isVertical, webOnlyDependencies([isVertical]));
   const max = useSharedValue(0);
   const panOffset = useSharedValue<number | undefined>(undefined); // set to undefined when not actively in a pan gesture
   const touching = useSharedValue(false);
@@ -71,10 +73,11 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
   const hasStartedMovement = useSharedValue(false);
   const scrollEndTranslation = useSharedValue(0);
   const scrollEndVelocity = useSharedValue(0);
+  const sizeReadyDependencies = webOnlyDependencies([resolvedSize, sizePhase]);
   const sizeReady = useDerivedValue(() => {
     const currentSize = resolvedSize.value ?? 0;
     return sizePhase.value === "ready" && currentSize > 0;
-  }, [resolvedSize, sizePhase]);
+  }, sizeReadyDependencies);
 
   // Get the limit of the scroll.
   const getLimit = React.useCallback(() => {
@@ -169,7 +172,11 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       }
 
       if (snapMode === "nearest") {
-        finalTranslation = withSpring(withProcessTranslation(-nextPage * currentSize), onFinished);
+        const nearestPage = -Math.round((origin + velocity * snapMomentum) / currentSize);
+        finalTranslation = withSpring(
+          withProcessTranslation(-nearestPage * currentSize),
+          onFinished
+        );
       }
 
       translation.value = finalTranslation;
@@ -183,7 +190,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
         return translation;
       }
     },
-    [withSpring, resolvedSize, maxPage, loop, snapMode, translation]
+    [withSpring, resolvedSize, maxPage, loop, snapMode, snapMomentum, translation]
   );
 
   const onFinish = React.useCallback(
@@ -238,7 +245,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     () => {
       if (snapMode !== "page") resetBoundary();
     },
-    [resetBoundary, snapMode]
+    webOnlyDependencies([resetBoundary, snapMode])
   );
 
   const onGestureStart = useCallback(

package/src/hooks/useCarouselController.tsx

@@ -18,6 +18,7 @@ import {
   positiveModulo,
 } from "../utils/carousel-math";
 import { dealWithAnimation } from "../utils/deal-with-animation";
+import { webOnlyDependencies } from "../utils/web-only-dependencies";
 
 interface CarouselControllerOptions {
   ref: React.ForwardedRef<CarouselRef>;
@@ -71,7 +72,7 @@ export function useCarouselController(options: CarouselControllerOptions): Carou
   const liveRawIndex = useRef(rawDataLength > 0 ? defaultIndex : 0);
   const settledIndex = useRef(rawDataLength > 0 ? defaultIndex : 0);
   const warnedCommands = useRef(new Set<string>());
-  const canMove = rawDataLength > 1;
+  const canMove = rawDataLength > 1 || (loop && rawDataLength === 1 && dataLength > 1);
 
   const warnOnce = React.useCallback((key: string, message: string) => {
     if (!__DEV__ || warnedCommands.current.has(key)) return;
@@ -106,7 +107,7 @@ export function useCarouselController(options: CarouselControllerOptions): Carou
       index.value = physicalIndex;
       scheduleOnRN(setLiveRawIndex, rawIndex);
     },
-    [dataLength, handlerOffset, index, rawDataLength, size]
+    webOnlyDependencies([dataLength, handlerOffset, index, rawDataLength, size])
   );
 
   const settle = React.useCallback(

package/src/hooks/useCommonVariables.ts

@@ -12,6 +12,7 @@ import {
   reconcileOffsetAfterDataChange,
 } from "../utils/carousel-math";
 import { computeOffsetIfSizeChanged } from "../utils/compute-offset-if-size-changed";
+import { webOnlyDependencies } from "../utils/web-only-dependencies";
 
 export type CarouselSizePhase = "pending" | "ready" | "updating";
 
@@ -97,7 +98,7 @@ export function useCommonVariables(
         scheduleOnRN(syncSize, current);
       }
     },
-    [syncSize]
+    webOnlyDependencies([syncSize])
   );
 
   React.useEffect(() => {
@@ -242,7 +243,7 @@ export function useCommonVariables(
       prevSize.value = currentSize;
       sizePhase.value = "ready";
     },
-    [dataLength, defaultIndex, hasInitializedOffset, resolvedSize, sizePhase]
+    webOnlyDependencies([dataLength, defaultIndex, hasInitializedOffset, resolvedSize, sizePhase])
   );
 
   return {

package/src/hooks/useInitProps.ts

@@ -20,6 +20,7 @@ export type InitializedCarouselProps<Item> = Omit<
   | "overscrollEnabled"
   | "scrollEnabled"
   | "snapMode"
+  | "snapMomentum"
   | "style"
 > & {
   autoplay: boolean;
@@ -32,6 +33,7 @@ export type InitializedCarouselProps<Item> = Omit<
   overscrollEnabled: boolean;
   scrollEnabled: boolean;
   snapMode: CarouselSnapMode;
+  snapMomentum: number;
   style: NonNullable<CarouselProps<Item>["style"]>;
   animation: CarouselAnimation;
   rawData: Item[];
@@ -57,6 +59,7 @@ export function useInitProps<Item>(props: CarouselProps<Item>): InitializedCarou
   });
   const scrollEnabled = props.scrollEnabled ?? true;
   const snapMode = props.snapMode ?? "page";
+  const snapMomentum = props.snapMomentum ?? 2;
   const overscrollEnabled = props.overscrollEnabled ?? true;
   const style = props.style ?? {};
   const animation: CarouselAnimation = props.animation ?? {
@@ -123,6 +126,7 @@ export function useInitProps<Item>(props: CarouselProps<Item>): InitializedCarou
     overscrollEnabled,
     scrollEnabled,
     snapMode,
+    snapMomentum,
     style,
     animation,
     data,
@@ -154,6 +158,15 @@ function validateStaticProps<Item>(props: CarouselProps<Item>) {
     );
   }
 
+  if (
+    props.snapMomentum !== undefined &&
+    (!Number.isFinite(props.snapMomentum) || props.snapMomentum < 0)
+  ) {
+    throw new Error(
+      "[react-native-reanimated-carousel] snapMomentum must be a non-negative number."
+    );
+  }
+
   if (
     props.renderWindowSize !== undefined &&
     (!Number.isInteger(props.renderWindowSize) || props.renderWindowSize <= 0)

package/src/hooks/useOffsetX.ts

@@ -1,6 +1,7 @@
 import type { SharedValue } from "react-native-reanimated";
 import { Extrapolation, interpolate, useDerivedValue } from "react-native-reanimated";
 
+import { webOnlyDependencies } from "../utils/web-only-dependencies";
 import type { VisibleRangesValue } from "./useVisibleRanges";
 
 export interface OffsetOptions {
@@ -38,6 +39,15 @@ export const useOffsetX = (opts: OffsetOptions, visibleRanges: VisibleRangesValu
   const MAX = positiveCount * size;
   const MIN = -((VALID_LENGTH - positiveCount) * size);
 
+  const xDependencies = webOnlyDependencies([
+    loop,
+    dataLength,
+    viewCount,
+    type,
+    size,
+    visibleRanges,
+    handlerOffset,
+  ]);
   const x = useDerivedValue(() => {
     if (!size) return 0;
 
@@ -75,7 +85,7 @@ export const useOffsetX = (opts: OffsetOptions, visibleRanges: VisibleRangesValu
     }
 
     return Number.MAX_SAFE_INTEGER;
-  }, [loop, dataLength, viewCount, type, size, visibleRanges, handlerOffset]);
+  }, xDependencies);
 
   return x;
 };

package/src/hooks/useOnProgressChange.ts

@@ -4,6 +4,7 @@ import { scheduleOnRN } from "react-native-worklets";
 
 import type { CarouselProgressChangeHandler } from "../types";
 import { getLogicalProgress } from "../utils/carousel-math";
+import { webOnlyDependencies } from "../utils/web-only-dependencies";
 
 export function useOnProgressChange(options: {
   loop: boolean;
@@ -28,6 +29,6 @@ export function useOnProgressChange(options: {
       if (progress) progress.value = nextProgress;
       if (onProgressChange) scheduleOnRN(onProgressChange, nextProgress);
     },
-    [loop, offset, onProgressChange, progress, rawDataLength, size, sizeReady]
+    webOnlyDependencies([loop, offset, onProgressChange, progress, rawDataLength, size, sizeReady])
   );
 }

package/src/hooks/useVisibleRanges.tsx

@@ -2,6 +2,8 @@ import { useRef } from "react";
 import type { SharedValue } from "react-native-reanimated";
 import { useDerivedValue } from "react-native-reanimated";
 
+import { webOnlyDependencies } from "../utils/web-only-dependencies";
+
 type Range = [number, number];
 
 export interface VisibleRanges {
@@ -11,7 +13,7 @@ export interface VisibleRanges {
 
 export type VisibleRangesValue = SharedValue<VisibleRanges>;
 
-function normalizeWindowSize(total: number, windowSize?: number) {
+export function normalizeWindowSize(total: number, windowSize?: number) {
   "worklet";
 
   return typeof windowSize === "number" && Number.isFinite(windowSize) && windowSize > 0
@@ -100,6 +102,7 @@ export function useVisibleRanges(options: {
   const windowSize = normalizeWindowSize(total, _windowSize);
   const cachedRanges = useRef<VisibleRanges | null>(null);
 
+  const rangesDependencies = webOnlyDependencies([loop, total, windowSize, translation, viewSize]);
   const ranges = useDerivedValue(() => {
     if (total <= 0) {
       return computeVisibleRanges({ total, currentIndex: 0, windowSize, loop });
@@ -128,7 +131,7 @@ export function useVisibleRanges(options: {
 
     cachedRanges.current = newRanges;
     return newRanges;
-  }, [loop, total, windowSize, translation, viewSize]);
+  }, rangesDependencies);
 
   return ranges;
 }

package/src/layouts/normal.ts

@@ -1,3 +1,4 @@
+import type { ViewStyle } from "react-native";
 import { interpolate } from "react-native-reanimated";
 
 import type { CarouselDirectionSign } from "../utils/carousel-direction";
@@ -10,7 +11,7 @@ export function normalLayout(opts: {
 }) {
   const { size, isVertical, directionSign } = opts;
 
-  return (value: number) => {
+  return (value: number): ViewStyle => {
     "worklet";
     const logicalTranslate = interpolate(value, [-1, 0, 1], [-size, 0, size]);
     const translate = isVertical

package/src/layouts/parallax.ts

@@ -1,3 +1,4 @@
+import type { ViewStyle } from "react-native";
 import { Extrapolation, interpolate } from "react-native-reanimated";
 
 import type { CarouselLayout } from "../types";
@@ -17,7 +18,7 @@ export function parallaxLayout(
   const { size, isVertical, directionSign } = baseConfig;
   const { offset = 100, scale = 0.8, adjacentScale = scale ** 2 } = config;
 
-  return (relativeProgress: number) => {
+  return (relativeProgress: number): ViewStyle => {
     "worklet";
     const logicalTranslate = interpolate(
       relativeProgress,

package/src/public-types.ts

@@ -76,6 +76,7 @@ export type CarouselProps<Item> = {
   itemSize?: number;
   scrollEnabled?: boolean;
   snapMode?: CarouselSnapMode;
+  snapMomentum?: number;
   overscrollEnabled?: boolean;
   renderWindowSize?: number;
   animation?: CarouselAnimation;

package/src/store/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { SharedValue, useSharedValue } from "react-native-reanimated";
+import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import type { CarouselCommonVariables } from "../hooks/useCommonVariables";
 import type { InitializedCarouselProps } from "../hooks/useInitProps";
 

package/src/utils/web-only-dependencies.ts

@@ -0,0 +1,10 @@
+import { Platform } from "react-native";
+
+/**
+ * Reanimated only reads hook dependency arrays in its Web implementation when the
+ * worklets Babel plugin is not used. Native derives them from the worklet closure
+ * and, since Reanimated 4.6, warns on every render when an array is passed.
+ */
+export function webOnlyDependencies<T extends unknown[]>(dependencies: T): T | undefined {
+  return Platform.OS === "web" ? dependencies : undefined;
+}