react-native-rectangle-doc-scanner 13.8.0 → 13.11.0

package/android/src/common/kotlin/com/reactnativerectangledocscanner/DocumentDetector.kt

@@ -262,10 +262,10 @@ class DocumentDetector {
                     var largestRectangle: Rectangle? = null
                     var bestScore = 0.0
                     val imageArea = (srcMat.rows() * srcMat.cols()).toDouble()
-                    // Min: 2% of image (documents should be visible)
-                    // Max: 85% of image (avoid detecting screen borders)
-                    val minArea = max(350.0, imageArea * 0.02)
-                    val maxArea = imageArea * 0.85
+                    // Min: 5% of image (documents should be reasonably sized)
+                    // Max: 70% of image (avoid detecting screen borders)
+                    val minArea = max(350.0, imageArea * 0.05)
+                    val maxArea = imageArea * 0.70
 
                     debugStats.contours = contours.size
 
@@ -439,8 +439,10 @@ class DocumentDetector {
             if (width < minEdge || height < minEdge) {
                 return false
             }
+            // Stricter aspect ratio for typical documents (business cards, A4, etc.)
+            // Business cards: ~1.6, A4: ~0.7, allow range 0.5-2.2
             val aspect = if (height > 0) width / height else 0.0
-            if (aspect < 0.45 || aspect > 2.8) {
+            if (aspect < 0.5 || aspect > 2.2) {
                 return false
             }
 

package/dist/CropEditor.d.ts

@@ -6,6 +6,8 @@ interface CropEditorProps {
     overlayStrokeColor?: string;
     handlerColor?: string;
     enablePanStrict?: boolean;
+    enableEditor?: boolean;
+    autoCrop?: boolean;
     onCropChange?: (rectangle: Rectangle) => void;
 }
 /**

package/dist/CropEditor.js

@@ -32,10 +32,14 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CropEditor = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const react_native_perspective_image_cropper_1 = __importDefault(require("react-native-perspective-image-cropper"));
 const coordinate_1 = require("./utils/coordinate");
 /**
  * CropEditor Component
@@ -50,7 +54,7 @@ const coordinate_1 = require("./utils/coordinate");
  * @param enablePanStrict - Enable strict panning behavior
  * @param onCropChange - Callback when user adjusts crop corners
  */
-const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeColor = '#e7a649', handlerColor = '#e7a649', enablePanStrict = false, onCropChange, }) => {
+const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeColor = '#e7a649', handlerColor = '#e7a649', enablePanStrict = false, enableEditor = false, autoCrop = true, onCropChange, }) => {
     const [imageSize, setImageSize] = (0, react_1.useState)(null);
     const [displaySize, setDisplaySize] = (0, react_1.useState)({
         width: react_native_1.Dimensions.get('window').width,
@@ -59,32 +63,6 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
     const [isImageLoading, setIsImageLoading] = (0, react_1.useState)(true);
     const [loadError, setLoadError] = (0, react_1.useState)(null);
     const [croppedImageUri, setCroppedImageUri] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        console.log('[CropEditor] Document path:', document.path);
-        console.log('[CropEditor] Document dimensions:', document.width, 'x', document.height);
-        console.log('[CropEditor] Document quad:', document.quad);
-        console.log('[CropEditor] Document rectangle:', document.rectangle);
-        // Load image size using Image.getSize
-        const imageUri = document.path.startsWith('file://') ? document.path : `file://${document.path}`;
-        react_native_1.Image.getSize(imageUri, (width, height) => {
-            console.log('[CropEditor] Image.getSize success:', { width, height });
-            setImageSize({ width, height });
-            // If we have a rectangle (from auto-capture), crop the image
-            if (document.rectangle || document.quad) {
-                cropImageToRectangle(imageUri, width, height);
-            }
-            else {
-                setIsImageLoading(false);
-                setLoadError(null);
-            }
-        }, (error) => {
-            console.error('[CropEditor] Image.getSize error:', error);
-            // Fallback to document dimensions
-            console.log('[CropEditor] Using fallback dimensions:', document.width, 'x', document.height);
-            setImageSize({ width: document.width, height: document.height });
-            setIsImageLoading(false);
-        });
-    }, [document]);
     const cropImageToRectangle = (0, react_1.useCallback)((imageUri, width, height) => {
         const cropManager = react_native_1.NativeModules.CustomCropManager;
         if (!cropManager?.crop) {
@@ -127,6 +105,33 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
             setLoadError(null);
         });
     }, [document]);
