react-native-gesture-image-viewer 1.3.0 → 1.4.1

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

@@ -9,7 +9,7 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
     /**
      * 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.
-     * @default 'default'
+     * @defaultValue 'default'
      */
     id?: string;
     /**
@@ -18,7 +18,7 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
     data: T[];
     /**
      * The index of the item to display in the `GestureViewer` when the component is mounted.
-     * @default 0
+     * @defaultValue 0
      */
     initialIndex?: number;
     /**
@@ -44,7 +44,7 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
     /**
      * The width of the `GestureViewer`.
      * @remark If you don't set this prop, the width of the `GestureViewer` will be the same as the width of the screen.
-     * @default screen width
+     * @defaultValue screen width
      */
     width?: number;
     /**
@@ -57,30 +57,30 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
      * **`true`**: Snap mode (`snapToInterval` auto-calculated)
      * - `snapToInterval` is automatically calculated based on `width` and `itemSpacing` values
      * - Use this option when you need item spacing
-     * @default false
+     * @defaultValue false
      *
      */
     useSnap?: boolean;
     /**
      * `dismissThreshold` controls when `onDismiss` is called by applying a threshold value during vertical gestures.
-     * @default 80
+     * @defaultValue 80
      */
     dismissThreshold?: number;
     /**
      * Calls `onDismiss` function when swiping down.
      * @remark Useful for closing modals with downward swipe gestures.
-     * @default true
+     * @defaultValue true
      */
     enableDismissGesture?: boolean;
     /**
      * Controls left/right swipe gestures.
      * @remark When `false`, horizontal gestures are disabled.
-     * @default true
+     * @defaultValue true
      */
     enableSwipeGesture?: boolean;
     /**
      * `resistance` controls the range of vertical movement by applying resistance during vertical gestures.
-     * @default 2
+     * @defaultValue 2
      */
     resistance?: number;
     /**
@@ -99,38 +99,167 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
     /**
      * By default, the background `opacity` gradually decreases from 1 to 0 during downward swipe gestures.
      * @remark When `false`, this animation is disabled.
-     * @default true
+     * @defaultValue true
      */
     animateBackdrop?: boolean;
     /**
      * Only works when zoom is active, allows moving item position when zoomed.
      * @remark When `false`, gesture movement is disabled during zoom.
-     * @default true
+     * @defaultValue true
      */
     enableZoomPanGesture?: boolean;
     /**
      * Controls two-finger pinch gestures.
      * @remark When `false`, two-finger zoom gestures are disabled.
-     * @default true
+     * @defaultValue true
      */
     enableZoomGesture?: boolean;
     /**
      * Controls double-tap zoom gestures.
      * @remark When `false`, double-tap zoom gestures are disabled.
-     * @default true
+     * @defaultValue true
      */
     enableDoubleTapGesture?: boolean;
     /**
      * The maximum zoom scale.
-     * @default 2
+     * @defaultValue 2
      */
     maxZoomScale?: number;
     /**
      * The spacing between items in pixels.
      * @remark Only applied when `useSnap` is `true`.
-     * @default 0
+     * @defaultValue 0
      */
     itemSpacing?: number;
 }
