react-native-gesture-image-viewer 2.0.0-beta.2 → 2.0.0-beta.4

package/lib/typescript/src/useGestureViewerState.d.ts

@@ -0,0 +1,35 @@
+import type { GestureViewerState } from './types';
+/**
+ * Hook to access the current state of the gesture viewer.
+ *
+ * @param id - Viewer instance identifier (default: 'default')
+ * @returns Current state of the viewer
+ *
+ * **Available state:**
+ * - `currentIndex: number` - Current active index (read-only)
+ * - `totalCount: number` - Total number of items (read-only)
+ *
+ * @example
+ * ```tsx
+ * const { currentIndex, totalCount } = useGestureViewerState();
+ *
+ * // Display current position
+ * return (
+ *   <Text>
+ *     {currentIndex + 1} / {totalCount}
+ *   </Text>
+ * );
+ *
+ * // React to index changes
+ * useEffect(() => {
+ *   console.log(`Moved to image ${currentIndex + 1}`);
+ *   trackPageView(currentIndex);
+ * }, [currentIndex]);
+ *
+ * // Check navigation availability
+ * const canGoNext = currentIndex < totalCount - 1;
+ * const canGoPrevious = currentIndex > 0;
+ * ```
+ */
+export declare const useGestureViewerState: (id?: string) => GestureViewerState;
+//# sourceMappingURL=useGestureViewerState.d.ts.map

package/lib/typescript/src/useGestureViewerState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGestureViewerState.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewerState.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,qBAAqB,GAAI,WAAc,KAAG,kBAgDtD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-image-viewer",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "description": "🖼️ A highly customizable and easy-to-use React Native image viewer with gesture support and external controls",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/GestureViewer.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { type FlatList, Platform, type ScrollViewProps, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { Platform, type ScrollView, type ScrollViewProps, StyleSheet, useWindowDimensions, View } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 import { registry } from './GestureViewerRegistry';
@@ -8,7 +8,7 @@ import { useGestureViewer } from './useGestureViewer';
 import { createLoopData, isFlashListLike, isFlatListLike, isScrollViewLike } from './utils';
 import WebPagingFixStyle from './WebPagingFixStyle';
 