+    (0, react_1.useEffect)(() => {
+        console.log('[CropEditor] Document path:', document.path);
+        console.log('[CropEditor] Document dimensions:', document.width, 'x', document.height);
+        console.log('[CropEditor] Document quad:', document.quad);
+        console.log('[CropEditor] Document rectangle:', document.rectangle);
+        const shouldAutoCrop = autoCrop && !enableEditor;
+        // Load image size using Image.getSize
+        const imageUri = document.path.startsWith('file://') ? document.path : `file://${document.path}`;
+        react_native_1.Image.getSize(imageUri, (width, height) => {
+            console.log('[CropEditor] Image.getSize success:', { width, height });
+            setImageSize({ width, height });
+            // If we have a rectangle (from auto-capture), crop the image
+            if (shouldAutoCrop && (document.rectangle || document.quad)) {
+                cropImageToRectangle(imageUri, width, height);
+            }
+            else {
+                setIsImageLoading(false);
+                setLoadError(null);
+            }
+        }, (error) => {
+            console.error('[CropEditor] Image.getSize error:', error);
+            // Fallback to document dimensions
+            console.log('[CropEditor] Using fallback dimensions:', document.width, 'x', document.height);
+            setImageSize({ width: document.width, height: document.height });
+            setIsImageLoading(false);
+        });
+    }, [autoCrop, cropImageToRectangle, document, enableEditor]);
     // Get initial rectangle from detected quad or use default
     const getInitialRectangle = (0, react_1.useCallback)(() => {
         if (!imageSize) {
@@ -180,7 +185,7 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
         react_1.default.createElement(react_native_1.Text, { style: styles.errorText }, "Failed to load image"),
         react_1.default.createElement(react_native_1.Text, { style: styles.errorPath }, imageUri))) : !imageSize || isImageLoading ? (react_1.default.createElement(react_native_1.View, { style: styles.loadingContainer },
         react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: handlerColor }),
-        react_1.default.createElement(react_native_1.Text, { style: styles.loadingText }, "Loading image..."))) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_native_1.Text, { style: styles.loadingText }, "Loading image..."))) : enableEditor ? (react_1.default.createElement(react_native_perspective_image_cropper_1.default, { height: displaySize.height, width: displaySize.width, image: imageUri, rectangleCoordinates: initialRect, overlayColor: overlayColor, overlayStrokeColor: overlayStrokeColor, handlerColor: handlerColor, enablePanStrict: enablePanStrict, onDragEnd: handleDragEnd })) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_native_1.Image, { source: { uri: croppedImageUri || imageUri }, style: styles.fullImage, resizeMode: "contain", onLoad: () => console.log('[CropEditor] Image loaded successfully', croppedImageUri ? 'cropped' : 'original'), onError: (e) => console.error('[CropEditor] Image load error:', e.nativeEvent.error) })))));
 };
 exports.CropEditor = CropEditor;

package/dist/FullDocScanner.js

@@ -43,6 +43,7 @@ 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 DocScanner_1 = require("./DocScanner");
+const coordinate_1 = require("./utils/coordinate");
 // 회전은 항상 지원됨 (회전 각도를 반환하고 tdb 앱에서 처리)
 const isImageRotationSupported = () => true;
 const stripFileUri = (value) => value.replace(/^file:\/\//, '');
@@ -58,6 +59,17 @@ const ensureFileUri = (value) => {
     }
     return value;
 };
+const safeRequire = (moduleName) => {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        return require(moduleName);
+    }
+    catch {
+        return null;
+    }
+};
+const CropEditorModule = safeRequire('./CropEditor');
+const CropEditor = CropEditorModule?.CropEditor;
 const CROPPER_TIMEOUT_MS = 8000;
 const CROPPER_TIMEOUT_CODE = 'cropper_timeout';
 const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -135,6 +147,8 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const [capturedPhotos, setCapturedPhotos] = (0, react_1.useState)([]);
     const [currentPhotoIndex, setCurrentPhotoIndex] = (0, react_1.useState)(0);
     const [scannerSession, setScannerSession] = (0, react_1.useState)(0);
