react-native-rectangle-doc-scanner 3.121.0 → 3.123.0

package/dist/FullDocScanner.js

@@ -125,6 +125,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const [rotationDegrees, setRotationDegrees] = (0, react_1.useState)(0);
     const [capturedPhotos, setCapturedPhotos] = (0, react_1.useState)([]);
     const [currentPhotoIndex, setCurrentPhotoIndex] = (0, react_1.useState)(0);
+    const [scannerSession, setScannerSession] = (0, react_1.useState)(0);
     const resolvedGridColor = gridColor ?? overlayColor;
     const docScannerRef = (0, react_1.useRef)(null);
     const captureModeRef = (0, react_1.useRef)(null);
@@ -132,6 +133,29 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const rectangleCaptureTimeoutRef = (0, react_1.useRef)(null);
     const rectangleHintTimeoutRef = (0, react_1.useRef)(null);
     const isBusinessMode = type === 'business';
+    const resetScannerView = (0, react_1.useCallback)((options) => {
+        setProcessing(false);
+        setCroppedImageData(null);
+        setRotationDegrees(0);
+        setRectangleDetected(false);
+        setRectangleHint(false);
+        captureModeRef.current = null;
+        captureInProgressRef.current = false;
+        if (rectangleCaptureTimeoutRef.current) {
+            clearTimeout(rectangleCaptureTimeoutRef.current);
+            rectangleCaptureTimeoutRef.current = null;
+        }
+        if (rectangleHintTimeoutRef.current) {
+            clearTimeout(rectangleHintTimeoutRef.current);
+            rectangleHintTimeoutRef.current = null;
+        }
+        if (docScannerRef.current?.reset) {
+            docScannerRef.current.reset();
+        }
+        if (options?.remount) {
+            setScannerSession((prev) => prev + 1);
+        }
+    }, []);
     const mergedStrings = (0, react_1.useMemo)(() => ({
         captureHint: strings?.captureHint,
         manualHint: strings?.manualHint,
@@ -191,37 +215,28 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             });
         }
         catch (error) {
-            console.error('[FullDocScanner] openCropper error:', error);
-            setProcessing(false);
-            // Reset capture state when cropper fails or is cancelled
-            captureInProgressRef.current = false;
-            captureModeRef.current = null;
-            setRectangleDetected(false);
-            setRectangleHint(false);
-            if (docScannerRef.current?.reset) {
-                docScannerRef.current.reset();
-            }
+            resetScannerView({ remount: true });
             const errorCode = error?.code;
-            const errorMessage = error?.message || String(error);
+            const errorMessageRaw = error?.message ?? String(error);
+            const errorMessage = typeof errorMessageRaw === 'string' ? errorMessageRaw : String(errorMessageRaw);
+            const normalizedMessage = errorMessage.toLowerCase();
+            const isUserCancelled = errorCode === 'E_PICKER_CANCELLED' ||
+                normalizedMessage === 'user cancelled image selection' ||
+                normalizedMessage.includes('cancel');
+            if (isUserCancelled) {
+                console.log('[FullDocScanner] User cancelled cropper');
+                return;
+            }
+            console.error('[FullDocScanner] openCropper error:', error);
             if (errorCode === CROPPER_TIMEOUT_CODE || errorMessage === CROPPER_TIMEOUT_CODE) {
                 console.error('[FullDocScanner] Cropper timed out waiting for presentation');
                 emitError(error instanceof Error ? error : new Error('Cropper timed out'), 'Failed to open crop editor. Please try again.');
             }
-            else if (errorCode === 'E_PICKER_CANCELLED' ||
-                errorMessage === 'User cancelled image selection' ||
-                errorMessage.includes('cancelled') ||
-                errorMessage.includes('cancel')) {
-                console.log('[FullDocScanner] User cancelled cropper');
-                // DocScanner 상태를 리셋하여 카메라가 다시 작동하도록 함
-                if (docScannerRef.current?.reset) {
-                    docScannerRef.current.reset();
-                }
-            }
             else {
                 emitError(error instanceof Error ? error : new Error(errorMessage), 'Failed to crop image. Please try again.');
             }
         }