+/**
+ * Supported rotation angles in degrees.
+ */
+export type RotationAngle = 0 | 90 | 180 | 270 | 360;
+/**
+ * Controller for managing gesture-based image/content viewer interactions.
+ * Provides navigation, zoom, and rotation capabilities with state management.
+ */
+export type GestureViewerController = {
+    /**
+     * Navigates to the specified index in the viewer.
+     * Updates the currentIndex in the controller state.
+     *
+     * @param index - The target index (must be between 0 and totalCount - 1)
+     * @throws Will throw an error if index is out of bounds
+     *
+     * @example
+     * ```typescript
+     * controller.goToIndex(0); // Go to first item
+     * controller.goToIndex(controller.totalCount - 1); // Go to last item
+     * ```
+     */
+    goToIndex: (index: number) => void;
+    /**
+     * Navigates to the previous item in the sequence.
+     * If already at the first item, behavior depends on implementation (may wrap or do nothing).
+     * Updates currentIndex in the controller state.
+     */
+    goToPrevious: () => void;
+    /**
+     * Navigates to the next item in the sequence.
+     * If already at the last item, behavior depends on implementation (may wrap or do nothing).
+     * Updates currentIndex in the controller state.
+     */
+    goToNext: () => void;
+    /**
+     * Zooms in by the specified multiplier.
+     *
+     * @param multiplier - The zoom multiplier (0.01 - 1.0). Higher values zoom in more.
+     * @defaultValue 0.25
+     *
+     * @example
+     * ```typescript
+     * controller.zoomIn(); // Zoom in by 25%
+     * controller.zoomIn(0.5); // Zoom in by 50%
+     * ```
+     */
+    zoomIn: (multiplier?: number) => void;
+    /**
+     * Zooms out by the specified multiplier.
+     *
+     * @param multiplier - The zoom multiplier (0.01 - 1.0). Higher values zoom out more.
+     * @defaultValue 0.25
+     *
+     * @example
+     * ```typescript
+     * controller.zoomOut(); // Zoom out by 25%
+     * controller.zoomOut(0.1); // Zoom out by 10%
+     * ```
+     */
+    zoomOut: (multiplier?: number) => void;
+    /**
+     * Resets the zoom level to the specified scale.
+     *
+     * @param scale - The scale to reset to (1.0 = original size)
+     * @defaultValue 1.0
+     *
+     * @example
+     * ```typescript
+     * controller.resetZoom(); // Reset to original size
+     * controller.resetZoom(0.5); // Reset to 50% of original size
+     * ```
+     */
+    resetZoom: (scale?: number) => void;
+    /**
+     * Rotates the content by the specified angle.
+     *
+     * @param angle - Rotation angle in degrees. Must be one of: 0, 90, 180, 270, 360
+     * @param clockwise - Direction of rotation when angle is not 0 or 360
+     * @defaultValue angle: `90`, clockwise: `true`
+     *
+     * @remarks
+     * - Angle 0 or 360 resets rotation regardless of clockwise parameter
+     * - The clockwise parameter only affects rotation when angle is 90, 180, or 270
+     * - Rotation is cumulative and affects the current orientation
+     *
+     * @example
+     * ```typescript
+     * controller.rotate(); // Rotate 90 degrees clockwise
+     * controller.rotate(0); // Reset rotation
+     * controller.rotate(90, false); // Rotate 90 degrees counter-clockwise
+     * controller.rotate(180); // Rotate 180 degrees (clockwise by default)
+     * controller.rotate(270, false); // Rotate 270 degrees counter-clockwise
+     * controller.rotate(360); // Reset rotation (same as 0)
+     * ```
+     */
+    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 = {
+    /**
+     * The current index of the active item in the viewer.
+     *
+     * @remarks
+     * This value is automatically updated when navigation methods are called.
+     *
+     * @example
+     * ```typescript
+     * console.log(`Currently viewing item ${controller.currentIndex + 1} of ${controller.totalCount}`);
+     * ```
+     */
+    readonly currentIndex: number;
+    /**
+     * The total number of items available in the viewer.
+     *
+     * @remarks
+     * This value determines the valid range for currentIndex (0 to totalCount - 1).
+     *
+     * @example
+     * ```typescript
+     * const hasNext = controller.currentIndex < controller.totalCount - 1;
+     * const hasPrevious = controller.currentIndex > 0;
+     * ```
+     */
+    readonly totalCount: number;
+};
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,IAAI,UAAU,EAAE,UAAU,IAAI,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC7G,OAAO,KAAK,EAAE,QAAQ,IAAI,UAAU,EAAE,UAAU,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEvG,MAAM,MAAM,iBAAiB,GAAG,OAAO,UAAU,GAAG,OAAO,UAAU,CAAC;AACtE,MAAM,MAAM,mBAAmB,GAAG,OAAO,YAAY,GAAG,OAAO,YAAY,CAAC;AAE5E,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,SAAS,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAE/E,KAAK,oBAAoB,CAAC,EAAE,IAAI,EAAE,SAAS,iBAAiB,GACxD,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC,GACxB,EAAE,SAAS,mBAAmB,GAC5B,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC,GACxB,iBAAiB,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,GAAG,OAAO,UAAU;IACjE;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAC;IAC3D;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,YAAY,CAAC;IACvE;;OAEG;IACH,aAAa,EAAE,EAAE,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAG1B;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC,CAAC;IAC9C;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}

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