+    const [cropEditorDocument, setCropEditorDocument] = (0, react_1.useState)(null);
+    const [cropEditorRectangle, setCropEditorRectangle] = (0, react_1.useState)(null);
     const resolvedGridColor = gridColor ?? overlayColor;
     const docScannerRef = (0, react_1.useRef)(null);
     const captureModeRef = (0, react_1.useRef)(null);
@@ -146,6 +160,8 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const resetScannerView = (0, react_1.useCallback)((options) => {
         setProcessing(false);
         setCroppedImageData(null);
+        setCropEditorDocument(null);
+        setCropEditorRectangle(null);
         setRotationDegrees(0);
         setRectangleDetected(false);
         setRectangleHint(false);
@@ -187,6 +203,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         originalBtn: strings?.originalBtn ?? 'Use Original',
     }), [strings]);
     const pdfScannerManager = react_native_1.NativeModules?.RNPdfScannerManager;
+    const isAndroidCropEditorAvailable = react_native_1.Platform.OS === 'android' && Boolean(CropEditor);
     const autoEnhancementEnabled = (0, react_1.useMemo)(() => typeof pdfScannerManager?.applyColorControls === 'function', [pdfScannerManager]);
     const ensureBase64ForImage = (0, react_1.useCallback)(async (image) => {
         if (image.base64) {
@@ -243,6 +260,17 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             react_native_1.Alert.alert('Document Scanner', fallbackMessage);
         }
     }, [onError]);
+    const openAndroidCropEditor = (0, react_1.useCallback)((document) => {
+        const rectangle = document.rectangle ??
+            (document.quad && document.quad.length === 4 ? (0, coordinate_1.quadToRectangle)(document.quad) : null);
+        const documentForEditor = rectangle ? { ...document, rectangle } : document;
+        setCropEditorDocument(documentForEditor);
+        setCropEditorRectangle(rectangle);
+    }, []);
+    const closeAndroidCropEditor = (0, react_1.useCallback)(() => {
+        setCropEditorDocument(null);
+        setCropEditorRectangle(null);
+    }, []);
     const openCropper = (0, react_1.useCallback)(async (imagePath, options) => {
         try {
             console.log('[FullDocScanner] openCropper called with path:', imagePath);
@@ -314,6 +342,64 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             }
         }
     }, [cropWidth, cropHeight, emitError, preparePreviewImage, resetScannerView]);