-    }, [cropWidth, cropHeight, emitError]);
+    }, [cropWidth, cropHeight, emitError, resetScannerView]);
     const handleCapture = (0, react_1.useCallback)(async (document) => {
         console.log('[FullDocScanner] handleCapture called:', {
             origin: document.origin,
@@ -420,25 +435,8 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         setCapturedPhotos([currentPhoto]);
         setCurrentPhotoIndex(1);
         // 확인 화면을 닫고 카메라로 돌아감
-        setCroppedImageData(null);
-        setRotationDegrees(0);
-        setProcessing(false);
-        setRectangleDetected(false);
-        setRectangleHint(false);
-        captureModeRef.current = null;
-        captureInProgressRef.current = false;
-        if (rectangleCaptureTimeoutRef.current) {
-            clearTimeout(rectangleCaptureTimeoutRef.current);
-            rectangleCaptureTimeoutRef.current = null;
-        }
-        if (rectangleHintTimeoutRef.current) {
-            clearTimeout(rectangleHintTimeoutRef.current);
-            rectangleHintTimeoutRef.current = null;
-        }
-        if (docScannerRef.current?.reset) {
-            docScannerRef.current.reset();
-        }
-    }, [croppedImageData, rotationDegrees]);
+        resetScannerView({ remount: true });
+    }, [croppedImageData, resetScannerView, rotationDegrees]);
     const handleRetake = (0, react_1.useCallback)(() => {
         console.log('[FullDocScanner] Retake - clearing cropped image and resetting scanner');
         // Business 모드에서 두 번째 사진을 다시 찍는 경우, 첫 번째 사진 유지
@@ -452,26 +450,8 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             setCapturedPhotos([]);
             setCurrentPhotoIndex(0);
         }
-        setCroppedImageData(null);
-        setRotationDegrees(0);
-        setProcessing(false);
-        setRectangleDetected(false);
-        setRectangleHint(false);
-        captureModeRef.current = null;
-        captureInProgressRef.current = false;
-        if (rectangleCaptureTimeoutRef.current) {
-            clearTimeout(rectangleCaptureTimeoutRef.current);
-            rectangleCaptureTimeoutRef.current = null;
-        }
-        if (rectangleHintTimeoutRef.current) {
-            clearTimeout(rectangleHintTimeoutRef.current);
-            rectangleHintTimeoutRef.current = null;
-        }
-        // Reset DocScanner state
-        if (docScannerRef.current?.reset) {
-            docScannerRef.current.reset();
-        }
-    }, [capturedPhotos.length, isBusinessMode]);
+        resetScannerView({ remount: true });
+    }, [capturedPhotos.length, isBusinessMode, resetScannerView]);
     const handleRectangleDetect = (0, react_1.useCallback)((event) => {
         const stableCounter = event.stableCounter ?? 0;
         const rectangleCoordinates = event.rectangleOnScreen ?? event.rectangleCoordinates;
@@ -549,7 +529,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                     react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.retake)),
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.confirmButtonPrimary], onPress: handleConfirm, accessibilityLabel: mergedStrings.confirm, accessibilityRole: "button" },
                     react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.confirm))))) : (react_1.default.createElement(react_native_1.View, { style: styles.flex },
-            react_1.default.createElement(DocScanner_1.DocScanner, { ref: docScannerRef, autoCapture: false, overlayColor: overlayColor, showGrid: showGrid, gridColor: resolvedGridColor, gridLineWidth: gridLineWidth, minStableFrames: minStableFrames ?? 6, detectionConfig: detectionConfig, onCapture: handleCapture, onRectangleDetect: handleRectangleDetect, showManualCaptureButton: false, enableTorch: flashEnabled },
+            react_1.default.createElement(DocScanner_1.DocScanner, { key: scannerSession, ref: docScannerRef, autoCapture: false, overlayColor: overlayColor, showGrid: showGrid, gridColor: resolvedGridColor, gridLineWidth: gridLineWidth, minStableFrames: minStableFrames ?? 6, detectionConfig: detectionConfig, onCapture: handleCapture, onRectangleDetect: handleRectangleDetect, showManualCaptureButton: false, enableTorch: flashEnabled },
                 react_1.default.createElement(react_native_1.View, { style: styles.overlayTop, pointerEvents: "box-none" },
                     react_1.default.createElement(react_native_1.TouchableOpacity, { style: [
                             styles.iconButton,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "3.121.0",
+  "version": "3.123.0",
   "description": "Native-backed document scanner for React Native with customizable overlays.",
   "license": "MIT",
   "main": "dist/index.js",

package/src/FullDocScanner.tsx

@@ -183,6 +183,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   const [rotationDegrees, setRotationDegrees] = useState(0);
   const [capturedPhotos, setCapturedPhotos] = useState<FullDocScannerResult[]>([]);
   const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
+  const [scannerSession, setScannerSession] = useState(0);
   const resolvedGridColor = gridColor ?? overlayColor;
   const docScannerRef = useRef<DocScannerHandle | null>(null);
   const captureModeRef = useRef<'grid' | 'no-grid' | null>(null);
@@ -192,6 +193,37 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
 
   const isBusinessMode = type === 'business';
 
+  const resetScannerView = useCallback(
+    (options?: { remount?: boolean }) => {
+      setProcessing(false);
+      setCroppedImageData(null);
+      setRotationDegrees(0);
+      setRectangleDetected(false);
+      setRectangleHint(false);
+      captureModeRef.current = null;
+      captureInProgressRef.current = false;
+
+      if (rectangleCaptureTimeoutRef.current) {
+        clearTimeout(rectangleCaptureTimeoutRef.current);
+        rectangleCaptureTimeoutRef.current = null;
+      }
+
+      if (rectangleHintTimeoutRef.current) {
+        clearTimeout(rectangleHintTimeoutRef.current);
+        rectangleHintTimeoutRef.current = null;
+      }
+
+      if (docScannerRef.current?.reset) {
+        docScannerRef.current.reset();
+      }
+
+      if (options?.remount) {
+        setScannerSession((prev) => prev + 1);
+      }
+    },
+    [],
+  );
+
   const mergedStrings = useMemo(
     () => ({
       captureHint: strings?.captureHint,
@@ -268,20 +300,24 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
           base64: croppedImage.data ?? undefined,
         });
       } catch (error) {
-        console.error('[FullDocScanner] openCropper error:', error);
-        setProcessing(false);
+        resetScannerView({ remount: true });
 
-        // Reset capture state when cropper fails or is cancelled
-        captureInProgressRef.current = false;
-        captureModeRef.current = null;
-        setRectangleDetected(false);
-        setRectangleHint(false);
-        if (docScannerRef.current?.reset) {
-          docScannerRef.current.reset();
+        const errorCode = (error as any)?.code;
+        const errorMessageRaw = (error as any)?.message ?? String(error);
+        const errorMessage =
+          typeof errorMessageRaw === 'string' ? errorMessageRaw : String(errorMessageRaw);
+        const normalizedMessage = errorMessage.toLowerCase();
+        const isUserCancelled =
+          errorCode === 'E_PICKER_CANCELLED' ||
+          normalizedMessage === 'user cancelled image selection' ||
+          normalizedMessage.includes('cancel');
+
+        if (isUserCancelled) {
+          console.log('[FullDocScanner] User cancelled cropper');
+          return;
         }
 
-        const errorCode = (error as any)?.code;
-        const errorMessage = (error as any)?.message || String(error);
+        console.error('[FullDocScanner] openCropper error:', error);
 
         if (errorCode === CROPPER_TIMEOUT_CODE || errorMessage === CROPPER_TIMEOUT_CODE) {
           console.error('[FullDocScanner] Cropper timed out waiting for presentation');
@@ -289,17 +325,6 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
             error instanceof Error ? error : new Error('Cropper timed out'),
             'Failed to open crop editor. Please try again.',
           );
-        } else if (
-          errorCode === 'E_PICKER_CANCELLED' ||
-          errorMessage === 'User cancelled image selection' ||
-          errorMessage.includes('cancelled') ||
-          errorMessage.includes('cancel')
-        ) {
-          console.log('[FullDocScanner] User cancelled cropper');
-          // DocScanner 상태를 리셋하여 카메라가 다시 작동하도록 함
-          if (docScannerRef.current?.reset) {
-            docScannerRef.current.reset();
-          }
         } else {
           emitError(
             error instanceof Error ? error : new Error(errorMessage),
@@ -308,7 +333,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
         }
       }
     },
-    [cropWidth, cropHeight, emitError],
+    [cropWidth, cropHeight, emitError, resetScannerView],
   );
 
   const handleCapture = useCallback(
@@ -563,25 +588,8 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     setCurrentPhotoIndex(1);
 
     // 확인 화면을 닫고 카메라로 돌아감
-    setCroppedImageData(null);
-    setRotationDegrees(0);
-    setProcessing(false);
-    setRectangleDetected(false);
-    setRectangleHint(false);
-    captureModeRef.current = null;
-    captureInProgressRef.current = false;
-    if (rectangleCaptureTimeoutRef.current) {
-      clearTimeout(rectangleCaptureTimeoutRef.current);
-      rectangleCaptureTimeoutRef.current = null;
-    }
-    if (rectangleHintTimeoutRef.current) {
-      clearTimeout(rectangleHintTimeoutRef.current);
-      rectangleHintTimeoutRef.current = null;
-    }
-    if (docScannerRef.current?.reset) {
-      docScannerRef.current.reset();
-    }
-  }, [croppedImageData, rotationDegrees]);
+    resetScannerView({ remount: true });
+  }, [croppedImageData, resetScannerView, rotationDegrees]);
 
 
   const handleRetake = useCallback(() => {
@@ -598,26 +606,8 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       setCurrentPhotoIndex(0);
     }
 
-    setCroppedImageData(null);
-    setRotationDegrees(0);
-    setProcessing(false);
-    setRectangleDetected(false);
-    setRectangleHint(false);
-    captureModeRef.current = null;
-    captureInProgressRef.current = false;
-    if (rectangleCaptureTimeoutRef.current) {
-      clearTimeout(rectangleCaptureTimeoutRef.current);
-      rectangleCaptureTimeoutRef.current = null;
-    }
-    if (rectangleHintTimeoutRef.current) {
-      clearTimeout(rectangleHintTimeoutRef.current);
-      rectangleHintTimeoutRef.current = null;
-    }
-    // Reset DocScanner state
-    if (docScannerRef.current?.reset) {
-      docScannerRef.current.reset();
-    }
-  }, [capturedPhotos.length, isBusinessMode]);
+    resetScannerView({ remount: true });
+  }, [capturedPhotos.length, isBusinessMode, resetScannerView]);
 
   const handleRectangleDetect = useCallback((event: RectangleDetectEvent) => {
     const stableCounter = event.stableCounter ?? 0;
@@ -780,6 +770,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       ) : (
         <View style={styles.flex}>
           <DocScanner
+            key={scannerSession}
             ref={docScannerRef}
             autoCapture={false}
             overlayColor={overlayColor}