react-native-reanimated-carousel 5.0.0 → 5.1.1

package/src/components/Pagination/PaginationItem.tsx

@@ -45,12 +45,12 @@ function interpolateDotColor(
 }
 
 export function PaginationItem(props: {
-  activeDotStyle?: PaginationDotStyle;
+  activeDotStyle?: PaginationDotStyle | undefined;
   count: number;
-  dotStyle?: PaginationDotStyle;
+  dotStyle?: PaginationDotStyle | undefined;
   index: number;
-  label?: string;
-  onPress?: (index: number) => void;
+  label?: string | undefined;
+  onPress?: ((index: number) => void) | undefined;
   progress: PaginationProps["progress"];
 }) {
   const { activeDotStyle, count, dotStyle, index, label, onPress, progress } = props;
@@ -71,8 +71,12 @@ export function PaginationItem(props: {
   const activeBackgroundColor = activeDotStyle?.backgroundColor ?? DEFAULT_ACTIVE_DOT_COLOR;
   const activeOpacity = activeDotStyle?.opacity ?? baseOpacity;
 
+  // Lazy initializer: React only invokes it on the first render, which is
+  // exempt from Reanimated's "reading `value` during render" strict check.
+  // A plain expression would re-read `progress.value` on every re-render
+  // and trigger the warning (issue #940).
   const [selected, setSelected] = React.useState(
-    count === 1 || getPaginationSelectedIndex(progress.value, count) === index
+    () => count === 1 || getPaginationSelectedIndex(progress.value, count) === index
   );
 
   useAnimatedReaction(

package/src/hooks/useCarouselController.tsx

@@ -27,9 +27,9 @@ interface CarouselControllerOptions {
   rawDataLength: number;
   handlerOffset: SharedValue<number>;
   animation: CarouselAnimation;
-  defaultIndex?: number;
-  onScrollStart?: () => void;
-  onMovementEnd?: (index: number) => void;
+  defaultIndex?: number | undefined;
+  onScrollStart?: (() => void) | undefined;
+  onMovementEnd?: ((index: number) => void) | undefined;
 }
 
 export interface CarouselController {

package/src/hooks/useOffsetX.ts

@@ -8,9 +8,9 @@ export interface OffsetOptions {
   size: number;
   handlerOffset: SharedValue<number>;
   dataLength: number;
-  type?: "positive" | "negative";
-  viewCount?: number;
-  loop?: boolean;
+  type?: "positive" | "negative" | undefined;
+  viewCount?: number | undefined;
+  loop?: boolean | undefined;
 }
 
 export const useOffsetX = (opts: OffsetOptions, visibleRanges: VisibleRangesValue) => {

package/src/hooks/useOnProgressChange.ts

@@ -8,8 +8,8 @@ import { getLogicalProgress } from "../utils/carousel-math";
 export function useOnProgressChange(options: {
   loop: boolean;
   offset: SharedValue<number>;
-  onProgressChange?: CarouselProgressChangeHandler;
-  progress?: SharedValue<number>;
+  onProgressChange?: CarouselProgressChangeHandler | undefined;
+  progress?: SharedValue<number> | undefined;
   rawDataLength: number;
   size: number;
   sizeReady: SharedValue<boolean>;

package/src/hooks/usePanGestureProxy.ts

@@ -11,14 +11,14 @@ import type { GestureConfig } from "./useUpdateGestureConfig";
 import { useUpdateGestureConfig } from "./useUpdateGestureConfig";
 
 export const usePanGestureProxy = (customization: {
-  onConfigurePanGesture?: (gesture: CarouselPanGesture) => void;
+  onConfigurePanGesture?: ((gesture: CarouselPanGesture) => void) | undefined;
   onGestureStart: (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
   onGestureUpdate: (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => void;
   onGestureEnd: (
     event: GestureStateChangeEvent<PanGestureHandlerEventPayload>,
     success: boolean
   ) => void;
-  options?: GestureConfig;
+  options?: GestureConfig | undefined;
 }) => {
   const {
     onConfigurePanGesture,
@@ -42,11 +42,11 @@ export const usePanGestureProxy = (customization: {
 
     // Save the user defined gesture callbacks
     const userDefinedConflictGestures: {
-      onBegin?: Parameters<(typeof gesture)["onBegin"]>[0];
-      onStart?: Parameters<(typeof gesture)["onStart"]>[0];
-      onUpdate?: Parameters<(typeof gesture)["onUpdate"]>[0];
-      onEnd?: Parameters<(typeof gesture)["onEnd"]>[0];
-      onFinalize?: Parameters<(typeof gesture)["onFinalize"]>[0];
+      onBegin: Parameters<(typeof gesture)["onBegin"]>[0] | undefined;
+      onStart: Parameters<(typeof gesture)["onStart"]>[0] | undefined;
+      onUpdate: Parameters<(typeof gesture)["onUpdate"]>[0] | undefined;
+      onEnd: Parameters<(typeof gesture)["onEnd"]>[0] | undefined;
+      onFinalize: Parameters<(typeof gesture)["onFinalize"]>[0] | undefined;
     } = {
       onBegin: undefined,
       onStart: undefined,

package/src/hooks/useUpdateGestureConfig.ts

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 
 export interface GestureConfig {
-  enabled?: boolean;
+  enabled?: boolean | undefined;
 }
 
 type ConfigurablePanGesture = {

package/src/hooks/useVisibleRanges.tsx

@@ -27,9 +27,9 @@ function normalizeLoopIndex(currentIndex: number, total: number) {
 
 export function computeVisibleRanges(params: {
   total: number;
-  windowSize?: number;
+  windowSize?: number | undefined;
   currentIndex: number;
-  loop?: boolean;
+  loop?: boolean | undefined;
 }): VisibleRanges {
   "worklet";
 
@@ -91,9 +91,9 @@ export function computeVisibleRanges(params: {
 export function useVisibleRanges(options: {
   total: number;
   viewSize: number;
-  windowSize?: number;
+  windowSize?: number | undefined;
   translation: SharedValue<number>;
-  loop?: boolean;
+  loop?: boolean | undefined;
 }): VisibleRangesValue {
   const { total = 0, viewSize, translation, windowSize: _windowSize, loop } = options;
 

package/src/public-types.ts

@@ -5,6 +5,7 @@ import type {
   GestureType,
   GestureUpdateEvent,
   MouseButton,
+  PanGesture,
   PanGestureChangeEventPayload,
   PanGestureHandlerEventPayload,
   PanGestureHandlerProps,
@@ -148,6 +149,16 @@ export type CarouselItemAnimation = (relativeProgress: number, index: number) =>
  * methods such as `enabled`, `runOnJS`, or `manualActivation`.
  */
 export interface CarouselPanGesture {
+  /**
+   * Controlled view of the underlying RNGH pan gesture configuration.
+   *
+   * Exposes the web-only `touchAction` option (e.g. `"pan-y"` so a
+   * horizontal carousel nested in a vertically scrollable page keeps native
+   * vertical scrolling on mobile web) without casting away the facade.
+   * Ownership-changing options such as `enabled`, `runOnJS`, or
+   * `manualActivation` intentionally stay hidden.
+   */
+  readonly config: Pick<PanGesture["config"], "touchAction">;
   activeOffsetX(offset: number | [start: number, end: number]): this;
   activeOffsetY(offset: number | [start: number, end: number]): this;
   failOffsetX(offset: number | [start: number, end: number]): this;

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/carousel-math.ts

@@ -127,7 +127,7 @@ export function reconcileOffsetAfterDataChange(params: {
   nextCount: number;
   defaultIndex: number;
   loop: boolean;
-  retainedIndex?: number;
+  retainedIndex?: number | undefined;
 }): number {
   "worklet";
 

package/src/utils/computed-with-auto-fill-data.ts

@@ -82,9 +82,9 @@ export function computedFillDataWithAutoFillData<T>(
   if (isAutoFillData({ loop, autoFillData })) {
     switch (dataLength) {
       case SINGLE_ITEM:
-        return [data[0], data[0], data[0]];
+        return [data[0]!, data[0]!, data[0]!];
       case DOUBLE_ITEM:
-        return [data[0], data[1], data[0], data[1]];
+        return [data[0]!, data[1]!, data[0]!, data[1]!];
     }
   }