+    const handleCropEditorConfirm = (0, react_1.useCallback)(async () => {
+        if (!cropEditorDocument) {
+            return;
+        }
+        const documentPath = cropEditorDocument.path;
+        const rectangle = cropEditorRectangle ??
+            cropEditorDocument.rectangle ??
+            (cropEditorDocument.quad && cropEditorDocument.quad.length === 4
+                ? (0, coordinate_1.quadToRectangle)(cropEditorDocument.quad)
+                : null);
+        if (!rectangle || !pdfScannerManager?.processImage) {
+            closeAndroidCropEditor();
+            await openCropper(documentPath, { waitForPickerDismissal: false });
+            return;
+        }
+        setProcessing(true);
+        try {
+            const payload = await pdfScannerManager.processImage({
+                imagePath: documentPath,
+                rectangleCoordinates: rectangle,
+                rectangleWidth: cropEditorDocument.width ?? 0,
+                rectangleHeight: cropEditorDocument.height ?? 0,
+                useBase64: false,
+                quality: 90,
+                brightness: 0,
+                contrast: 1,
+                saturation: 1,
+                saveInAppDocument: false,
+            });
+            const croppedPath = typeof payload?.croppedImage === 'string' ? stripFileUri(payload.croppedImage) : null;
+            if (!croppedPath) {
+                throw new Error('missing_cropped_image');
+            }
+            const preview = await preparePreviewImage({ path: croppedPath });
+            setCroppedImageData(preview);
+        }
+        catch (error) {
+            console.error('[FullDocScanner] Crop editor processing failed:', error);
+            resetScannerView({ remount: true });
+            emitError(error instanceof Error ? error : new Error(String(error)), 'Failed to crop image. Please try again.');
+        }
+        finally {
+            setProcessing(false);
+            closeAndroidCropEditor();
+        }
+    }, [
+        closeAndroidCropEditor,
+        cropEditorDocument,
+        cropEditorRectangle,
+        emitError,
+        openCropper,
+        pdfScannerManager,
+        preparePreviewImage,
+        resetScannerView,
+    ]);
+    const handleCropEditorCancel = (0, react_1.useCallback)(() => {
+        resetScannerView({ remount: true });
+    }, [resetScannerView]);
     const handleCapture = (0, react_1.useCallback)(async (document) => {
         console.log('[FullDocScanner] handleCapture called:', {
             origin: document.origin,
@@ -332,6 +418,15 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             return;
         }
         const normalizedDoc = normalizeCapturedDocument(document);
+        const shouldOpenAndroidCropEditor = isAndroidCropEditorAvailable &&
+            captureMode === 'grid' &&
+            Boolean(normalizedDoc.rectangle ||
+                (normalizedDoc.quad && normalizedDoc.quad.length === 4));
+        if (shouldOpenAndroidCropEditor) {
+            console.log('[FullDocScanner] Opening Android crop editor with detected rectangle');
+            openAndroidCropEditor(normalizedDoc);
+            return;
+        }
         if (captureMode === 'no-grid') {
             console.log('[FullDocScanner] No grid at capture button press: opening cropper for manual selection');
             await openCropper(normalizedDoc.path, { waitForPickerDismissal: false });
@@ -358,7 +453,14 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         }
         console.log('[FullDocScanner] Fallback to manual crop (no croppedPath available)');
         await openCropper(normalizedDoc.path, { waitForPickerDismissal: false });
-    }, [emitError, openCropper, preparePreviewImage, resetScannerView]);
+    }, [
+        emitError,
+        isAndroidCropEditorAvailable,
+        openAndroidCropEditor,
+        openCropper,
+        preparePreviewImage,
+        resetScannerView,
+    ]);
     const triggerManualCapture = (0, react_1.useCallback)(() => {
         const scannerInstance = docScannerRef.current;
         const hasScanner = !!scannerInstance;
@@ -649,6 +751,12 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.retakeButton], onPress: handleRetake, accessibilityLabel: mergedStrings.retake, accessibilityRole: "button" },
                     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))))) : cropEditorDocument && CropEditor ? (react_1.default.createElement(react_native_1.View, { style: styles.flex },
+            react_1.default.createElement(CropEditor, { document: cropEditorDocument, enableEditor: true, autoCrop: false, onCropChange: setCropEditorRectangle }),
+            react_1.default.createElement(react_native_1.View, { style: styles.confirmationButtons },
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.retakeButton], onPress: handleCropEditorCancel, accessibilityLabel: mergedStrings.retake, accessibilityRole: "button", disabled: processing },
+                    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: handleCropEditorConfirm, accessibilityLabel: mergedStrings.confirm, accessibilityRole: "button", disabled: processing },
                     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, { 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" },

package/package.json

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

package/src/CropEditor.tsx

@@ -26,6 +26,8 @@ interface CropEditorProps {
   overlayStrokeColor?: string;
   handlerColor?: string;
   enablePanStrict?: boolean;
+  enableEditor?: boolean;
+  autoCrop?: boolean;
   onCropChange?: (rectangle: Rectangle) => void;
 }
 
@@ -48,6 +50,8 @@ export const CropEditor: React.FC<CropEditorProps> = ({
   overlayStrokeColor = '#e7a649',
   handlerColor = '#e7a649',
   enablePanStrict = false,
+  enableEditor = false,
+  autoCrop = true,
   onCropChange,
 }) => {
   const [imageSize, setImageSize] = useState<{ width: number; height: number } | null>(null);
@@ -59,38 +63,6 @@ export const CropEditor: React.FC<CropEditorProps> = ({
   const [loadError, setLoadError] = useState<string | null>(null);
   const [croppedImageUri, setCroppedImageUri] = useState<string | null>(null);
 
-  useEffect(() => {
-    console.log('[CropEditor] Document path:', document.path);
-    console.log('[CropEditor] Document dimensions:', document.width, 'x', document.height);
-    console.log('[CropEditor] Document quad:', document.quad);
-    console.log('[CropEditor] Document rectangle:', document.rectangle);
-
-    // Load image size using Image.getSize
-    const imageUri = document.path.startsWith('file://') ? document.path : `file://${document.path}`;
-    Image.getSize(
-      imageUri,
-      (width, height) => {
-        console.log('[CropEditor] Image.getSize success:', { width, height });
-        setImageSize({ width, height });
-
-        // If we have a rectangle (from auto-capture), crop the image
-        if (document.rectangle || document.quad) {
-          cropImageToRectangle(imageUri, width, height);
-        } else {
-          setIsImageLoading(false);
-          setLoadError(null);
-        }
-      },
-      (error) => {
-        console.error('[CropEditor] Image.getSize error:', error);
-        // Fallback to document dimensions
-        console.log('[CropEditor] Using fallback dimensions:', document.width, 'x', document.height);
-        setImageSize({ width: document.width, height: document.height });
-        setIsImageLoading(false);
-      }
-    );
-  }, [document]);
-
   const cropImageToRectangle = useCallback((imageUri: string, width: number, height: number) => {
     const cropManager = NativeModules.CustomCropManager as CustomCropManagerType | undefined;
 
@@ -145,6 +117,40 @@ export const CropEditor: React.FC<CropEditorProps> = ({
     );
   }, [document]);
 
+  useEffect(() => {
+    console.log('[CropEditor] Document path:', document.path);
+    console.log('[CropEditor] Document dimensions:', document.width, 'x', document.height);
+    console.log('[CropEditor] Document quad:', document.quad);
+    console.log('[CropEditor] Document rectangle:', document.rectangle);
+
+    const shouldAutoCrop = autoCrop && !enableEditor;
+
+    // Load image size using Image.getSize
+    const imageUri = document.path.startsWith('file://') ? document.path : `file://${document.path}`;
+    Image.getSize(
+      imageUri,
+      (width, height) => {
+        console.log('[CropEditor] Image.getSize success:', { width, height });
+        setImageSize({ width, height });
+
+        // If we have a rectangle (from auto-capture), crop the image
+        if (shouldAutoCrop && (document.rectangle || document.quad)) {
+          cropImageToRectangle(imageUri, width, height);
+        } else {
+          setIsImageLoading(false);
+          setLoadError(null);
+        }
+      },
+      (error) => {
+        console.error('[CropEditor] Image.getSize error:', error);
+        // Fallback to document dimensions
+        console.log('[CropEditor] Using fallback dimensions:', document.width, 'x', document.height);
+        setImageSize({ width: document.width, height: document.height });
+        setIsImageLoading(false);
+      }
+    );
+  }, [autoCrop, cropImageToRectangle, document, enableEditor]);
+
   // Get initial rectangle from detected quad or use default
   const getInitialRectangle = useCallback((): CropperRectangle | undefined => {
     if (!imageSize) {
@@ -226,6 +232,18 @@ export const CropEditor: React.FC<CropEditorProps> = ({
           <ActivityIndicator size="large" color={handlerColor} />
           <Text style={styles.loadingText}>Loading image...</Text>
         </View>
+      ) : enableEditor ? (
+        <CustomImageCropper
+          height={displaySize.height}
+          width={displaySize.width}
+          image={imageUri}
+          rectangleCoordinates={initialRect}
+          overlayColor={overlayColor}
+          overlayStrokeColor={overlayStrokeColor}
+          handlerColor={handlerColor}
+          enablePanStrict={enablePanStrict}
+          onDragEnd={handleDragEnd}
+        />
       ) : (
         <>
           {/* Show cropped image if available, otherwise show original */}
@@ -236,18 +254,6 @@ export const CropEditor: React.FC<CropEditorProps> = ({
             onLoad={() => console.log('[CropEditor] Image loaded successfully', croppedImageUri ? 'cropped' : 'original')}
             onError={(e) => console.error('[CropEditor] Image load error:', e.nativeEvent.error)}
           />
-          {/* Temporarily disabled CustomImageCropper - showing image only */}
-          {/* <CustomImageCropper
-            height={displaySize.height}
-            width={displaySize.width}
-            image={imageUri}
-            rectangleCoordinates={initialRect}
-            overlayColor={overlayColor}
-            overlayStrokeColor={overlayStrokeColor}
-            handlerColor={handlerColor}
-            enablePanStrict={enablePanStrict}
-            onDragEnd={handleDragEnd}
-          /> */}
         </>
       )}
     </View>

package/src/FullDocScanner.tsx

@@ -16,7 +16,8 @@ import { launchImageLibrary } from 'react-native-image-picker';
 import ImageCropPicker from 'react-native-image-crop-picker';
 import RNFS from 'react-native-fs';
 import { DocScanner } from './DocScanner';
-import type { CapturedDocument } from './types';
+import type { CapturedDocument, Rectangle } from './types';
+import { quadToRectangle } from './utils/coordinate';
 import type {
   DetectionConfig,
   DocScannerHandle,
@@ -41,6 +42,25 @@ const ensureFileUri = (value?: string | null) => {
   return value;
 };
 
+const safeRequire = (moduleName: string) => {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    return require(moduleName);
+  } catch {
+    return null;
+  }
+};
+
+const CropEditorModule = safeRequire('./CropEditor');
+const CropEditor = CropEditorModule?.CropEditor as
+  | React.ComponentType<{
+      document: CapturedDocument;
+      enableEditor?: boolean;
+      autoCrop?: boolean;
+      onCropChange?: (rectangle: Rectangle) => void;
+    }>
+  | undefined;
+
 const CROPPER_TIMEOUT_MS = 8000;
 const CROPPER_TIMEOUT_CODE = 'cropper_timeout';
 
@@ -198,6 +218,8 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   const [capturedPhotos, setCapturedPhotos] = useState<FullDocScannerResult[]>([]);
   const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
   const [scannerSession, setScannerSession] = useState(0);
+  const [cropEditorDocument, setCropEditorDocument] = useState<CapturedDocument | null>(null);
+  const [cropEditorRectangle, setCropEditorRectangle] = useState<Rectangle | null>(null);
   const resolvedGridColor = gridColor ?? overlayColor;
   const docScannerRef = useRef<DocScannerHandle | null>(null);
   const captureModeRef = useRef<'grid' | 'no-grid' | null>(null);
@@ -212,6 +234,8 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     (options?: { remount?: boolean }) => {
       setProcessing(false);
       setCroppedImageData(null);
+      setCropEditorDocument(null);
+      setCropEditorRectangle(null);
       setRotationDegrees(0);
       setRectangleDetected(false);
       setRectangleHint(false);
@@ -264,6 +288,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   );
 
   const pdfScannerManager = (NativeModules as any)?.RNPdfScannerManager;
+  const isAndroidCropEditorAvailable = Platform.OS === 'android' && Boolean(CropEditor);
 
   const autoEnhancementEnabled = useMemo(
     () => typeof pdfScannerManager?.applyColorControls === 'function',
@@ -353,6 +378,20 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     [onError],
   );
 
+  const openAndroidCropEditor = useCallback((document: CapturedDocument) => {
+    const rectangle =
+      document.rectangle ??
+      (document.quad && document.quad.length === 4 ? quadToRectangle(document.quad) : null);
+    const documentForEditor = rectangle ? { ...document, rectangle } : document;
+    setCropEditorDocument(documentForEditor);
+    setCropEditorRectangle(rectangle);
+  }, []);
+
+  const closeAndroidCropEditor = useCallback(() => {
+    setCropEditorDocument(null);
+    setCropEditorRectangle(null);
+  }, []);
+
   const openCropper = useCallback(
     async (imagePath: string, options?: OpenCropperOptions) => {
       try {
@@ -446,6 +485,76 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     [cropWidth, cropHeight, emitError, preparePreviewImage, resetScannerView],
   );
 
+  const handleCropEditorConfirm = useCallback(async () => {
+    if (!cropEditorDocument) {
+      return;
+    }
+
+    const documentPath = cropEditorDocument.path;
+
+    const rectangle =
+      cropEditorRectangle ??
+      cropEditorDocument.rectangle ??
+      (cropEditorDocument.quad && cropEditorDocument.quad.length === 4
+        ? quadToRectangle(cropEditorDocument.quad)
+        : null);
+
+    if (!rectangle || !pdfScannerManager?.processImage) {
+      closeAndroidCropEditor();
+      await openCropper(documentPath, { waitForPickerDismissal: false });
+      return;
+    }
+
+    setProcessing(true);
+    try {
+      const payload = await pdfScannerManager.processImage({
+        imagePath: documentPath,
+        rectangleCoordinates: rectangle,
+        rectangleWidth: cropEditorDocument.width ?? 0,
+        rectangleHeight: cropEditorDocument.height ?? 0,
+        useBase64: false,
+        quality: 90,
+        brightness: 0,
+        contrast: 1,
+        saturation: 1,
+        saveInAppDocument: false,
+      });
+
+      const croppedPath =
+        typeof payload?.croppedImage === 'string' ? stripFileUri(payload.croppedImage) : null;
+
+      if (!croppedPath) {
+        throw new Error('missing_cropped_image');
+      }
+
+      const preview = await preparePreviewImage({ path: croppedPath });
+      setCroppedImageData(preview);
+    } catch (error) {
+      console.error('[FullDocScanner] Crop editor processing failed:', error);
+      resetScannerView({ remount: true });
+      emitError(
+        error instanceof Error ? error : new Error(String(error)),
+        'Failed to crop image. Please try again.',
+      );
+    } finally {
+      setProcessing(false);
+      closeAndroidCropEditor();
+    }
+  }, [
+    closeAndroidCropEditor,
+    cropEditorDocument,
+    cropEditorRectangle,
+    emitError,
+    openCropper,
+    pdfScannerManager,
+    preparePreviewImage,
+    resetScannerView,
+  ]);
+
+  const handleCropEditorCancel = useCallback(() => {
+    resetScannerView({ remount: true });
+  }, [resetScannerView]);
+
   const handleCapture = useCallback(
     async (document: DocScannerCapture) => {
       console.log('[FullDocScanner] handleCapture called:', {
@@ -470,6 +579,20 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
 
       const normalizedDoc = normalizeCapturedDocument(document);
 
+      const shouldOpenAndroidCropEditor =
+        isAndroidCropEditorAvailable &&
+        captureMode === 'grid' &&
+        Boolean(
+          normalizedDoc.rectangle ||
+            (normalizedDoc.quad && normalizedDoc.quad.length === 4),
+        );
+
+      if (shouldOpenAndroidCropEditor) {
+        console.log('[FullDocScanner] Opening Android crop editor with detected rectangle');
+        openAndroidCropEditor(normalizedDoc);
+        return;
+      }
+
       if (captureMode === 'no-grid') {
         console.log('[FullDocScanner] No grid at capture button press: opening cropper for manual selection');
         await openCropper(normalizedDoc.path, { waitForPickerDismissal: false });
@@ -501,7 +624,14 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       console.log('[FullDocScanner] Fallback to manual crop (no croppedPath available)');
       await openCropper(normalizedDoc.path, { waitForPickerDismissal: false });
     },
-    [emitError, openCropper, preparePreviewImage, resetScannerView],
+    [
+      emitError,
+      isAndroidCropEditorAvailable,
+      openAndroidCropEditor,
+      openCropper,
+      preparePreviewImage,
+      resetScannerView,
+    ],
   );
 
   const triggerManualCapture = useCallback(() => {
@@ -949,6 +1079,36 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
             </TouchableOpacity>
           </View>
         </View>
+      ) : cropEditorDocument && CropEditor ? (
+        <View style={styles.flex}>
+          <CropEditor
+            document={cropEditorDocument}
+            enableEditor
+            autoCrop={false}
+            onCropChange={setCropEditorRectangle}
+          />
+          <View style={styles.confirmationButtons}>
+            <TouchableOpacity
+              style={[styles.confirmButton, styles.retakeButton]}
+              onPress={handleCropEditorCancel}
+              accessibilityLabel={mergedStrings.retake}
+              accessibilityRole="button"
+              disabled={processing}
+            >
+              <Text style={styles.confirmButtonText}>{mergedStrings.retake}</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={[styles.confirmButton, styles.confirmButtonPrimary]}
+              onPress={handleCropEditorConfirm}
+              accessibilityLabel={mergedStrings.confirm}
+              accessibilityRole="button"
+              disabled={processing}
+            >
+              <Text style={styles.confirmButtonText}>{mergedStrings.confirm}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
       ) : (
         <View style={styles.flex}>
           <DocScanner