react-native-rectangle-doc-scanner 3.94.0 → 3.96.0

package/dist/FullDocScanner.d.ts

@@ -8,8 +8,6 @@ export interface FullDocScannerResult {
     base64?: string;
     /** Original captured document info */
     original?: CapturedDocument;
-    /** Rotation degrees (0, 90, 180, 270) */
-    rotation?: number;
 }
 export interface FullDocScannerStrings {
     captureHint?: string;

package/dist/FullDocScanner.js

@@ -41,6 +41,7 @@ const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_image_picker_1 = require("react-native-image-picker");
 const react_native_image_crop_picker_1 = __importDefault(require("react-native-image-crop-picker"));
+const react_native_image_rotate_1 = __importDefault(require("react-native-image-rotate"));
 const DocScanner_1 = require("./DocScanner");
 const stripFileUri = (value) => value.replace(/^file:\/\//, '');
 const CROPPER_TIMEOUT_MS = 8000;
@@ -332,11 +333,30 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const handleRotateImage = (0, react_1.useCallback)((degrees) => {
         if (!croppedImageData)
             return;
-        // UI에서만 회전 (실제 파일은 confirm 시에 처리)
+        // UI 회전 상태 먼저 업데이트 (즉각 반응)
         setRotationDegrees(prev => {
             const newRotation = (prev + degrees + 360) % 360;
             return newRotation;
         });
+        console.log('[FullDocScanner] Starting image rotation...');
+        // ImageRotate를 사용해서 실제로 이미지 회전 (callback 기반)
+        react_native_image_rotate_1.default.rotateImage(croppedImageData.path, degrees, (rotatedImagePath) => {
+            console.log('[FullDocScanner] Image rotated successfully:', rotatedImagePath);
+            // 회전된 이미지로 교체
+            setCroppedImageData({
+                path: rotatedImagePath,
+                base64: undefined, // base64는 다시 읽어야 함
+            });
+            // rotation degrees는 0으로 리셋 (이미 실제 파일에 적용되었으므로)
+            setRotationDegrees(0);
+        }, (error) => {
+            console.error('[FullDocScanner] Image rotation error:', error);
+            // 에러 발생 시 UI rotation 원복
+            setRotationDegrees(prev => {
+                const revertRotation = (prev - degrees + 360) % 360;
+                return revertRotation;
+            });
+        });
     }, [croppedImageData]);
     const handleConfirm = (0, react_1.useCallback)(() => {
         if (!croppedImageData)
@@ -344,9 +364,8 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         onResult({
             path: croppedImageData.path,
             base64: croppedImageData.base64,
-            rotation: rotationDegrees !== 0 ? rotationDegrees : undefined,
         });
-    }, [croppedImageData, rotationDegrees, onResult]);
+    }, [croppedImageData, onResult]);
     const handleRetake = (0, react_1.useCallback)(() => {
         console.log('[FullDocScanner] Retake - clearing cropped image and resetting scanner');
         setCroppedImageData(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "3.94.0",
+  "version": "3.96.0",
   "description": "Native-backed document scanner for React Native with customizable overlays.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -33,15 +33,19 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-image-picker": "*",
     "react-native-image-crop-picker": "*",
+    "react-native-image-picker": "*",
+    "react-native-image-rotate": "*",
     "react-native-svg": "*"
   },
   "devDependencies": {
     "@types/react": "^18.2.41",
     "@types/react-native": "0.73.0",
-    "react-native-image-picker": "^7.1.2",
     "react-native-image-crop-picker": "^0.41.2",
+    "react-native-image-picker": "^7.1.2",
     "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "react-native-image-rotate": "^2.1.0"
   }
 }

package/src/FullDocScanner.tsx

@@ -11,6 +11,7 @@ import {
 } from 'react-native';
 import { launchImageLibrary } from 'react-native-image-picker';
 import ImageCropPicker from 'react-native-image-crop-picker';
+import ImageRotate from 'react-native-image-rotate';
 import { DocScanner } from './DocScanner';
 import type { CapturedDocument } from './types';
 import type {
@@ -102,8 +103,6 @@ export interface FullDocScannerResult {
   base64?: string;
   /** Original captured document info */
   original?: CapturedDocument;
-  /** Rotation degrees (0, 90, 180, 270) */
-  rotation?: number;
 }
 
 export interface FullDocScannerStrings {
@@ -445,11 +444,39 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   const handleRotateImage = useCallback((degrees: -90 | 90) => {
     if (!croppedImageData) return;
 
-    // UI에서만 회전 (실제 파일은 confirm 시에 처리)
+    // UI 회전 상태 먼저 업데이트 (즉각 반응)
     setRotationDegrees(prev => {
       const newRotation = (prev + degrees + 360) % 360;
       return newRotation;
     });
+
+    console.log('[FullDocScanner] Starting image rotation...');
+
+    // ImageRotate를 사용해서 실제로 이미지 회전 (callback 기반)
+    ImageRotate.rotateImage(
+      croppedImageData.path,
+      degrees,
+      (rotatedImagePath: string) => {
+        console.log('[FullDocScanner] Image rotated successfully:', rotatedImagePath);
+
+        // 회전된 이미지로 교체
+        setCroppedImageData({
+          path: rotatedImagePath,
+          base64: undefined, // base64는 다시 읽어야 함
+        });
+
+        // rotation degrees는 0으로 리셋 (이미 실제 파일에 적용되었으므로)
+        setRotationDegrees(0);
+      },
+      (error: Error) => {
+        console.error('[FullDocScanner] Image rotation error:', error);
+        // 에러 발생 시 UI rotation 원복
+        setRotationDegrees(prev => {
+          const revertRotation = (prev - degrees + 360) % 360;
+          return revertRotation;
+        });
+      }
+    );
   }, [croppedImageData]);
 
   const handleConfirm = useCallback(() => {
@@ -458,9 +485,8 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     onResult({
       path: croppedImageData.path,
       base64: croppedImageData.base64,
-      rotation: rotationDegrees !== 0 ? rotationDegrees : undefined,
     });
-  }, [croppedImageData, rotationDegrees, onResult]);
+  }, [croppedImageData, onResult]);
 
   const handleRetake = useCallback(() => {
     console.log('[FullDocScanner] Retake - clearing cropped image and resetting scanner');

package/src/types/react-native-image-rotate.d.ts

@@ -0,0 +1,10 @@
+declare module 'react-native-image-rotate' {
+  export default class ImageRotate {
+    static rotateImage(
+      imagePath: string,
+      degrees: number,
+      successCallback: (rotatedImagePath: string) => void,
+      errorCallback: (error: Error) => void,
+    ): void;
+  }
+}