react-native-rectangle-doc-scanner 3.104.0 → 3.106.0

package/README.md

@@ -120,7 +120,7 @@ Manual capture exposes an imperative `capture()` method via `ref`. Children rend
 ## Convenience APIs
 
 - `CropEditor` – wraps `react-native-perspective-image-cropper` for manual corner adjustment.
-- `FullDocScanner` – puts the scanner and crop editor into a single modal-like flow.
+- `FullDocScanner` – puts the scanner and crop editor into a single modal-like flow. If the host app has the `expo-image-manipulator` native module installed, the confirmation screen exposes 90° rotation buttons; otherwise rotation controls remain hidden.
 
 ## License
 

package/SETUP.md

@@ -117,6 +117,8 @@ function MyComponent() {
 }
 ```
 
+> 참고: 최종 확인 화면의 회전 버튼은 프로젝트에 `expo-image-manipulator` 네이티브 모듈이 설치되어 있을 때만 노출됩니다. 모듈이 없으면 버튼이 자동으로 숨겨지고 원본 각도로 결과가 반환됩니다.
+
 ## API 변경사항
 
 ### FullDocScannerResult (변경됨)

package/dist/FullDocScanner.js

@@ -42,8 +42,15 @@ 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_fs_1 = __importDefault(require("react-native-fs"));
-const ImageManipulator = __importStar(require("expo-image-manipulator"));
 const DocScanner_1 = require("./DocScanner");
+let ImageManipulator = null;
+try {
+    ImageManipulator = require('expo-image-manipulator');
+}
+catch (error) {
+    console.warn('[FullDocScanner] expo-image-manipulator module unavailable. Image rotation will be disabled.', error);
+}
+const isImageRotationSupported = !!ImageManipulator?.manipulateAsync;
 const stripFileUri = (value) => value.replace(/^file:\/\//, '');
 const CROPPER_TIMEOUT_MS = 8000;
 const CROPPER_TIMEOUT_CODE = 'cropper_timeout';
@@ -345,8 +352,12 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         setFlashEnabled(prev => !prev);
     }, []);
     const handleRotateImage = (0, react_1.useCallback)((degrees) => {
+        if (!isImageRotationSupported) {
+            console.warn('[FullDocScanner] Image rotation requested but expo-image-manipulator is unavailable.');
+            return;
+        }
         // UI만 회전 (실제 파일 회전은 confirm 시 처리)
-        setRotationDegrees(prev => {
+        setRotationDegrees((prev) => {
             const newRotation = prev + degrees;
             // -360 ~ 360 범위로 정규화
             if (newRotation <= -360)
@@ -357,28 +368,39 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         });
     }, []);
     const handleConfirm = (0, react_1.useCallback)(async () => {
-        if (!croppedImageData)
+        if (!croppedImageData) {
             return;
-        // 회전이 없으면 기존 데이터 그대로 전달
-        if (rotationDegrees === 0) {
+        }
+        // 회전이 없거나 모듈을 사용할 수 없으면 기존 데이터 그대로 전달
+        if (rotationDegrees === 0 || !isImageRotationSupported || !ImageManipulator) {
+            if (rotationDegrees !== 0 && !isImageRotationSupported) {
+                console.warn('[FullDocScanner] Confirm requested with rotation but expo-image-manipulator is unavailable. Returning original image.');
+            }
             onResult({
                 path: croppedImageData.path,
                 base64: croppedImageData.base64,
             });
             return;
         }
-        // 회전이 있으면 실제 파일 회전 처리
         try {
             setProcessing(true);
             // 회전 각도 정규화 (0, 90, 180, 270)
             const rotationNormalized = ((rotationDegrees % 360) + 360) % 360;
+            const manipulator = ImageManipulator;
+            if (!manipulator?.manipulateAsync) {
+                console.warn('[FullDocScanner] expo-image-manipulator is unavailable at runtime. Returning original image.');
+                onResult({
+                    path: croppedImageData.path,
+                    base64: croppedImageData.base64,
+                });
+                return;
+            }
             // expo-image-manipulator로 이미지 회전
-            const result = await ImageManipulator.manipulateAsync(croppedImageData.path, [{ rotate: rotationNormalized }], {
+            const result = await manipulator.manipulateAsync(croppedImageData.path, [{ rotate: rotationNormalized }], {
                 compress: 0.9,
-                format: ImageManipulator.SaveFormat.JPEG,
+                format: manipulator.SaveFormat.JPEG,
                 base64: true,
             });
-            setProcessing(false);
             // 회전된 이미지로 결과 전달
             onResult({
                 path: result.uri,
@@ -387,10 +409,12 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         }
         catch (error) {
             console.error('[FullDocScanner] Image rotation error on confirm:', error);
-            setProcessing(false);
             const errorMessage = error && typeof error === 'object' && 'message' in error ? error.message : '';
             react_native_1.Alert.alert('회전 실패', '이미지 회전 중 오류가 발생했습니다: ' + errorMessage);
         }
+        finally {
+            setProcessing(false);
+        }
     }, [croppedImageData, rotationDegrees, onResult]);
     const handleRetake = (0, react_1.useCallback)(() => {
         console.log('[FullDocScanner] Retake - clearing cropped image and resetting scanner');
@@ -466,13 +490,13 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         croppedImageData ? (
         // check_DP: Show confirmation screen
         react_1.default.createElement(react_native_1.View, { style: styles.confirmationContainer },
-            react_1.default.createElement(react_native_1.View, { style: styles.rotateButtonsCenter },
+            isImageRotationSupported ? (react_1.default.createElement(react_native_1.View, { style: styles.rotateButtonsCenter },
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonTop, onPress: () => handleRotateImage(-90), accessibilityLabel: "\uC67C\uCABD\uC73C\uB85C 90\uB3C4 \uD68C\uC804", accessibilityRole: "button" },
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateIconText }, "\u21BA"),
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateButtonLabel }, "\uC88C\uB85C 90\u00B0")),
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonTop, onPress: () => handleRotateImage(90), accessibilityLabel: "\uC624\uB978\uCABD\uC73C\uB85C 90\uB3C4 \uD68C\uC804", accessibilityRole: "button" },
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateIconText }, "\u21BB"),
-                    react_1.default.createElement(react_native_1.Text, { style: styles.rotateButtonLabel }, "\uC6B0\uB85C 90\u00B0"))),
+                    react_1.default.createElement(react_native_1.Text, { style: styles.rotateButtonLabel }, "\uC6B0\uB85C 90\u00B0")))) : null,
             react_1.default.createElement(react_native_1.Image, { source: { uri: croppedImageData.path }, style: [
                     styles.previewImage,
                     { transform: [{ rotate: `${rotationDegrees}deg` }] }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "3.104.0",
+  "version": "3.106.0",
   "description": "Native-backed document scanner for React Native with customizable overlays.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -36,7 +36,8 @@
     "react-native-fs": "*",
     "react-native-image-crop-picker": "*",
     "react-native-image-picker": "*",
-    "react-native-svg": "*"
+    "react-native-svg": "*",
+    "expo-modules-core": "*"
   },
   "devDependencies": {
     "@types/react": "^18.2.41",
@@ -47,7 +48,6 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "expo-image-manipulator": "^12.0.5",
-    "expo-modules-core": "^2.1.0"
+    "expo-image-manipulator": "^12.0.5"
   }
 }

package/src/FullDocScanner.tsx

@@ -12,7 +12,6 @@ import {
 import { launchImageLibrary } from 'react-native-image-picker';
 import ImageCropPicker from 'react-native-image-crop-picker';
 import RNFS from 'react-native-fs';
-import * as ImageManipulator from 'expo-image-manipulator';
 import { DocScanner } from './DocScanner';
 import type { CapturedDocument } from './types';
 import type {
@@ -22,6 +21,21 @@ import type {
   RectangleDetectEvent,
 } from './DocScanner';
 
+type ImageManipulatorModule = typeof import('expo-image-manipulator');
+
+let ImageManipulator: ImageManipulatorModule | null = null;
+
+try {
+  ImageManipulator = require('expo-image-manipulator') as ImageManipulatorModule;
+} catch (error) {
+  console.warn(
+    '[FullDocScanner] expo-image-manipulator module unavailable. Image rotation will be disabled.',
+    error,
+  );
+}
+
+const isImageRotationSupported = !!ImageManipulator?.manipulateAsync;
+
 const stripFileUri = (value: string) => value.replace(/^file:\/\//, '');
 
 const CROPPER_TIMEOUT_MS = 8000;
@@ -457,8 +471,15 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   }, []);
 
   const handleRotateImage = useCallback((degrees: -90 | 90) => {
+    if (!isImageRotationSupported) {
+      console.warn(
+        '[FullDocScanner] Image rotation requested but expo-image-manipulator is unavailable.',
+      );
+      return;
+    }
+
     // UI만 회전 (실제 파일 회전은 confirm 시 처리)
-    setRotationDegrees(prev => {
+    setRotationDegrees((prev) => {
       const newRotation = prev + degrees;
       // -360 ~ 360 범위로 정규화
       if (newRotation <= -360) return newRotation + 360;
@@ -468,10 +489,18 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   }, []);
 
   const handleConfirm = useCallback(async () => {
-    if (!croppedImageData) return;
+    if (!croppedImageData) {
+      return;
+    }
+
+    // 회전이 없거나 모듈을 사용할 수 없으면 기존 데이터 그대로 전달
+    if (rotationDegrees === 0 || !isImageRotationSupported || !ImageManipulator) {
+      if (rotationDegrees !== 0 && !isImageRotationSupported) {
+        console.warn(
+          '[FullDocScanner] Confirm requested with rotation but expo-image-manipulator is unavailable. Returning original image.',
+        );
+      }
 
-    // 회전이 없으면 기존 데이터 그대로 전달
-    if (rotationDegrees === 0) {
       onResult({
         path: croppedImageData.path,
         base64: croppedImageData.base64,
@@ -479,26 +508,36 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       return;
     }
 
-    // 회전이 있으면 실제 파일 회전 처리
     try {
       setProcessing(true);
 
       // 회전 각도 정규화 (0, 90, 180, 270)
       const rotationNormalized = ((rotationDegrees % 360) + 360) % 360;
 
+      const manipulator = ImageManipulator;
+
+      if (!manipulator?.manipulateAsync) {
+        console.warn(
+          '[FullDocScanner] expo-image-manipulator is unavailable at runtime. Returning original image.',
+        );
+        onResult({
+          path: croppedImageData.path,
+          base64: croppedImageData.base64,
+        });
+        return;
+      }
+
       // expo-image-manipulator로 이미지 회전
-      const result = await ImageManipulator.manipulateAsync(
+      const result = await manipulator.manipulateAsync(
         croppedImageData.path,
         [{ rotate: rotationNormalized }],
         {
           compress: 0.9,
-          format: ImageManipulator.SaveFormat.JPEG,
+          format: manipulator.SaveFormat.JPEG,
           base64: true,
-        }
+        },
       );
 
-      setProcessing(false);
-
       // 회전된 이미지로 결과 전달
       onResult({
         path: result.uri,
@@ -506,10 +545,12 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       });
     } catch (error) {
       console.error('[FullDocScanner] Image rotation error on confirm:', error);
-      setProcessing(false);
 
-      const errorMessage = error && typeof error === 'object' && 'message' in error ? (error as Error).message : '';
+      const errorMessage =
+        error && typeof error === 'object' && 'message' in error ? (error as Error).message : '';
       Alert.alert('회전 실패', '이미지 회전 중 오류가 발생했습니다: ' + errorMessage);
+    } finally {
+      setProcessing(false);
     }
   }, [croppedImageData, rotationDegrees, onResult]);
 
@@ -599,26 +640,28 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
         // check_DP: Show confirmation screen
         <View style={styles.confirmationContainer}>
           {/* 회전 버튼들 - 가운데 정렬 */}
-          <View style={styles.rotateButtonsCenter}>
-            <TouchableOpacity
-              style={styles.rotateButtonTop}
-              onPress={() => handleRotateImage(-90)}
-              accessibilityLabel="왼쪽으로 90도 회전"
-              accessibilityRole="button"
-            >
-              <Text style={styles.rotateIconText}>↺</Text>
-              <Text style={styles.rotateButtonLabel}>좌로 90°</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={styles.rotateButtonTop}
-              onPress={() => handleRotateImage(90)}
-              accessibilityLabel="오른쪽으로 90도 회전"
-              accessibilityRole="button"
-            >
-              <Text style={styles.rotateIconText}>↻</Text>
-              <Text style={styles.rotateButtonLabel}>우로 90°</Text>
-            </TouchableOpacity>
-          </View>
+          {isImageRotationSupported ? (
+            <View style={styles.rotateButtonsCenter}>
+              <TouchableOpacity
+                style={styles.rotateButtonTop}
+                onPress={() => handleRotateImage(-90)}
+                accessibilityLabel="왼쪽으로 90도 회전"
+                accessibilityRole="button"
+              >
+                <Text style={styles.rotateIconText}>↺</Text>
+                <Text style={styles.rotateButtonLabel}>좌로 90°</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={styles.rotateButtonTop}
+                onPress={() => handleRotateImage(90)}
+                accessibilityLabel="오른쪽으로 90도 회전"
+                accessibilityRole="button"
+              >
+                <Text style={styles.rotateIconText}>↻</Text>
+                <Text style={styles.rotateButtonLabel}>우로 90°</Text>
+              </TouchableOpacity>
+            </View>
+          ) : null}
           <Image
             source={{ uri: croppedImageData.path }}
             style={[