react-native-gesture-image-viewer 1.2.3 → 1.4.0

package/lib/module/useGestureViewerController.js

@@ -35,6 +35,10 @@ export const useGestureViewerController = (id = 'default') => {
     goToIndex: manager?.goToIndex || noopFunction,
     goToPrevious: manager?.goToPrevious || noopFunction,
     goToNext: manager?.goToNext || noopFunction,
+    zoomIn: manager?.zoomIn || noopFunction,
+    zoomOut: manager?.zoomOut || noopFunction,
+    resetZoom: manager?.resetZoom || noopFunction,
+    rotate: manager?.rotate || noopFunction,
     currentIndex: state.currentIndex,
     totalCount: state.dataLength
   };

package/lib/module/useGestureViewerController.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useRef","useState","registry","useGestureViewerController","id","state","setState","currentIndex","dataLength","manager","setManager","unsubscribeRef","handleManagerChange","newManager","current","getState","subscribe","unsubscribeFromRegistry","subscribeToManager","noopFunction","goToIndex","goToPrevious","goToNext","totalCount"],"sourceRoot":"../../src","sources":["useGestureViewerController.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAG5D,SAASC,QAAQ,QAAQ,4BAAyB;AAElD,OAAO,MAAMC,0BAA0B,GAAGA,CAACC,EAAE,GAAG,SAAS,KAAK;EAC5D,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGL,QAAQ,CAA4B;IAC5DM,YAAY,EAAE,CAAC;IACfC,UAAU,EAAE;EACd,CAAC,CAAC;EAEF,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGT,QAAQ,CAA8B,IAAI,CAAC;EACzE,MAAMU,cAAc,GAAGX,MAAM,CAAsB,IAAI,CAAC;EAExDF,SAAS,CAAC,MAAM;IACd,MAAMc,mBAAmB,GAAIC,UAAuC,IAAK;MACvEF,cAAc,CAACG,OAAO,GAAG,CAAC;MAC1BH,cAAc,CAACG,OAAO,GAAG,IAAI;MAE7BJ,UAAU,CAACG,UAAU,CAAC;MAEtB,IAAIA,UAAU,EAAE;QACdP,QAAQ,CAACO,UAAU,CAACE,QAAQ,CAAC,CAAC,CAAC;QAC/BJ,cAAc,CAACG,OAAO,GAAGD,UAAU,CAACG,SAAS,CAACV,QAAQ,CAAC;QACvD;MACF;MAEAA,QAAQ,CAAC;QAAEC,YAAY,EAAE,CAAC;QAAEC,UAAU,EAAE;MAAE,CAAC,CAAC;IAC9C,CAAC;IAED,MAAMS,uBAAuB,GAAGf,QAAQ,CAACgB,kBAAkB,CAACd,EAAE,EAAEQ,mBAAmB,CAAC;IAEpF,OAAO,MAAM;MACXK,uBAAuB,CAAC,CAAC;MACzBN,cAAc,CAACG,OAAO,GAAG,CAAC;IAC5B,CAAC;EACH,CAAC,EAAE,CAACV,EAAE,CAAC,CAAC;EAER,MAAMe,YAAY,GAAGpB,OAAO,CAAC,MAAM,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;EAEhD,OAAO;IACLqB,SAAS,EAAEX,OAAO,EAAEW,SAAS,IAAID,YAAY;IAC7CE,YAAY,EAAEZ,OAAO,EAAEY,YAAY,IAAIF,YAAY;IACnDG,QAAQ,EAAEb,OAAO,EAAEa,QAAQ,IAAIH,YAAY;IAC3CZ,YAAY,EAAEF,KAAK,CAACE,YAAY;IAChCgB,UAAU,EAAElB,KAAK,CAACG;EACpB,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","useMemo","useRef","useState","registry","useGestureViewerController","id","state","setState","currentIndex","dataLength","manager","setManager","unsubscribeRef","handleManagerChange","newManager","current","getState","subscribe","unsubscribeFromRegistry","subscribeToManager","noopFunction","goToIndex","goToPrevious","goToNext","zoomIn","zoomOut","resetZoom","rotate","totalCount"],"sourceRoot":"../../src","sources":["useGestureViewerController.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAG5D,SAASC,QAAQ,QAAQ,4BAAyB;AAElD,OAAO,MAAMC,0BAA0B,GAAGA,CAACC,EAAE,GAAG,SAAS,KAAK;EAC5D,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGL,QAAQ,CAA4B;IAC5DM,YAAY,EAAE,CAAC;IACfC,UAAU,EAAE;EACd,CAAC,CAAC;EAEF,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGT,QAAQ,CAA8B,IAAI,CAAC;EACzE,MAAMU,cAAc,GAAGX,MAAM,CAAsB,IAAI,CAAC;EAExDF,SAAS,CAAC,MAAM;IACd,MAAMc,mBAAmB,GAAIC,UAAuC,IAAK;MACvEF,cAAc,CAACG,OAAO,GAAG,CAAC;MAC1BH,cAAc,CAACG,OAAO,GAAG,IAAI;MAE7BJ,UAAU,CAACG,UAAU,CAAC;MAEtB,IAAIA,UAAU,EAAE;QACdP,QAAQ,CAACO,UAAU,CAACE,QAAQ,CAAC,CAAC,CAAC;QAC/BJ,cAAc,CAACG,OAAO,GAAGD,UAAU,CAACG,SAAS,CAACV,QAAQ,CAAC;QACvD;MACF;MAEAA,QAAQ,CAAC;QAAEC,YAAY,EAAE,CAAC;QAAEC,UAAU,EAAE;MAAE,CAAC,CAAC;IAC9C,CAAC;IAED,MAAMS,uBAAuB,GAAGf,QAAQ,CAACgB,kBAAkB,CAACd,EAAE,EAAEQ,mBAAmB,CAAC;IAEpF,OAAO,MAAM;MACXK,uBAAuB,CAAC,CAAC;MACzBN,cAAc,CAACG,OAAO,GAAG,CAAC;IAC5B,CAAC;EACH,CAAC,EAAE,CAACV,EAAE,CAAC,CAAC;EAER,MAAMe,YAAY,GAAGpB,OAAO,CAAC,MAAM,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;EAEhD,OAAO;IACLqB,SAAS,EAAEX,OAAO,EAAEW,SAAS,IAAID,YAAY;IAC7CE,YAAY,EAAEZ,OAAO,EAAEY,YAAY,IAAIF,YAAY;IACnDG,QAAQ,EAAEb,OAAO,EAAEa,QAAQ,IAAIH,YAAY;IAC3CI,MAAM,EAAEd,OAAO,EAAEc,MAAM,IAAIJ,YAAY;IACvCK,OAAO,EAAEf,OAAO,EAAEe,OAAO,IAAIL,YAAY;IACzCM,SAAS,EAAEhB,OAAO,EAAEgB,SAAS,IAAIN,YAAY;IAC7CO,MAAM,EAAEjB,OAAO,EAAEiB,MAAM,IAAIP,YAAY;IACvCZ,YAAY,EAAEF,KAAK,CAACE,YAAY;IAChCoB,UAAU,EAAEtB,KAAK,CAACG;EACpB,CAAC;AACH,CAAC","ignoreList":[]}