@@ -7,6 +7,7 @@ export declare const useGestureViewer: <T = any>({ data, initialIndex, onIndexCh
     translateY: import("react-native-reanimated").SharedValue<number>;
     listRef: import("react").RefObject<any>;
     isZoomed: boolean;
+    isRotated: boolean;
     dismissGesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;
     zoomGesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/gestureComposition").ComposedGesture;
     onMomentumScrollEnd: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
@@ -15,14 +16,22 @@ export declare const useGestureViewer: <T = any>({ data, initialIndex, onIndexCh
             translateY: number;
             translateX?: undefined;
             scale?: undefined;
+            rotate?: undefined;
         } | {
             translateX: number;
             translateY?: undefined;
             scale?: undefined;
+            rotate?: undefined;
         } | {
             scale: number;
             translateY?: undefined;
             translateX?: undefined;
+            rotate?: undefined;
+        } | {
+            rotate: string;
+            translateY?: undefined;
+            translateX?: undefined;
+            scale?: undefined;
         })[];
     };
     backdropStyle: {

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

@@ -1 +1 @@
-{"version":3,"file":"useGestureViewer.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewer.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAE1B,MAAM,cAAc,CAAC;AActB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlD,KAAK,qBAAqB,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,CACxC,kBAAkB,CAAC,CAAC,CAAC,EACrB,YAAY,GAAG,iBAAiB,GAAG,eAAe,GAAG,WAAW,GAAG,gBAAgB,GAAG,eAAe,CACtG,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,CAAC,GAAG,GAAG,EAAE,yQAoBvC,qBAAqB,CAAC,CAAC,CAAC;;;;;;;;iCAmIf,oBAAoB,CAAC,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;CAqQlD,CAAC"}
+{"version":3,"file":"useGestureViewer.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewer.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAE1B,MAAM,cAAc,CAAC;AActB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlD,KAAK,qBAAqB,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,CACxC,kBAAkB,CAAC,CAAC,CAAC,EACrB,YAAY,GAAG,iBAAiB,GAAG,eAAe,GAAG,WAAW,GAAG,gBAAgB,GAAG,eAAe,CACtG,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,CAAC,GAAG,GAAG,EAAE,yQAoBvC,qBAAqB,CAAC,CAAC,CAAC;;;;;;;;;iCA8If,oBAAoB,CAAC,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4QlD,CAAC"}

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

@@ -1,11 +1,55 @@
-export declare const useGestureViewerController: (id?: string) => {
-    goToIndex: (index: number) => void;
-    goToPrevious: () => void;
-    goToNext: () => void;
-    zoomIn: (multiplier?: number) => void;
-    zoomOut: (multiplier?: number) => void;
-    resetZoom: (scale?: number) => void;
-    currentIndex: number;
-    totalCount: number;
-};
+import type { GestureViewerController } from './types';
+/**
+ * Hook to control the gesture viewer programmatically.
+ *
+ * @param id - Viewer instance identifier (default: 'default')
+ * @returns Methods and state for controlling the viewer
+ *
+ * **Available methods:**
+ * - `goToIndex(index: number)` - Navigate to specific index (0 to totalCount-1)
+ * - `goToPrevious()` - Navigate to previous item
+ * - `goToNext()` - Navigate to next item
+ * - `zoomIn(multiplier?: number)` - Zoom in (default: 0.25)
+ * - `zoomOut(multiplier?: number)` - Zoom out (default: 0.25)
+ * - `resetZoom(scale?: number)` - Reset zoom level (default: 1.0)
+ * - `rotate(angle?: 0|90|180|270|360, clockwise?: boolean)` - Rotate content (default: 90° clockwise)
+ *
+ * **Available state:**
+ * - `currentIndex: number` - Current active index (read-only)
+ * - `totalCount: number` - Total number of items (read-only)
+ *
+ * @example
+ * ```tsx
+ * const { goToIndex, goToNext, goToPrevious, zoomIn, zoomOut, resetZoom, rotate, currentIndex, totalCount } = useGestureViewerController();
+ *
+ * // Navigate to specific index
+ * goToIndex(2);
+ *
+ * // Go to next image
+ * goToNext();
+ *
+ * // Zoom in by 25%
+ * zoomIn();
+ *
+ * // Zoom out by 50%
+ * zoomOut(0.5);
+ *
+ * // Reset to original size
+ * resetZoom();
+ *
+ * // Rotate 90 degrees clockwise
+ * rotate();
+ *
+ * // Rotate 180 degrees
+ * rotate(180);
+ *
+ * // Check current state
+ * console.log(`Image ${currentIndex + 1} of ${totalCount}`);
+ *
+ * // Check navigation availability
+ * const canGoNext = currentIndex < totalCount - 1;
+ * const canGoPrevious = currentIndex > 0;
+ * ```
+ */
+export declare const useGestureViewerController: (id?: string) => GestureViewerController;
 //# sourceMappingURL=useGestureViewerController.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useGestureViewerController.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewerController.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,0BAA0B,GAAI,WAAc;;;;;;;;;CA6CxD,CAAC"}
+{"version":3,"file":"useGestureViewerController.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewerController.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAgC,MAAM,SAAS,CAAC;AAErF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,eAAO,MAAM,0BAA0B,GAAI,WAAc,KAAG,uBA6C3D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-image-viewer",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "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

@@ -29,16 +29,24 @@ export function GestureViewer<T = any, LC = typeof FlatList>({
 
   const width = useSnap ? customWidth || screenWidth : screenWidth;
 
-  const { listRef, isZoomed, dismissGesture, zoomGesture, onMomentumScrollEnd, animatedStyle, backdropStyle } =
-    useGestureViewer({
-      id,
-      data,
-      width,
-      initialIndex,
-      itemSpacing,
-      useSnap,
-      ...props,
-    });
+  const {
+    listRef,
+    isZoomed,
+    isRotated,
+    dismissGesture,
+    zoomGesture,
+    onMomentumScrollEnd,
+    animatedStyle,
+    backdropStyle,
+  } = useGestureViewer({
+    id,
+    data,
+    width,
+    initialIndex,
+    itemSpacing,
+    useSnap,
+    ...props,
+  });
 
   const renderItem = useCallback(
     ({ item, index }: { item: T; index: number }) => {
@@ -89,7 +97,7 @@ export function GestureViewer<T = any, LC = typeof FlatList>({
   const commonProps: ScrollViewProps = useMemo(
     () => ({
       horizontal: true,
-      scrollEnabled: !isZoomed,
+      scrollEnabled: !isZoomed && !isRotated,
       showsHorizontalScrollIndicator: false,
       onMomentumScrollEnd: onMomentumScrollEnd,
       ...(useSnap
@@ -104,7 +112,7 @@ export function GestureViewer<T = any, LC = typeof FlatList>({
       scrollEventThrottle: 16,
       removeClippedSubviews: true,
     }),
-    [width, itemSpacing, isZoomed, onMomentumScrollEnd, useSnap],
+    [width, itemSpacing, isZoomed, isRotated, onMomentumScrollEnd, useSnap],
   );
 
   const listComponent = (

package/src/GestureViewerManager.ts

@@ -1,11 +1,7 @@
 import { type SharedValue, withTiming } from 'react-native-reanimated';
+import type { GestureViewerControllerState } from './types';
 import { createBoundsConstraint } from './utils';
 
-export type GestureViewerManagerState = {
-  currentIndex: number;
-  dataLength: number;
-};
-
 class GestureViewerManager {
   private currentIndex = 0;
   private dataLength = 0;
@@ -17,7 +13,8 @@ class GestureViewerManager {
   private maxZoomScale = 2;
   private listRef: any | null = null;
   private enableSwipeGesture = true;
-  private listeners = new Set<(state: GestureViewerManagerState) => void>();
+  private listeners = new Set<(state: GestureViewerControllerState) => void>();
+  private rotation: SharedValue<number> | null = null;
 
   private notifyListeners() {
     const state = this.getState();
@@ -25,7 +22,7 @@ class GestureViewerManager {
     this.listeners.forEach((listener) => listener(state));
   }
 
-  subscribe(listener: (state: GestureViewerManagerState) => void) {
+  subscribe(listener: (state: GestureViewerControllerState) => void) {
     this.listeners.add(listener);
 
     return () => {
@@ -36,7 +33,7 @@ class GestureViewerManager {
   getState() {
     return {
       currentIndex: this.currentIndex,
-      dataLength: this.dataLength,
+      totalCount: this.dataLength,
     };
   }
 
@@ -82,11 +79,39 @@ class GestureViewerManager {
     this.notifyListeners();
   }
 
-  /**
-   * @param multiplier - The multiplier to zoom in.
-   * @range 0.01 - 1
-   * @default 0.25
-   */
+  setRotation(rotation: SharedValue<number>) {
+    this.rotation = rotation;
+  }
+
+  rotate = (angle: 0 | 90 | 180 | 270 | 360 = 90, clockwise = true) => {
+    const MAX_ANGLE = 360;
+
+    if (
+      !this.rotation ||
+      angle < 0 ||
+      angle > MAX_ANGLE ||
+      (angle !== 0 && this.rotation.value % angle !== 0 && angle !== 360)
+    ) {
+      return;
+    }
+
+    if (angle === 0) {
+      const nextAngle = Math.floor(this.rotation.value / MAX_ANGLE) * MAX_ANGLE;
+
+      this.rotation.value = withTiming(clockwise ? nextAngle : nextAngle - MAX_ANGLE);
+      return;
+    }
+
+    if (angle === 360) {
+      this.rotation.value = withTiming(clockwise ? this.rotation.value + MAX_ANGLE : this.rotation.value - MAX_ANGLE);
+      return;
+    }
+
+    const nextAngle = clockwise ? this.rotation.value + angle : this.rotation.value - angle;
+
+    this.rotation.value = withTiming(nextAngle);
+  };
+
   zoomIn = (multiplier = 0.25) => {
     if (!this.scale || !this.translateX || !this.translateY || multiplier < 0.01 || multiplier > 1) {
       return;
@@ -109,11 +134,6 @@ class GestureViewerManager {
     this.translateY.value = withTiming(translateY);
   };
 
-  /**
-   * @param multiplier - The multiplier to zoom out.
-   * @range 0.01 - 1
-   * @default 0.25
-   */
   zoomOut = (multiplier = 0.25) => {
     if (!this.scale || !this.translateX || !this.translateY || multiplier < 0.01 || multiplier > 1) {
       return;
@@ -142,10 +162,6 @@ class GestureViewerManager {
     this.translateY.value = withTiming(translateY);
   };
 
-  /**
-   * @param scale - The scale to reset to.
-   * @default 1
-   */
   resetZoom = (scale = 1) => {
     if (!this.scale || !this.translateX || !this.translateY || scale <= 0 || scale > this.maxZoomScale) {
       return;
@@ -195,6 +211,7 @@ class GestureViewerManager {
     this.scale = null;
     this.translateX = null;
     this.translateY = null;
+    this.rotation = null;
   }
 }
 

package/src/index.tsx

@@ -1,3 +1,3 @@
 export { GestureViewer } from './GestureViewer';
-export type { GestureViewerProps } from './types';
+export type { GestureViewerController, GestureViewerProps } from './types';
 export { useGestureViewerController } from './useGestureViewerController';