-export function GestureViewer<T = any, LC = typeof FlatList>({
+export function GestureViewer<T = any, LC = typeof ScrollView>({
   id = 'default',
   data,
   renderItem: renderItemProp,
@@ -20,7 +20,7 @@ export function GestureViewer<T = any, LC = typeof FlatList>({
   containerStyle,
   initialIndex = 0,
   itemSpacing = 0,
-  useSnap = false,
+  enableSnapMode = false,
   enableLoop = false,
   ...props
 }: GestureViewerProps<T, LC>) {
@@ -31,7 +31,7 @@ export function GestureViewer<T = any, LC = typeof FlatList>({
 
   const { width: screenWidth } = useWindowDimensions();
 
-  const width = useSnap ? customWidth || screenWidth : screenWidth;
+  const width = enableSnapMode ? customWidth || screenWidth : screenWidth;
 
   const loopData = useMemo(() => createLoopData(dataRef, enableLoop), [enableLoop]);
 
@@ -53,7 +53,7 @@ export function GestureViewer<T = any, LC = typeof FlatList>({
     width,
     initialIndex,
     itemSpacing,
-    useSnap,
+    enableSnapMode,
     enableLoop,
     ...props,
   });
@@ -118,7 +118,7 @@ export function GestureViewer<T = any, LC = typeof FlatList>({
         showsHorizontalScrollIndicator: false,
         onMomentumScrollEnd: onMomentumScrollEnd,
         onScrollBeginDrag,
-        ...(useSnap
+        ...(enableSnapMode
           ? {
               snapToInterval: width + itemSpacing,
               snapToAlignment: 'center',
@@ -130,7 +130,7 @@ export function GestureViewer<T = any, LC = typeof FlatList>({
         scrollEventThrottle: 16,
         removeClippedSubviews: true,
       }) satisfies ScrollViewProps,
-    [width, itemSpacing, isZoomed, isRotated, onMomentumScrollEnd, onScrollBeginDrag, useSnap],
+    [width, itemSpacing, isZoomed, isRotated, onMomentumScrollEnd, onScrollBeginDrag, enableSnapMode],
   );
 
   const listComponent = (

package/src/GestureViewerManager.ts

@@ -1,9 +1,9 @@
 import { type SharedValue, withTiming } from 'react-native-reanimated';
 import type {
-  GestureViewerControllerState,
   GestureViewerEventCallback,
   GestureViewerEventData,
   GestureViewerEventType,
+  GestureViewerState,
 } from './types';
 import { createBoundsConstraint, createScrollAction } from './utils';
 
@@ -13,7 +13,7 @@ class GestureViewerManager {
   private width = 0;
   private height = 0;
   private maxZoomScale = 2;
-  private enableSwipeGesture = true;
+  private enableHorizontalSwipe = true;
   private enableLoop = false;
   private listRef: any | null = null;
 
@@ -24,7 +24,7 @@ class GestureViewerManager {
 
   private loopCallback: (() => void) | null = null;
 
-  private listeners = new Set<(state: GestureViewerControllerState) => void>();
+  private listeners = new Set<(state: GestureViewerState) => void>();
   private eventListeners = new Map<GestureViewerEventType, Set<(data: any) => void>>();
 
   private notifyListeners() {
@@ -33,7 +33,7 @@ class GestureViewerManager {
     this.listeners.forEach((listener) => listener(state));
   }
 
-  subscribe(listener: (state: GestureViewerControllerState) => void) {
+  subscribe(listener: (state: GestureViewerState) => void) {
     this.listeners.add(listener);
 
     return () => {
@@ -77,7 +77,7 @@ class GestureViewerManager {
     this.emitEvent('rotationChange', { rotation, previousRotation });
   };
 
-  getState() {
+  getState(): GestureViewerState {
     return {
       currentIndex: this.currentIndex,
       totalCount: this.dataLength,
@@ -104,8 +104,8 @@ class GestureViewerManager {
     this.dataLength = length;
   }
 
-  setEnableSwipeGesture(enabled: boolean) {
-    this.enableSwipeGesture = enabled;
+  setEnableHorizontalSwipe(enabled: boolean) {
+    this.enableHorizontalSwipe = enabled;
   }
 
   setCurrentIndex(index: number) {
@@ -224,7 +224,7 @@ class GestureViewerManager {
   };
 
   goToIndex = (index: number) => {
-    if (!this.enableSwipeGesture || !this.listRef) {
+    if (!this.enableHorizontalSwipe || !this.listRef) {
       return;
     }
 
@@ -299,7 +299,7 @@ class GestureViewerManager {
     this.loopCallback = null;
     this.listeners.clear();
     this.listRef = null;
-    this.enableSwipeGesture = true;
+    this.enableHorizontalSwipe = true;
     this.currentIndex = 0;
     this.dataLength = 0;
     this.maxZoomScale = 2;

package/src/index.tsx

@@ -1,11 +1,12 @@
 export { GestureViewer } from './GestureViewer';
 export type {
   GestureViewerController,
-  GestureViewerControllerState,
   GestureViewerEventCallback,
   GestureViewerEventData,
   GestureViewerEventType,
   GestureViewerProps,
+  GestureViewerState,
 } from './types';
 export { useGestureViewerController } from './useGestureViewerController';
 export { useGestureViewerEvent } from './useGestureViewerEvent';
+export { useGestureViewerState } from './useGestureViewerState';

package/src/types.ts

@@ -13,7 +13,7 @@ type ConditionalListProps<LC> = LC extends FlatListComponent
     ? React.ComponentProps<LC>
     : GetComponentProps<LC>;
 
-export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
+export interface GestureViewerProps<T = any, LC = typeof RNScrollView> {
   /**
    * When you want to efficiently manage multiple `GestureViewer` instances, you can use the `id` prop to use multiple `GestureViewer` components.
    * @remark `GestureViewer` automatically removes instances from memory when components are unmounted, so no manual memory management is required.
@@ -29,10 +29,6 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
    * @defaultValue 0
    */
   initialIndex?: number;
-  /**
-   * A callback function that is called when the index of the item changes.
-   */
-  onIndexChange?: (index: number) => void;
   /**
    * A callback function that is called when the `GestureViewer` is dismissed.
    */
@@ -55,44 +51,6 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
    * @defaultValue screen width
    */
   width?: number;
-  /**
-   * Enables snap scrolling mode.
-   *
-   * @remark
-   * **`false` (default)**: Paging mode (`pagingEnabled: true`)
-   * - Scrolls by full screen size increments
-   *
-   * **`true`**: Snap mode (`snapToInterval` auto-calculated)
-   * - `snapToInterval` is automatically calculated based on `width` and `itemSpacing` values
-   * - Use this option when you need item spacing
-   * @defaultValue false
-   *
-   */
-  useSnap?: boolean;
-  /**
-   * `dismissThreshold` controls when `onDismiss` is called by applying a threshold value during vertical gestures.
-   * @defaultValue 80
-   */
-  dismissThreshold?: number;
-  // swipeThreshold?: number;
-  // velocityThreshold?: number;
-  /**
-   * Calls `onDismiss` function when swiping down.
-   * @remark Useful for closing modals with downward swipe gestures.
-   * @defaultValue true
-   */
-  enableDismissGesture?: boolean;
-  /**
-   * Controls left/right swipe gestures.
-   * @remark When `false`, horizontal gestures are disabled.
-   * @defaultValue true
-   */
-  enableSwipeGesture?: boolean;
-  /**
-   * `resistance` controls the range of vertical movement by applying resistance during vertical gestures.
-   * @defaultValue 2
-   */
-  resistance?: number;
   /**
    * The props to pass to the list component.
    * @remark The `listProps` provides **type inference based on the selected list component**, ensuring accurate autocompletion and type safety in your IDE.
@@ -107,45 +65,86 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
    */
   containerStyle?: StyleProp<ViewStyle>;
   /**
-   * By default, the background `opacity` gradually decreases from 1 to 0 during downward swipe gestures.
-   * @remark When `false`, this animation is disabled.
+   * Dismiss gesture options. Calls `onDismiss` function when swiping down.
+   * @remark Useful for closing modals with downward swipe gestures.
+   */
+  dismiss?: {
+    /**
+     * When `false`, dismiss gesture is disabled.
+     * @defaultValue true
+     */
+    enabled?: boolean;
+    /**
+     * `threshold` controls when `onDismiss` is called by applying a threshold value during vertical gestures.
+     * @defaultValue 80
+     */
+    threshold?: number;
+    /**
+     * `resistance` controls the range of vertical movement by applying resistance during dismiss gestures.
+     * @defaultValue 2
+     */
+    resistance?: number;
+    /**
+     * By default, the background `opacity` gradually decreases from 1 to 0 during downward swipe gestures.
+     * @remark When `false`, this animation is disabled.
+     * @defaultValue true
+     */
+    fadeBackdrop?: boolean;
+  };
+  /**
+   * Controls left/right swipe gestures.
+   * @remark When `false`, horizontal gestures are disabled.
    * @defaultValue true
    */
-  animateBackdrop?: boolean;
+  enableHorizontalSwipe?: boolean;
   /**
    * Only works when zoom is active, allows moving item position when zoomed.
    * @remark When `false`, gesture movement is disabled during zoom.
    * @defaultValue true
    */
-  enableZoomPanGesture?: boolean;
+  enablePanWhenZoomed?: boolean;
   /**
    * Controls two-finger pinch gestures.
    * @remark When `false`, two-finger zoom gestures are disabled.
    * @defaultValue true
    */
-  enableZoomGesture?: boolean;
+  enablePinchZoom?: boolean;
   /**
    * Controls double-tap zoom gestures.
    * @remark When `false`, double-tap zoom gestures are disabled.
    * @defaultValue true
    */
-  enableDoubleTapGesture?: boolean;
+  enableDoubleTapZoom?: boolean;
   /**
    * Enables infinite loop navigation.
    * @defaultValue false
    */
   enableLoop?: boolean;
   /**
-   * The maximum zoom scale.
-   * @defaultValue 2
+   * Enables snap scrolling mode.
+   *
+   * @remark
+   * **`false` (default)**: Paging mode (`pagingEnabled: true`)
+   * - Scrolls by full screen size increments
+   *
+   * **`true`**: Snap mode (`snapToInterval` auto-calculated)
+   * - `snapToInterval` is automatically calculated based on `width` and `itemSpacing` values
+   * - Use this option when you need item spacing
+   * @defaultValue false
+   *
    */
-  maxZoomScale?: number;
+  enableSnapMode?: boolean;
   /**
    * The spacing between items in pixels.
-   * @remark Only applied when `useSnap` is `true`.
+   * @remark Only applied when `enableSnapMode` is `true`.
    * @defaultValue 0
    */
   itemSpacing?: number;
+  /**
+   * The maximum zoom scale.
+   * @defaultValue 2
+   */
+  maxZoomScale?: number;
 }
 
 /**
@@ -167,8 +166,10 @@ export type GestureViewerController = {
    *
    * @example
    * ```typescript
+   * const { totalCount } = useGestureViewerState();
+   *
    * controller.goToIndex(0); // Go to first item
-   * controller.goToIndex(controller.totalCount - 1); // Go to last item
+   * controller.goToIndex(totalCount - 1); // Go to last item
    * ```
    */
   goToIndex: (index: number) => void;
@@ -252,13 +253,13 @@ export type GestureViewerController = {
    * ```
    */
   rotate: (angle?: RotationAngle, clockwise?: boolean) => void;
-} & GestureViewerControllerState;
+};
 
 /**
  * State information for the gesture viewer controller.
  * Contains read-only properties that reflect the current state.
  */
-export type GestureViewerControllerState = {
+export type GestureViewerState = {
   /**
    * The current index of the active item in the viewer.
    *
@@ -267,7 +268,7 @@ export type GestureViewerControllerState = {
    *
    * @example
    * ```typescript
-   * console.log(`Currently viewing item ${controller.currentIndex + 1} of ${controller.totalCount}`);
+   * console.log(`Currently viewing item ${currentIndex + 1} of ${totalCount}`);
    * ```
    */
   readonly currentIndex: number;
@@ -280,8 +281,8 @@ export type GestureViewerControllerState = {
    *
    * @example
    * ```typescript
-   * const hasNext = controller.currentIndex < controller.totalCount - 1;
-   * const hasPrevious = controller.currentIndex > 0;
+   * const hasNext = currentIndex < totalCount - 1;
+   * const hasPrevious = currentIndex > 0;
    * ```
    */
   readonly totalCount: number;

package/src/useGestureViewer.ts

@@ -29,36 +29,27 @@ type UseGestureViewerProps<T = any> = Omit<
 export const useGestureViewer = <T = any>({
   data,
   initialIndex = 0,
-  onIndexChange,
   onDismiss,
   width: customWidth,
-  dismissThreshold = 80,
-  resistance = 2,
-  // swipeThreshold = 0.5,
-  // velocityThreshold = 200,
-  animateBackdrop = true,
-  enableDismissGesture = true,
-  enableSwipeGesture = true,
-  enableZoomGesture = true,
-  enableDoubleTapGesture = true,
-  enableZoomPanGesture = true,
+  dismiss,
+  enableDoubleTapZoom = true,
+  enablePinchZoom = true,
+  enableHorizontalSwipe = true,
+  enablePanWhenZoomed = true,
   enableLoop = false,
   maxZoomScale = 2,
   itemSpacing = 0,
-  useSnap = false,
+  enableSnapMode = false,
   id = 'default',
 }: UseGestureViewerProps<T>) => {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
-  const width = useSnap ? customWidth || screenWidth : screenWidth;
+  const width = enableSnapMode ? customWidth || screenWidth : screenWidth;
 
   const [isZoomed, setIsZoomed] = useState(false);
   const [isRotated, setIsRotated] = useState(false);
   const [manager, setManager] = useState<GestureViewerManager | null>(null);
 
   const listRef = useRef<any>(null);
-  const unsubscribeRef = useRef<(() => void) | null>(null);
-  const onIndexChangeRef = useRef<((index: number) => void) | null>(null);
-  const lastEmittedIndexRef = useRef<number>(null);
 
   const initialTranslateY = useSharedValue(0);
   const initialTranslateX = useSharedValue(0);
@@ -72,6 +63,15 @@ export const useGestureViewer = <T = any>({
 
   const dataLength = data?.length || 0;
 
+  const dismissOptions = useMemo(() => {
+    return {
+      enabled: dismiss?.enabled ?? true,
+      threshold: dismiss?.threshold ?? 80,
+      resistance: dismiss?.resistance ?? 2,
+      fadeBackdrop: dismiss?.fadeBackdrop ?? true,
+    };
+  }, [dismiss?.enabled, dismiss?.threshold, dismiss?.resistance, dismiss?.fadeBackdrop]);
+
   const adjustedInitialIndex = useMemo(() => {
     if (enableLoop && data.length > 1) {
       return initialIndex + 1;
@@ -96,14 +96,18 @@ export const useGestureViewer = <T = any>({
 
   const emitZoomChange = useCallback(
     (currentScale: number, prevScale: number | null) => {
-      manager?.emitZoomChange(currentScale, prevScale);
+      if (manager) {
+        manager.emitZoomChange(currentScale, prevScale);
+      }
     },
     [manager],
   );
 
   const emitRotationChange = useCallback(
     (currentRotation: number, prevRotation: number | null) => {
-      manager?.emitRotationChange(currentRotation, prevRotation);
+      if (manager) {
+        manager.emitRotationChange(currentRotation, prevRotation);
+      }
     },
     [manager],
   );
@@ -111,7 +115,7 @@ export const useGestureViewer = <T = any>({
   useAnimatedReaction(
     () => scale.value,
     (currentScale, previousScale) => {
-      if (manager && currentScale !== previousScale) {
+      if (currentScale !== previousScale) {
         runOnJS(emitZoomChange)(currentScale, previousScale);
       }
 
@@ -122,7 +126,7 @@ export const useGestureViewer = <T = any>({
   useAnimatedReaction(
     () => rotation.value,
     (currentRotation, previousRotation) => {
-      if (manager && currentRotation !== previousRotation) {
+      if (currentRotation !== previousRotation) {
         runOnJS(emitRotationChange)(currentRotation, previousRotation);
       }
 
@@ -131,41 +135,9 @@ export const useGestureViewer = <T = any>({
   );
 
   useEffect(() => {
-    onIndexChangeRef.current = onIndexChange ?? null;
-  });
-
-  useEffect(() => {
-    return () => {
-      onIndexChangeRef.current = null;
-    };
-  }, []);
+    const unsubscribe = registry.subscribeToManager(id, setManager);
 
-  useEffect(() => {
-    const handleManagerChange = (manager: GestureViewerManager | null) => {
-      unsubscribeRef.current?.();
-      unsubscribeRef.current = null;
-
-      setManager(manager);
-
-      lastEmittedIndexRef.current = null;
-
-      if (manager) {
-        unsubscribeRef.current = manager.subscribe((state) => {
-          if (lastEmittedIndexRef.current !== state.currentIndex) {
-            lastEmittedIndexRef.current = state.currentIndex;
-            onIndexChangeRef.current?.(state.currentIndex);
-          }
-        });
-        return;
-      }
-    };
-
-    const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
-
-    return () => {
-      unsubscribeFromRegistry();
-      unsubscribeRef.current?.();
-    };
+    return unsubscribe;
   }, [id]);
 
   useEffect(() => {
@@ -174,7 +146,7 @@ export const useGestureViewer = <T = any>({
     }
 
     manager.setDataLength(dataLength);
-    manager.setEnableSwipeGesture(enableSwipeGesture);
+    manager.setEnableHorizontalSwipe(enableHorizontalSwipe);
     manager.setCurrentIndex(initialIndex);
     manager.setWidth(width + itemSpacing);
     manager.setHeight(screenHeight);
@@ -184,7 +156,7 @@ export const useGestureViewer = <T = any>({
     manager.notifyStateChange();
   }, [
     dataLength,
-    enableSwipeGesture,
+    enableHorizontalSwipe,
     initialIndex,
     manager,
     width,
@@ -229,7 +201,7 @@ export const useGestureViewer = <T = any>({
 
   const onMomentumScrollEnd = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      if (!enableSwipeGesture) {
+      if (!enableHorizontalSwipe) {
         return;
       }
 
@@ -271,7 +243,7 @@ export const useGestureViewer = <T = any>({
       dataLength,
       width,
       itemSpacing,
-      enableSwipeGesture,
+      enableHorizontalSwipe,
       enableLoop,
       translateX,
       translateY,
@@ -292,10 +264,10 @@ export const useGestureViewer = <T = any>({
       .failOffsetX([-10, 10])
       .enabled(!isZoomed)
       .onUpdate((event) => {
-        translateY.value = event.translationY / resistance;
+        translateY.value = event.translationY / dismissOptions.resistance;
       })
       .onEnd((event) => {
-        if (event.translationY > dismissThreshold && enableDismissGesture && onDismiss) {
+        if (event.translationY > dismissOptions.threshold && dismissOptions.enabled && onDismiss) {
           runOnJS(onDismiss)();
           return;
         }
@@ -308,11 +280,11 @@ export const useGestureViewer = <T = any>({
           energyThreshold: 6e-9,
         });
       });
-  }, [translateY, dismissThreshold, enableDismissGesture, onDismiss, resistance, isZoomed]);
+  }, [translateY, dismissOptions.threshold, dismissOptions.enabled, onDismiss, dismissOptions.resistance, isZoomed]);
 
   const zoomPinchGesture = useMemo(() => {
     return Gesture.Pinch()
-      .enabled(enableZoomGesture)
+      .enabled(enablePinchZoom)
       .onBegin(() => {
         startScale.value = scale.value;
         initialTranslateX.value = translateX.value;
@@ -388,7 +360,7 @@ export const useGestureViewer = <T = any>({
       });
   }, [
     scale,
-    enableZoomGesture,
+    enablePinchZoom,
     maxZoomScale,
     translateX,
     translateY,
@@ -402,7 +374,7 @@ export const useGestureViewer = <T = any>({
 
   const zoomPanGesture = useMemo(() => {
     return Gesture.Pan()
-      .enabled(enableZoomPanGesture && isZoomed)
+      .enabled(enablePanWhenZoomed && isZoomed)
       .activeCursor('grabbing')
       .averageTouches(true)
       .onBegin(() => {
@@ -427,7 +399,7 @@ export const useGestureViewer = <T = any>({
   }, [
     translateX,
     translateY,
-    enableZoomPanGesture,
+    enablePanWhenZoomed,
     isZoomed,
     scale,
     initialTranslateX,
@@ -437,7 +409,7 @@ export const useGestureViewer = <T = any>({
 
   const doubleTapGesture = useMemo(() => {
     return Gesture.Tap()
-      .enabled(enableDoubleTapGesture)
+      .enabled(enableDoubleTapZoom)
       .numberOfTaps(2)
       .onEnd((event) => {
         const nextScale = scale.value > 1 ? 1 : maxZoomScale;
@@ -471,7 +443,7 @@ export const useGestureViewer = <T = any>({
           easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
         });
       });
-  }, [scale, enableDoubleTapGesture, maxZoomScale, translateX, translateY, width, screenHeight]);
+  }, [scale, enableDoubleTapZoom, maxZoomScale, translateX, translateY, width, screenHeight]);
 
   const zoomGesture = useMemo(() => {
     return Gesture.Race(zoomPinchGesture, Gesture.Exclusive(zoomPanGesture, doubleTapGesture));
@@ -489,14 +461,14 @@ export const useGestureViewer = <T = any>({
   });
 
   const backdropStyle = useAnimatedStyle(() => {
-    if (!animateBackdrop || scale.value !== 1) {
+    if (!dismissOptions.fadeBackdrop || scale.value !== 1) {
       return { opacity: 1 };
     }
 
     const opacity = interpolate(translateY.value, [0, 200], [1, 0], 'clamp');
 
     return { opacity };
-  }, [animateBackdrop]);
+  }, [dismissOptions.fadeBackdrop]);
 
   const onScrollBeginDrag = useCallback(() => {
     manager?.handleScrollBeginDrag();