react-native-rectangle-doc-scanner 3.93.0 → 3.95.0

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;
@@ -329,53 +330,44 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const handleFlashToggle = (0, react_1.useCallback)(() => {
         setFlashEnabled(prev => !prev);
     }, []);
-    const handleRotateImage = (0, react_1.useCallback)((degrees) => {
+    const handleRotateImage = (0, react_1.useCallback)(async (degrees) => {
         if (!croppedImageData)
             return;
-        setRotationDegrees(prev => {
-            const newRotation = (prev + degrees + 360) % 360;
-            return newRotation;
-        });
-    }, [croppedImageData]);
-    const handleConfirm = (0, react_1.useCallback)(async () => {
-        if (!croppedImageData)
-            return;
-        // 회전이 필요한 경우 실제로 이미지를 회전
-        if (rotationDegrees !== 0) {
-            try {
-                const rotatedImage = await react_native_image_crop_picker_1.default.openCropper({
-                    path: croppedImageData.path,
-                    mediaType: 'photo',
-                    cropping: true,
-                    freeStyleCropEnabled: true,
-                    includeBase64: true,
-                    compressImageQuality: 0.9,
-                    cropperToolbarTitle: ' ',
-                    cropperChooseText: '완료',
-                    cropperCancelText: '취소',
-                    cropperRotateButtonsHidden: false,
-                });
-                onResult({
-                    path: rotatedImage.path,
-                    base64: rotatedImage.data ?? undefined,
-                });
-            }
-            catch (error) {
-                console.error('[FullDocScanner] Image rotation error:', error);
-                // 에러 발생 시 원본 이미지 전송
-                onResult({
-                    path: croppedImageData.path,
-                    base64: croppedImageData.base64,
-                });
-            }
+        try {
+            // UI 회전 상태 먼저 업데이트 (즉각 반응)
+            setRotationDegrees(prev => {
+                const newRotation = (prev + degrees + 360) % 360;
+                return newRotation;
+            });
+            console.log('[FullDocScanner] Starting image rotation...');
+            // ImageRotate를 사용해서 실제로 이미지 회전 (UI 없이)
+            const rotatedImagePath = await react_native_image_rotate_1.default.rotateImage(croppedImageData.path, degrees);
+            console.log('[FullDocScanner] Image rotated successfully:', rotatedImagePath);
+            // 회전된 이미지로 교체
+            setCroppedImageData({
+                path: rotatedImagePath,
+                base64: undefined, // base64는 다시 읽어야 함
+            });
+            // rotation degrees는 0으로 리셋 (이미 실제 파일에 적용되었으므로)
+            setRotationDegrees(0);
         }
-        else {
-            onResult({
-                path: croppedImageData.path,
-                base64: croppedImageData.base64,
+        catch (error) {
+            console.error('[FullDocScanner] Image rotation error:', error);
+            // 에러 발생 시 UI rotation 원복
+            setRotationDegrees(prev => {
+                const revertRotation = (prev - degrees + 360) % 360;
+                return revertRotation;
             });
         }
-    }, [croppedImageData, rotationDegrees, onResult]);
+    }, [croppedImageData]);
+    const handleConfirm = (0, react_1.useCallback)(() => {
+        if (!croppedImageData)
+            return;
+        onResult({
+            path: croppedImageData.path,
+            base64: croppedImageData.base64,
+        });
+    }, [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.93.0",
+  "version": "3.95.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 {
@@ -440,53 +441,52 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     setFlashEnabled(prev => !prev);
   }, []);
 
-  const handleRotateImage = useCallback((degrees: -90 | 90) => {
+  const handleRotateImage = useCallback(async (degrees: -90 | 90) => {
     if (!croppedImageData) return;
 
-    setRotationDegrees(prev => {
-      const newRotation = (prev + degrees + 360) % 360;
-      return newRotation;
-    });
-  }, [croppedImageData]);
+    try {
+      // UI 회전 상태 먼저 업데이트 (즉각 반응)
+      setRotationDegrees(prev => {
+        const newRotation = (prev + degrees + 360) % 360;
+        return newRotation;
+      });
 
-  const handleConfirm = useCallback(async () => {
-    if (!croppedImageData) return;
+      console.log('[FullDocScanner] Starting image rotation...');
 
-    // 회전이 필요한 경우 실제로 이미지를 회전
-    if (rotationDegrees !== 0) {
-      try {
-        const rotatedImage = await ImageCropPicker.openCropper({
-          path: croppedImageData.path,
-          mediaType: 'photo',
-          cropping: true,
-          freeStyleCropEnabled: true,
-          includeBase64: true,
-          compressImageQuality: 0.9,
-          cropperToolbarTitle: ' ',
-          cropperChooseText: '완료',
-          cropperCancelText: '취소',
-          cropperRotateButtonsHidden: false,
-        });
+      // ImageRotate를 사용해서 실제로 이미지 회전 (UI 없이)
+      const rotatedImagePath = await ImageRotate.rotateImage(
+        croppedImageData.path,
+        degrees,
+      );
 
-        onResult({
-          path: rotatedImage.path,
-          base64: rotatedImage.data ?? undefined,
-        });
-      } catch (error) {
-        console.error('[FullDocScanner] Image rotation error:', error);
-        // 에러 발생 시 원본 이미지 전송
-        onResult({
-          path: croppedImageData.path,
-          base64: croppedImageData.base64,
-        });
-      }
-    } else {
-      onResult({
-        path: croppedImageData.path,
-        base64: croppedImageData.base64,
+      console.log('[FullDocScanner] Image rotated successfully:', rotatedImagePath);
+
+      // 회전된 이미지로 교체
+      setCroppedImageData({
+        path: rotatedImagePath,
+        base64: undefined, // base64는 다시 읽어야 함
+      });
+
+      // rotation degrees는 0으로 리셋 (이미 실제 파일에 적용되었으므로)
+      setRotationDegrees(0);
+    } catch (error) {
+      console.error('[FullDocScanner] Image rotation error:', error);
+      // 에러 발생 시 UI rotation 원복
+      setRotationDegrees(prev => {
+        const revertRotation = (prev - degrees + 360) % 360;
+        return revertRotation;
       });
     }
-  }, [croppedImageData, rotationDegrees, onResult]);
+  }, [croppedImageData]);
+
+  const handleConfirm = useCallback(() => {
+    if (!croppedImageData) return;
+
+    onResult({
+      path: croppedImageData.path,
+      base64: croppedImageData.base64,
+    });
+  }, [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,8 @@
+declare module 'react-native-image-rotate' {
+  export default class ImageRotate {
+    static rotateImage(
+      imagePath: string,
+      degrees: number,
+    ): Promise<string>;
+  }
+}