package/lib/module/utils.js

@@ -22,4 +22,27 @@ export const isFlashListLike = component => {
   }
   return component?.name === 'FlashList';
 };
+export const createBoundsConstraint = ({
+  width,
+  height
+}) => ({
+  scale,
+  translateX,
+  translateY
+}) => {
+  'worklet';
+
+  if (scale <= 1) {
+    return {
+      translateX,
+      translateY
+    };
+  }
+  const maxTranslateX = (width * scale - width) / 2;
+  const maxTranslateY = (height * scale - height) / 2;
+  return {
+    translateX: Math.max(-maxTranslateX, Math.min(maxTranslateX, translateX)),
+    translateY: Math.max(-maxTranslateY, Math.min(maxTranslateY, translateY))
+  };
+};
 //# sourceMappingURL=utils.js.map

package/lib/module/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["FlatList","RNFlatList","ScrollView","RNScrollView","GestureFlatList","GestureScrollView","isScrollViewLike","component","isFlatListLike","isFlashListLike","FlashList","require","name"],"sourceRoot":"../../src","sources":["utils.ts"],"mappings":";;AAAA,SAASA,QAAQ,IAAIC,UAAU,EAAEC,UAAU,IAAIC,YAAY,QAAQ,cAAc;AACjF,SAASH,QAAQ,IAAII,eAAe,EAAEF,UAAU,IAAIG,iBAAiB,QAAQ,8BAA8B;AAG3G,OAAO,MAAMC,gBAAgB,GAAIC,SAAc,IAAuC;EACpF,OAAOA,SAAS,KAAKJ,YAAY,IAAII,SAAS,KAAKF,iBAAiB;AACtE,CAAC;AAED,OAAO,MAAMG,cAAc,GAAID,SAAc,IAAqC;EAChF,IAAIA,SAAS,KAAKN,UAAU,IAAIM,SAAS,KAAKH,eAAe,IAAIK,eAAe,CAACF,SAAS,CAAC,EAAE;IAC3F,OAAO,IAAI;EACb;EAEA,OAAO,KAAK;AACd,CAAC;AAED,OAAO,MAAME,eAAe,GAAIF,SAAc,IAAuB;EACnE,IAAI;IACF,MAAMG,SAAS,GAAGC,OAAO,CAAC,qBAAqB,CAAC,EAAED,SAAS;IAE3D,IAAIA,SAAS,IAAIH,SAAS,KAAKG,SAAS,EAAE;MACxC,OAAO,IAAI;IACb;EACF,CAAC,CAAC,MAAM;IACN;EAAA;EAGF,OAAOH,SAAS,EAAEK,IAAI,KAAK,WAAW;AACxC,CAAC","ignoreList":[]}
+{"version":3,"names":["FlatList","RNFlatList","ScrollView","RNScrollView","GestureFlatList","GestureScrollView","isScrollViewLike","component","isFlatListLike","isFlashListLike","FlashList","require","name","createBoundsConstraint","width","height","scale","translateX","translateY","maxTranslateX","maxTranslateY","Math","max","min"],"sourceRoot":"../../src","sources":["utils.ts"],"mappings":";;AAAA,SAASA,QAAQ,IAAIC,UAAU,EAAEC,UAAU,IAAIC,YAAY,QAAQ,cAAc;AACjF,SAASH,QAAQ,IAAII,eAAe,EAAEF,UAAU,IAAIG,iBAAiB,QAAQ,8BAA8B;AAG3G,OAAO,MAAMC,gBAAgB,GAAIC,SAAc,IAAuC;EACpF,OAAOA,SAAS,KAAKJ,YAAY,IAAII,SAAS,KAAKF,iBAAiB;AACtE,CAAC;AAED,OAAO,MAAMG,cAAc,GAAID,SAAc,IAAqC;EAChF,IAAIA,SAAS,KAAKN,UAAU,IAAIM,SAAS,KAAKH,eAAe,IAAIK,eAAe,CAACF,SAAS,CAAC,EAAE;IAC3F,OAAO,IAAI;EACb;EAEA,OAAO,KAAK;AACd,CAAC;AAED,OAAO,MAAME,eAAe,GAAIF,SAAc,IAAuB;EACnE,IAAI;IACF,MAAMG,SAAS,GAAGC,OAAO,CAAC,qBAAqB,CAAC,EAAED,SAAS;IAE3D,IAAIA,SAAS,IAAIH,SAAS,KAAKG,SAAS,EAAE;MACxC,OAAO,IAAI;IACb;EACF,CAAC,CAAC,MAAM;IACN;EAAA;EAGF,OAAOH,SAAS,EAAEK,IAAI,KAAK,WAAW;AACxC,CAAC;AAED,OAAO,MAAMC,sBAAsB,GACjCA,CAAC;EAAEC,KAAK;EAAEC;AAA0C,CAAC,KACrD,CAAC;EAAEC,KAAK;EAAEC,UAAU;EAAEC;AAAsE,CAAC,KAAK;EAChG,SAAS;;EAET,IAAIF,KAAK,IAAI,CAAC,EAAE;IACd,OAAO;MACLC,UAAU;MACVC;IACF,CAAC;EACH;EAEA,MAAMC,aAAa,GAAG,CAACL,KAAK,GAAGE,KAAK,GAAGF,KAAK,IAAI,CAAC;EACjD,MAAMM,aAAa,GAAG,CAACL,MAAM,GAAGC,KAAK,GAAGD,MAAM,IAAI,CAAC;EAEnD,OAAO;IACLE,UAAU,EAAEI,IAAI,CAACC,GAAG,CAAC,CAACH,aAAa,EAAEE,IAAI,CAACE,GAAG,CAACJ,aAAa,EAAEF,UAAU,CAAC,CAAC;IACzEC,UAAU,EAAEG,IAAI,CAACC,GAAG,CAAC,CAACF,aAAa,EAAEC,IAAI,CAACE,GAAG,CAACH,aAAa,EAAEF,UAAU,CAAC;EAC1E,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"GestureViewer.d.ts","sourceRoot":"","sources":["../../../src/GestureViewer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAyE,MAAM,cAAc,CAAC;AAIpH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAKlD,wBAAgB,aAAa,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,GAAG,OAAO,QAAQ,EAAE,EAC3D,EAAc,EACd,IAAI,EACJ,UAAU,EAAE,cAAc,EAC1B,eAAe,EACf,aAAa,EACb,KAAK,EAAE,WAAW,EAClB,SAAS,EACT,aAAa,EAAE,kBAAkB,EACjC,cAAc,EACd,YAAgB,EAChB,WAAe,EACf,OAAe,EACf,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,2CA+H3B"}
+{"version":3,"file":"GestureViewer.d.ts","sourceRoot":"","sources":["../../../src/GestureViewer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAyE,MAAM,cAAc,CAAC;AAIpH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAKlD,wBAAgB,aAAa,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,GAAG,OAAO,QAAQ,EAAE,EAC3D,EAAc,EACd,IAAI,EACJ,UAAU,EAAE,cAAc,EAC1B,eAAe,EACf,aAAa,EACb,KAAK,EAAE,WAAW,EAClB,SAAS,EACT,aAAa,EAAE,kBAAkB,EACjC,cAAc,EACd,YAAgB,EAChB,WAAe,EACf,OAAe,EACf,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,2CAuI3B"}

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

@@ -1,3 +1,4 @@
+import { type SharedValue } from 'react-native-reanimated';
 export type GestureViewerManagerState = {
     currentIndex: number;
     dataLength: number;
@@ -6,9 +7,15 @@ declare class GestureViewerManager {
     private currentIndex;
     private dataLength;
     private width;
+    private height;
+    private scale;
+    private translateX;
+    private translateY;
+    private maxZoomScale;
     private listRef;
     private enableSwipeGesture;
     private listeners;
+    private rotation;
     private notifyListeners;
     subscribe(listener: (state: GestureViewerManagerState) => void): () => void;
     getState(): {
@@ -16,11 +23,46 @@ declare class GestureViewerManager {
         dataLength: number;
     };
     setWidth(width: number): void;
+    setHeight(height: number): void;
     setListRef(ref: any): void;
     setDataLength(length: number): void;
     setEnableSwipeGesture(enabled: boolean): void;
     setCurrentIndex(index: number): void;
+    setZoomSharedValues(scale: SharedValue<number>, translateX: SharedValue<number>, translateY: SharedValue<number>, maxZoomScale: number): void;
     notifyStateChange(): void;
+    setRotation(rotation: SharedValue<number>): void;
+    /**
+     * @param angle - The angle to rotate.
+     * @default 90 (0, 90, 180, 270, 360)
+     * @param clockwise - The direction to rotate.
+     * @default true (clockwise)
+     *
+     * @example
+     * rotate(0) // reset rotation
+     * rotate(number, false) // rotate {number} degrees counter-clockwise
+     * rotate(90) // rotate 90 degrees clockwise
+     * rotate(180) // rotate 180 degrees clockwise
+     * rotate(270) // rotate 270 degrees clockwise
+     * rotate(360) // rotate 360 degrees clockwise
+     */
+    rotate: (angle?: 0 | 90 | 180 | 270 | 360, clockwise?: boolean) => void;
+    /**
+     * @param multiplier - The multiplier to zoom in.
+     * @range 0.01 - 1
+     * @default 0.25
+     */
+    zoomIn: (multiplier?: number) => void;
+    /**
+     * @param multiplier - The multiplier to zoom out.
+     * @range 0.01 - 1
+     * @default 0.25
+     */
+    zoomOut: (multiplier?: number) => void;
+    /**
+     * @param scale - The scale to reset to.
+     * @default 1
+     */
+    resetZoom: (scale?: number) => void;
     goToIndex: (index: number) => void;
     goToPrevious: () => void;
     goToNext: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"GestureViewerManager.d.ts","sourceRoot":"","sources":["../../../src/GestureViewerManager.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,yBAAyB,GAAG;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,cAAM,oBAAoB;IACxB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,OAAO,CAAoB;IACnC,OAAO,CAAC,kBAAkB,CAAQ;IAClC,OAAO,CAAC,SAAS,CAAyD;IAO1E,OAAO,CAAC,eAAe;IAMvB,SAAS,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI;IAQ9D,QAAQ;;;;IAOR,QAAQ,CAAC,KAAK,EAAE,MAAM;IAItB,UAAU,CAAC,GAAG,EAAE,GAAG;IAInB,aAAa,CAAC,MAAM,EAAE,MAAM;IAI5B,qBAAqB,CAAC,OAAO,EAAE,OAAO;IAItC,eAAe,CAAC,KAAK,EAAE,MAAM;IAM7B,iBAAiB;IAIjB,SAAS,GAAI,OAAO,MAAM,UAcxB;IAEF,YAAY,aAIV;IAEF,QAAQ,aAIN;IAEF,OAAO;CAOR;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"GestureViewerManager.d.ts","sourceRoot":"","sources":["../../../src/GestureViewerManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAc,MAAM,yBAAyB,CAAC;AAGvE,MAAM,MAAM,yBAAyB,GAAG;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,cAAM,oBAAoB;IACxB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,KAAK,CAAoC;IACjD,OAAO,CAAC,UAAU,CAAoC;IACtD,OAAO,CAAC,UAAU,CAAoC;IACtD,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,OAAO,CAAoB;IACnC,OAAO,CAAC,kBAAkB,CAAQ;IAClC,OAAO,CAAC,SAAS,CAAyD;IAC1E,OAAO,CAAC,QAAQ,CAAoC;IAEpD,OAAO,CAAC,eAAe;IAMvB,SAAS,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI;IAQ9D,QAAQ;;;;IAOR,QAAQ,CAAC,KAAK,EAAE,MAAM;IAItB,SAAS,CAAC,MAAM,EAAE,MAAM;IAIxB,UAAU,CAAC,GAAG,EAAE,GAAG;IAInB,aAAa,CAAC,MAAM,EAAE,MAAM;IAI5B,qBAAqB,CAAC,OAAO,EAAE,OAAO;IAItC,eAAe,CAAC,KAAK,EAAE,MAAM;IAM7B,mBAAmB,CACjB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,EAC1B,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,EAC/B,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,EAC/B,YAAY,EAAE,MAAM;IAQtB,iBAAiB;IAIjB,WAAW,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC;IAIzC;;;;;;;;;;;;;OAaG;IACH,MAAM,GAAI,QAAO,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAQ,EAAE,mBAAgB,UA2B9D;IAEF;;;;OAIG;IACH,MAAM,GAAI,mBAAiB,UAoBzB;IAEF;;;;OAIG;IACH,OAAO,GAAI,mBAAiB,UA0B1B;IAEF;;;OAGG;IACH,SAAS,GAAI,cAAS,UAQpB;IAEF,SAAS,GAAI,OAAO,MAAM,UAcxB;IAEF,YAAY,aAIV;IAEF,QAAQ,aAIN;IAEF,OAAO;CAaR;AAED,eAAe,oBAAoB,CAAC"}

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;AAElD,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;;;;;;;;iCAqIf,oBAAoB,CAAC,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;CAmPlD,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

@@ -2,6 +2,10 @@ 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;
+    rotate: (angle?: 0 | 90 | 180 | 270 | 360, clockwise?: boolean) => void;
     currentIndex: number;
     totalCount: number;
 };

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;;;;;;CA0CxD,CAAC"}
+{"version":3,"file":"useGestureViewerController.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewerController.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,0BAA0B,GAAI,WAAc;;;;;;;;;;CA8CxD,CAAC"}

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

@@ -2,4 +2,15 @@ import type { FlatListComponent, ScrollViewComponent } from './types';
 export declare const isScrollViewLike: (component: any) => component is ScrollViewComponent;
 export declare const isFlatListLike: (component: any) => component is FlatListComponent;
 export declare const isFlashListLike: (component: any) => component is any;
+export declare const createBoundsConstraint: ({ width, height }: {
+    width: number;
+    height: number;
+}) => ({ scale, translateX, translateY }: {
+    translateX: number;
+    translateY: number;
+    scale: number;
+}) => {
+    translateX: number;
+    translateY: number;
+};
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEtE,eAAO,MAAM,gBAAgB,GAAI,WAAW,GAAG,KAAG,SAAS,IAAI,mBAE9D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,WAAW,GAAG,KAAG,SAAS,IAAI,iBAM5D,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,WAAW,GAAG,KAAG,SAAS,IAAI,GAY7D,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEtE,eAAO,MAAM,gBAAgB,GAAI,WAAW,GAAG,KAAG,SAAS,IAAI,mBAE9D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,WAAW,GAAG,KAAG,SAAS,IAAI,iBAM5D,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,WAAW,GAAG,KAAG,SAAS,IAAI,GAY7D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAChC,mBAAmB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,MACpD,mCAAmC;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE;;;CAiB5F,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-image-viewer",
-  "version": "1.2.3",
+  "version": "1.4.0",
   "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,3 +1,6 @@
+import { type SharedValue, withTiming } from 'react-native-reanimated';
+import { createBoundsConstraint } from './utils';
+
 export type GestureViewerManagerState = {
   currentIndex: number;
   dataLength: number;
@@ -7,14 +10,15 @@ class GestureViewerManager {
   private currentIndex = 0;
   private dataLength = 0;
   private width = 0;
+  private height = 0;
+  private scale: SharedValue<number> | null = null;
+  private translateX: SharedValue<number> | null = null;
+  private translateY: SharedValue<number> | null = null;
+  private maxZoomScale = 2;
   private listRef: any | null = null;
   private enableSwipeGesture = true;
   private listeners = new Set<(state: GestureViewerManagerState) => void>();
-
-  // private updateState(newState: Partial<any>) {
-  //   Object.assign(this, newState);
-  //   this.notifyListeners();
-  // }
+  private rotation: SharedValue<number> | null = null;
 
   private notifyListeners() {
     const state = this.getState();
@@ -41,6 +45,10 @@ class GestureViewerManager {
     this.width = width;
   }
 
+  setHeight(height: number) {
+    this.height = height;
+  }
+
   setListRef(ref: any) {
     this.listRef = ref;
   }
@@ -59,10 +67,143 @@ class GestureViewerManager {
     }
   }
 
+  setZoomSharedValues(
+    scale: SharedValue<number>,
+    translateX: SharedValue<number>,
+    translateY: SharedValue<number>,
+    maxZoomScale: number,
+  ) {
+    this.scale = scale;
+    this.translateX = translateX;
+    this.translateY = translateY;
+    this.maxZoomScale = maxZoomScale;
+  }
+
   notifyStateChange() {
     this.notifyListeners();
   }
 
+  setRotation(rotation: SharedValue<number>) {
+    this.rotation = rotation;
+  }
+
+  /**
+   * @param angle - The angle to rotate.
+   * @default 90 (0, 90, 180, 270, 360)
+   * @param clockwise - The direction to rotate.
+   * @default true (clockwise)
+   *
+   * @example
+   * rotate(0) // reset rotation
+   * rotate(number, false) // rotate {number} degrees counter-clockwise
+   * rotate(90) // rotate 90 degrees clockwise
+   * rotate(180) // rotate 180 degrees clockwise
+   * rotate(270) // rotate 270 degrees clockwise
+   * rotate(360) // rotate 360 degrees clockwise
+   */
+  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);
+  };
+
+  /**
+   * @param multiplier - The multiplier to zoom in.
+   * @range 0.01 - 1
+   * @default 0.25
+   */
+  zoomIn = (multiplier = 0.25) => {
+    if (!this.scale || !this.translateX || !this.translateY || multiplier < 0.01 || multiplier > 1) {
+      return;
+    }
+
+    const nextScale = Math.min(this.scale.value * (1 + multiplier), this.maxZoomScale);
+
+    this.scale.value = withTiming(nextScale);
+
+    const { translateX, translateY } = createBoundsConstraint({
+      width: this.width,
+      height: this.height,
+    })({
+      translateX: this.translateX.value,
+      translateY: this.translateY.value,
+      scale: nextScale,
+    });
+
+    this.translateX.value = withTiming(translateX);
+    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;
+    }
+
+    const nextScale = Math.max(this.scale.value / (1 + multiplier), 1);
+
+    this.scale.value = withTiming(nextScale);
+
+    if (nextScale === 1) {
+      this.translateX.value = withTiming(0);
+      this.translateY.value = withTiming(0);
+      return;
+    }
+
+    const { translateX, translateY } = createBoundsConstraint({
+      width: this.width,
+      height: this.height,
+    })({
+      translateX: this.translateX.value,
+      translateY: this.translateY.value,
+      scale: nextScale,
+    });
+
+    this.translateX.value = withTiming(translateX);
+    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;
+    }
+
+    this.scale.value = withTiming(scale);
+    this.translateX.value = withTiming(0);
+    this.translateY.value = withTiming(0);
+  };
+
   goToIndex = (index: number) => {
     if (index < 0 || index >= this.dataLength || !this.enableSwipeGesture || !this.listRef) {
       return;
@@ -97,6 +238,12 @@ class GestureViewerManager {
     this.enableSwipeGesture = true;
     this.currentIndex = 0;
     this.dataLength = 0;
+
+    this.maxZoomScale = 2;
+    this.scale = null;
+    this.translateX = null;
+    this.translateY = null;
+    this.rotation = null;
   }
 }