react-native-rectangle-doc-scanner 3.27.0 → 3.29.0

package/dist/CropEditor.js

@@ -83,17 +83,22 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
     }, [document]);
     // Get initial rectangle from detected quad or use default
     const getInitialRectangle = (0, react_1.useCallback)(() => {
-        if (!document.quad || !imageSize) {
+        if (!imageSize) {
             return undefined;
         }
-        const rect = (0, coordinate_1.quadToRectangle)(document.quad);
-        if (!rect) {
+        const baseWidth = document.width > 0 ? document.width : imageSize.width;
+        const baseHeight = document.height > 0 ? document.height : imageSize.height;
+        const sourceRectangle = document.rectangle
+            ? document.rectangle
+            : document.quad && document.quad.length === 4
+                ? (0, coordinate_1.quadToRectangle)(document.quad)
+                : null;
+        if (!sourceRectangle) {
             return undefined;
         }
-        // Scale from original detection coordinates to image coordinates
-        const scaled = (0, coordinate_1.scaleRectangle)(rect, document.width, document.height, imageSize.width, imageSize.height);
+        const scaled = (0, coordinate_1.scaleRectangle)(sourceRectangle, baseWidth, baseHeight, imageSize.width, imageSize.height);
         return scaled;
-    }, [document.quad, document.width, document.height, imageSize]);
+    }, [document.rectangle, document.quad, document.width, document.height, imageSize]);
     const handleImageLoad = (0, react_1.useCallback)((event) => {
         // This is just for debugging - actual size is loaded via Image.getSize in useEffect
         console.log('[CropEditor] Image onLoad event triggered');

package/dist/DocScanner.d.ts

@@ -17,6 +17,7 @@ export type DocScannerCapture = {
     initialPath: string | null;
     croppedPath: string | null;
     quad: Point[] | null;
+    rectangle: Rectangle | null;
     width: number;
     height: number;
 };

package/dist/DocScanner.js

@@ -73,6 +73,7 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
     const captureResolvers = (0, react_1.useRef)(null);
     const [isAutoCapturing, setIsAutoCapturing] = (0, react_1.useState)(false);
     const [detectedRectangle, setDetectedRectangle] = (0, react_1.useState)(null);
+    const lastRectangleRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (!autoCapture) {
             setIsAutoCapturing(false);
@@ -87,17 +88,18 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
     }, [quality]);
     const handlePictureTaken = (0, react_1.useCallback)((event) => {
         setIsAutoCapturing(false);
-        const normalizedRectangle = normalizeRectangle(event.rectangleCoordinates ?? null);
+        const normalizedRectangle = normalizeRectangle(event.rectangleCoordinates ?? null) ?? lastRectangleRef.current;
         const quad = normalizedRectangle ? (0, coordinate_1.rectangleToQuad)(normalizedRectangle) : null;
         const initialPath = event.initialImage ?? null;
         const croppedPath = event.croppedImage ?? null;
-        const bestPath = croppedPath ?? initialPath;
-        if (bestPath) {
+        const editablePath = initialPath ?? croppedPath;
+        if (editablePath) {
             onCapture?.({
-                path: bestPath,
+                path: editablePath,
                 initialPath,
                 croppedPath,
                 quad,
+                rectangle: normalizedRectangle,
                 width: event.width ?? 0,
                 height: event.height ?? 0,
             });
@@ -157,6 +159,9 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
                 setIsAutoCapturing(false);
             }
         }
+        if (payload.rectangleCoordinates) {
+            lastRectangleRef.current = payload.rectangleCoordinates;
+        }
         const isGoodRectangle = payload.lastDetectionType === 0;
         setDetectedRectangle(isGoodRectangle && rectangleOnScreen ? payload : null);
         onRectangleDetect?.(payload);
@@ -170,7 +175,7 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
             }
         },
     }), [capture]);
-    const overlayPolygon = detectedRectangle?.rectangleOnScreen ?? null;
+    const overlayPolygon = detectedRectangle?.rectangleOnScreen ?? detectedRectangle?.rectangleCoordinates ?? null;
     const overlayIsActive = autoCapture ? isAutoCapturing : (detectedRectangle?.stableCounter ?? 0) > 0;
     return (react_1.default.createElement(react_native_1.View, { style: styles.container },
         react_1.default.createElement(react_native_document_scanner_1.default, { ref: scannerRef, style: styles.scanner, detectionCountBeforeCapture: minStableFrames, overlayColor: overlayColor, enableTorch: enableTorch, quality: normalizedQuality, useBase64: useBase64, manualOnly: !autoCapture, detectionConfig: detectionConfig, onPictureTaken: handlePictureTaken, onError: handleError, onRectangleDetect: handleRectangleDetect }),

package/dist/FullDocScanner.js

@@ -63,6 +63,26 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         }
         react_native_1.Image.getSize(ensureFileUri(capturedDoc.path), (width, height) => setImageSize({ width, height }), () => setImageSize({ width: capturedDoc.width, height: capturedDoc.height }));
     }, [capturedDoc]);
+    (0, react_1.useEffect)(() => {
+        if (!capturedDoc || !imageSize || cropRectangle) {
+            return;
+        }
+        const baseWidth = capturedDoc.width > 0 ? capturedDoc.width : imageSize.width;
+        const baseHeight = capturedDoc.height > 0 ? capturedDoc.height : imageSize.height;
+        let initialRectangle = null;
+        if (capturedDoc.rectangle) {
+            initialRectangle = (0, coordinate_1.scaleRectangle)(capturedDoc.rectangle, baseWidth, baseHeight, imageSize.width, imageSize.height);
+        }
+        else if (capturedDoc.quad && capturedDoc.quad.length === 4) {
+            const quadRectangle = (0, coordinate_1.quadToRectangle)(capturedDoc.quad);
+            if (quadRectangle) {
+                initialRectangle = (0, coordinate_1.scaleRectangle)(quadRectangle, baseWidth, baseHeight, imageSize.width, imageSize.height);
+            }
+        }
+        if (initialRectangle) {
+            setCropRectangle(initialRectangle);
+        }
+    }, [capturedDoc, imageSize, cropRectangle]);
     const resetState = (0, react_1.useCallback)(() => {
         setScreen('scanner');
         setCapturedDoc(null);
@@ -73,6 +93,8 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const handleCapture = (0, react_1.useCallback)((document) => {
         const normalizedPath = stripFileUri(document.path);
         const nextQuad = document.quad && document.quad.length === 4 ? document.quad : null;
+        const quadRectangle = nextQuad ? (0, coordinate_1.quadToRectangle)(nextQuad) : null;
+        const nextRectangle = document.rectangle ?? quadRectangle ?? null;
         const normalizedInitial = document.initialPath != null ? stripFileUri(document.initialPath) : normalizedPath;
         const normalizedCropped = document.croppedPath != null ? stripFileUri(document.croppedPath) : null;
         setCapturedDoc({
@@ -81,8 +103,9 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             initialPath: normalizedInitial,
             croppedPath: normalizedCropped,
             quad: nextQuad,
+            rectangle: nextRectangle,
         });
-        setCropRectangle(nextQuad ? (0, coordinate_1.quadToRectangle)(nextQuad) : null);
+        setCropRectangle(null);
         setScreen('crop');
     }, []);
     const handleCropChange = (0, react_1.useCallback)((rectangle) => {
@@ -104,13 +127,19 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         if (!cropManager?.crop) {
             throw new Error('CustomCropManager.crop is not available');
         }
-        const fallbackRectangle = capturedDoc.quad && capturedDoc.quad.length === 4
-            ? (0, coordinate_1.quadToRectangle)(capturedDoc.quad)
+        const baseWidth = capturedDoc.width > 0 ? capturedDoc.width : size.width;
+        const baseHeight = capturedDoc.height > 0 ? capturedDoc.height : size.height;
+        const rectangleFromDetection = capturedDoc.rectangle
+            ? (0, coordinate_1.scaleRectangle)(capturedDoc.rectangle, baseWidth, baseHeight, size.width, size.height)
             : null;
-        const scaledFallback = fallbackRectangle
-            ? (0, coordinate_1.scaleRectangle)(fallbackRectangle, capturedDoc.width, capturedDoc.height, size.width, size.height)
-            : null;
-        const rectangle = cropRectangle ?? scaledFallback;
+        let fallbackRectangle = rectangleFromDetection;
+        if (!fallbackRectangle && capturedDoc.quad && capturedDoc.quad.length === 4) {
+            const quadRectangle = (0, coordinate_1.quadToRectangle)(capturedDoc.quad);
+            if (quadRectangle) {
+                fallbackRectangle = (0, coordinate_1.scaleRectangle)(quadRectangle, baseWidth, baseHeight, size.width, size.height);
+            }
+        }
+        const rectangle = cropRectangle ?? fallbackRectangle;
         const base64 = await new Promise((resolve, reject) => {
             cropManager.crop({
                 topLeft: rectangle?.topLeft ?? { x: 0, y: 0 },

package/dist/types.d.ts

@@ -14,6 +14,7 @@ export type CapturedDocument = {
     initialPath?: string | null;
     croppedPath?: string | null;
     quad: Point[] | null;
+    rectangle?: Rectangle | null;
     width: number;
     height: number;
 };

package/dist/utils/overlay.js

@@ -44,22 +44,7 @@ try {
 catch (error) {
     SvgModule = null;
 }
-const SCAN_DURATION_MS = 2200;
 const GRID_STEPS = [1 / 3, 2 / 3];
-const calculateMetrics = (polygon) => {
-    const minX = Math.min(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
-    const maxX = Math.max(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
-    const minY = Math.min(polygon.topLeft.y, polygon.topRight.y, polygon.bottomLeft.y, polygon.bottomRight.y);
-    const maxY = Math.max(polygon.topLeft.y, polygon.topRight.y, polygon.bottomLeft.y, polygon.bottomRight.y);
-    return {
-        minX,
-        maxX,
-        minY,
-        maxY,
-        width: maxX - minX,
-        height: maxY - minY,
-    };
-};
 const createPointsString = (polygon) => [
     `${polygon.topLeft.x},${polygon.topLeft.y}`,
     `${polygon.topRight.x},${polygon.topRight.y}`,
@@ -80,116 +65,51 @@ const createGridLines = (polygon) => GRID_STEPS.flatMap((step) => {
         { x1: verticalStart.x, y1: verticalStart.y, x2: verticalEnd.x, y2: verticalEnd.y },
     ];
 });
-const ScannerOverlay = ({ active, color = '#0b7ef4', lineWidth = react_native_1.StyleSheet.hairlineWidth, polygon, }) => {
-    const scanProgress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const fallbackBase = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const [scanY, setScanY] = (0, react_1.useState)(null);
-    const metrics = (0, react_1.useMemo)(() => (polygon ? calculateMetrics(polygon) : null), [polygon]);
-    const scanBarHeight = (0, react_1.useMemo)(() => {
-        if (!metrics)
-            return 0;
-        return Math.max(metrics.height * 0.2, 16);
-    }, [metrics]);
-    const travelDistance = (0, react_1.useMemo)(() => {
-        if (!metrics) {
-            return 0;
-        }
-        return Math.max(metrics.height - scanBarHeight, 0);
-    }, [metrics, scanBarHeight]);
-    (0, react_1.useEffect)(() => {
-        scanProgress.stopAnimation();
-        scanProgress.setValue(0);
-        setScanY(null);
-        if (!active || !metrics || travelDistance <= 0) {
-            return undefined;
-        }
-        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
-            react_native_1.Animated.timing(scanProgress, {
-                toValue: 1,
-                duration: SCAN_DURATION_MS,
-                easing: react_native_1.Easing.inOut(react_native_1.Easing.quad),
-                useNativeDriver: false,
-            }),
-            react_native_1.Animated.timing(scanProgress, {
-                toValue: 0,
-                duration: SCAN_DURATION_MS,
-                easing: react_native_1.Easing.inOut(react_native_1.Easing.quad),
-                useNativeDriver: false,
-            }),
-        ]));
-        loop.start();
-        return () => {
-            loop.stop();
-            scanProgress.stopAnimation();
-        };
-    }, [active, metrics, scanProgress, travelDistance]);
-    (0, react_1.useEffect)(() => {
-        if (!metrics || travelDistance <= 0) {
-            setScanY(null);
-            return undefined;
-        }
-        const listenerId = scanProgress.addListener(({ value }) => {
-            const nextValue = metrics.minY + travelDistance * value;
-            if (Number.isFinite(nextValue)) {
-                setScanY(nextValue);
-            }
-        });
-        return () => {
-            scanProgress.removeListener(listenerId);
-        };
-    }, [metrics, scanProgress, travelDistance]);
-    if (!polygon || !metrics || metrics.width <= 0 || metrics.height <= 0) {
+const getBounds = (polygon) => {
+    const minX = Math.min(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
+    const maxX = Math.max(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
+    const minY = Math.min(polygon.topLeft.y, polygon.topRight.y, polygon.bottomLeft.y, polygon.bottomRight.y);
+    const maxY = Math.max(polygon.topLeft.y, polygon.topRight.y, polygon.bottomLeft.y, polygon.bottomRight.y);
+    return {
+        minX,
+        minY,
+        width: maxX - minX,
+        height: maxY - minY,
+    };
+};
+const ScannerOverlay = ({ active: _active, // kept for compatibility; no animation currently
+color = '#0b7ef4', lineWidth = react_native_1.StyleSheet.hairlineWidth, polygon, }) => {
+    const points = (0, react_1.useMemo)(() => (polygon ? createPointsString(polygon) : null), [polygon]);
+    const gridLines = (0, react_1.useMemo)(() => (polygon ? createGridLines(polygon) : []), [polygon]);
+    const bounds = (0, react_1.useMemo)(() => (polygon ? getBounds(polygon) : null), [polygon]);
+    if (!polygon || !points || !bounds) {
         return null;
     }
     if (SvgModule) {
-        const { default: Svg, Polygon, Line, Defs, LinearGradient, Stop, Rect } = SvgModule;
-        const gridLines = createGridLines(polygon);
-        const points = createPointsString(polygon);
-        const scanRectY = scanY ?? metrics.minY;
+        const { default: Svg, Polygon, Line } = SvgModule;
         return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: react_native_1.StyleSheet.absoluteFill },
             react_1.default.createElement(Svg, { style: react_native_1.StyleSheet.absoluteFill },
                 react_1.default.createElement(Polygon, { points: points, fill: color, opacity: 0.15 }),
                 gridLines.map((line, index) => (react_1.default.createElement(Line, { key: `grid-${index}`, x1: line.x1, y1: line.y1, x2: line.x2, y2: line.y2, stroke: color, strokeWidth: lineWidth, opacity: 0.5 }))),
-                react_1.default.createElement(Polygon, { points: points, stroke: color, strokeWidth: lineWidth, fill: "none" }),
-                react_1.default.createElement(Defs, null,
-                    react_1.default.createElement(LinearGradient, { id: "scanGradient", x1: "0", y1: "0", x2: "0", y2: "1" },
-                        react_1.default.createElement(Stop, { offset: "0%", stopColor: "rgba(255,255,255,0)" }),
-                        react_1.default.createElement(Stop, { offset: "50%", stopColor: color, stopOpacity: 0.8 }),
-                        react_1.default.createElement(Stop, { offset: "100%", stopColor: "rgba(255,255,255,0)" }))),
-                active && travelDistance > 0 && Number.isFinite(scanRectY) && (react_1.default.createElement(Rect, { x: metrics.minX, width: metrics.width, height: scanBarHeight, fill: "url(#scanGradient)", y: scanRectY })))));
+                react_1.default.createElement(Polygon, { points: points, stroke: color, strokeWidth: lineWidth, fill: "none" }))));
     }
-    const relativeTranslate = metrics && travelDistance > 0
-        ? react_native_1.Animated.multiply(scanProgress, travelDistance)
-        : fallbackBase;
     return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: react_native_1.StyleSheet.absoluteFill },
         react_1.default.createElement(react_native_1.View, { style: [
                 styles.fallbackBox,
                 {
-                    left: metrics.minX,
-                    top: metrics.minY,
-                    width: metrics.width,
-                    height: metrics.height,
+                    left: bounds.minX,
+                    top: bounds.minY,
+                    width: bounds.width,
+                    height: bounds.height,
                     borderColor: color,
                     borderWidth: lineWidth,
                 },
-            ] }, active && travelDistance > 0 && (react_1.default.createElement(react_native_1.Animated.View, { style: [
-                styles.fallbackScanBar,
-                {
-                    backgroundColor: color,
-                    height: scanBarHeight,
-                    transform: [{ translateY: relativeTranslate }],
-                },
-            ] })))));
+            ] })));
 };
 exports.ScannerOverlay = ScannerOverlay;
 const styles = react_native_1.StyleSheet.create({
     fallbackBox: {
         position: 'absolute',
         backgroundColor: 'rgba(11, 126, 244, 0.1)',
-        overflow: 'hidden',
-    },
-    fallbackScanBar: {
-        width: '100%',
-        opacity: 0.4,
     },
 });

package/package.json

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

package/src/CropEditor.tsx

@@ -70,26 +70,33 @@ export const CropEditor: React.FC<CropEditorProps> = ({
 
   // Get initial rectangle from detected quad or use default
   const getInitialRectangle = useCallback((): CropperRectangle | undefined => {
-    if (!document.quad || !imageSize) {
+    if (!imageSize) {
       return undefined;
     }
 
-    const rect = quadToRectangle(document.quad);
-    if (!rect) {
+    const baseWidth = document.width > 0 ? document.width : imageSize.width;
+    const baseHeight = document.height > 0 ? document.height : imageSize.height;
+
+    const sourceRectangle = document.rectangle
+      ? document.rectangle
+      : document.quad && document.quad.length === 4
+      ? quadToRectangle(document.quad)
+      : null;
+
+    if (!sourceRectangle) {
       return undefined;
     }
 
-    // Scale from original detection coordinates to image coordinates
     const scaled = scaleRectangle(
-      rect,
-      document.width,
-      document.height,
+      sourceRectangle,
+      baseWidth,
+      baseHeight,
       imageSize.width,
       imageSize.height
     );
 
     return scaled as CropperRectangle;
-  }, [document.quad, document.width, document.height, imageSize]);
+  }, [document.rectangle, document.quad, document.width, document.height, imageSize]);
 
   const handleImageLoad = useCallback((event: any) => {
     // This is just for debugging - actual size is loaded via Image.getSize in useEffect

package/src/DocScanner.tsx

@@ -33,6 +33,7 @@ export type DocScannerCapture = {
   initialPath: string | null;
   croppedPath: string | null;
   quad: Point[] | null;
+  rectangle: Rectangle | null;
   width: number;
   height: number;
 };
@@ -127,6 +128,7 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
     } | null>(null);
     const [isAutoCapturing, setIsAutoCapturing] = useState(false);
     const [detectedRectangle, setDetectedRectangle] = useState<RectangleDetectEvent | null>(null);
+    const lastRectangleRef = useRef<Rectangle | null>(null);
 
     useEffect(() => {
       if (!autoCapture) {
@@ -146,19 +148,21 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
       (event: PictureEvent) => {
         setIsAutoCapturing(false);
 
-        const normalizedRectangle = normalizeRectangle(event.rectangleCoordinates ?? null);
+        const normalizedRectangle =
+          normalizeRectangle(event.rectangleCoordinates ?? null) ?? lastRectangleRef.current;
         const quad = normalizedRectangle ? rectangleToQuad(normalizedRectangle) : null;
 
         const initialPath = event.initialImage ?? null;
         const croppedPath = event.croppedImage ?? null;
-        const bestPath = croppedPath ?? initialPath;
+        const editablePath = initialPath ?? croppedPath;
 
-        if (bestPath) {
+        if (editablePath) {
           onCapture?.({
-            path: bestPath,
+            path: editablePath,
             initialPath,
             croppedPath,
             quad,
+            rectangle: normalizedRectangle,
             width: event.width ?? 0,
             height: event.height ?? 0,
           });
@@ -224,13 +228,17 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
         };
 
         if (autoCapture) {
-          if (payload.stableCounter >= Math.max(minStableFrames - 1, 0)) {
+        if (payload.stableCounter >= Math.max(minStableFrames - 1, 0)) {
             setIsAutoCapturing(true);
           } else if (payload.stableCounter === 0) {
             setIsAutoCapturing(false);
           }
         }
 
+        if (payload.rectangleCoordinates) {
+          lastRectangleRef.current = payload.rectangleCoordinates;
+        }
+
         const isGoodRectangle = payload.lastDetectionType === 0;
         setDetectedRectangle(isGoodRectangle && rectangleOnScreen ? payload : null);
         onRectangleDetect?.(payload);
@@ -252,7 +260,7 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
       [capture],
     );
 
-    const overlayPolygon = detectedRectangle?.rectangleOnScreen ?? null;
+    const overlayPolygon = detectedRectangle?.rectangleOnScreen ?? detectedRectangle?.rectangleCoordinates ?? null;
     const overlayIsActive = autoCapture ? isAutoCapturing : (detectedRectangle?.stableCounter ?? 0) > 0;
 
     return (

package/src/FullDocScanner.tsx

@@ -116,6 +116,42 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     );
   }, [capturedDoc]);
 
+  useEffect(() => {
+    if (!capturedDoc || !imageSize || cropRectangle) {
+      return;
+    }
+
+    const baseWidth = capturedDoc.width > 0 ? capturedDoc.width : imageSize.width;
+    const baseHeight = capturedDoc.height > 0 ? capturedDoc.height : imageSize.height;
+
+    let initialRectangle: Rectangle | null = null;
+
+    if (capturedDoc.rectangle) {
+      initialRectangle = scaleRectangle(
+        capturedDoc.rectangle,
+        baseWidth,
+        baseHeight,
+        imageSize.width,
+        imageSize.height,
+      );
+    } else if (capturedDoc.quad && capturedDoc.quad.length === 4) {
+      const quadRectangle = quadToRectangle(capturedDoc.quad as Quad);
+      if (quadRectangle) {
+        initialRectangle = scaleRectangle(
+          quadRectangle,
+          baseWidth,
+          baseHeight,
+          imageSize.width,
+          imageSize.height,
+        );
+      }
+    }
+
+    if (initialRectangle) {
+      setCropRectangle(initialRectangle);
+    }
+  }, [capturedDoc, imageSize, cropRectangle]);
+
   const resetState = useCallback(() => {
     setScreen('scanner');
     setCapturedDoc(null);
@@ -128,6 +164,8 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     (document: CapturedDocument) => {
       const normalizedPath = stripFileUri(document.path);
       const nextQuad = document.quad && document.quad.length === 4 ? (document.quad as Quad) : null;
+      const quadRectangle = nextQuad ? quadToRectangle(nextQuad) : null;
+      const nextRectangle = document.rectangle ?? quadRectangle ?? null;
       const normalizedInitial =
         document.initialPath != null ? stripFileUri(document.initialPath) : normalizedPath;
       const normalizedCropped =
@@ -139,8 +177,9 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
         initialPath: normalizedInitial,
         croppedPath: normalizedCropped,
         quad: nextQuad,
+        rectangle: nextRectangle,
       });
-      setCropRectangle(nextQuad ? quadToRectangle(nextQuad) : null);
+      setCropRectangle(null);
       setScreen('crop');
     },
     [],
@@ -173,22 +212,35 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       throw new Error('CustomCropManager.crop is not available');
     }
 
-    const fallbackRectangle =
-      capturedDoc.quad && capturedDoc.quad.length === 4
-        ? quadToRectangle(capturedDoc.quad as Quad)
-        : null;
+    const baseWidth = capturedDoc.width > 0 ? capturedDoc.width : size.width;
+    const baseHeight = capturedDoc.height > 0 ? capturedDoc.height : size.height;
 
-    const scaledFallback = fallbackRectangle
+    const rectangleFromDetection = capturedDoc.rectangle
       ? scaleRectangle(
-          fallbackRectangle,
-          capturedDoc.width,
-          capturedDoc.height,
+          capturedDoc.rectangle,
+          baseWidth,
+          baseHeight,
           size.width,
           size.height,
         )
       : null;
 
-    const rectangle = cropRectangle ?? scaledFallback;
+    let fallbackRectangle: Rectangle | null = rectangleFromDetection;
+
+    if (!fallbackRectangle && capturedDoc.quad && capturedDoc.quad.length === 4) {
+      const quadRectangle = quadToRectangle(capturedDoc.quad as Quad);
+      if (quadRectangle) {
+        fallbackRectangle = scaleRectangle(
+          quadRectangle,
+          baseWidth,
+          baseHeight,
+          size.width,
+          size.height,
+        );
+      }
+    }
+
+    const rectangle = cropRectangle ?? fallbackRectangle;
 
     const base64 = await new Promise<string>((resolve, reject) => {
       cropManager.crop(

package/src/types.ts

@@ -14,6 +14,7 @@ export type CapturedDocument = {
   initialPath?: string | null;
   croppedPath?: string | null;
   quad: Point[] | null;
+  rectangle?: Rectangle | null;
   width: number;
   height: number;
 };

package/src/utils/overlay.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Easing, StyleSheet, View } from 'react-native';
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
 import type { Rectangle } from '../types';
 
 let SvgModule: typeof import('react-native-svg') | null = null;
@@ -11,19 +11,35 @@ try {
   SvgModule = null;
 }
 
-const SCAN_DURATION_MS = 2200;
 const GRID_STEPS = [1 / 3, 2 / 3];
 
-type PolygonMetrics = {
-  minX: number;
-  maxX: number;
-  minY: number;
-  maxY: number;
-  width: number;
-  height: number;
-};
+const createPointsString = (polygon: Rectangle): string =>
+  [
+    `${polygon.topLeft.x},${polygon.topLeft.y}`,
+    `${polygon.topRight.x},${polygon.topRight.y}`,
+    `${polygon.bottomRight.x},${polygon.bottomRight.y}`,
+    `${polygon.bottomLeft.x},${polygon.bottomLeft.y}`,
+  ].join(' ');
+
+const interpolatePoint = (a: { x: number; y: number }, b: { x: number; y: number }, t: number) => ({
+  x: a.x + (b.x - a.x) * t,
+  y: a.y + (b.y - a.y) * t,
+});
+
+const createGridLines = (polygon: Rectangle) =>
+  GRID_STEPS.flatMap((step) => {
+    const horizontalStart = interpolatePoint(polygon.topLeft, polygon.bottomLeft, step);
+    const horizontalEnd = interpolatePoint(polygon.topRight, polygon.bottomRight, step);
+    const verticalStart = interpolatePoint(polygon.topLeft, polygon.topRight, step);
+    const verticalEnd = interpolatePoint(polygon.bottomLeft, polygon.bottomRight, step);
+
+    return [
+      { x1: horizontalStart.x, y1: horizontalStart.y, x2: horizontalEnd.x, y2: horizontalEnd.y },
+      { x1: verticalStart.x, y1: verticalStart.y, x2: verticalEnd.x, y2: verticalEnd.y },
+    ];
+  });
 
-const calculateMetrics = (polygon: Rectangle): PolygonMetrics => {
+const getBounds = (polygon: Rectangle) => {
   const minX = Math.min(
     polygon.topLeft.x,
     polygon.bottomLeft.x,
@@ -51,40 +67,12 @@ const calculateMetrics = (polygon: Rectangle): PolygonMetrics => {
 
   return {
     minX,
-    maxX,
     minY,
-    maxY,
     width: maxX - minX,
     height: maxY - minY,
   };
 };
 
-const createPointsString = (polygon: Rectangle): string =>
-  [
-    `${polygon.topLeft.x},${polygon.topLeft.y}`,
-    `${polygon.topRight.x},${polygon.topRight.y}`,
-    `${polygon.bottomRight.x},${polygon.bottomRight.y}`,
-    `${polygon.bottomLeft.x},${polygon.bottomLeft.y}`,
-  ].join(' ');
-
-const interpolatePoint = (a: { x: number; y: number }, b: { x: number; y: number }, t: number) => ({
-  x: a.x + (b.x - a.x) * t,
-  y: a.y + (b.y - a.y) * t,
-});
-
-const createGridLines = (polygon: Rectangle) =>
-  GRID_STEPS.flatMap((step) => {
-    const horizontalStart = interpolatePoint(polygon.topLeft, polygon.bottomLeft, step);
-    const horizontalEnd = interpolatePoint(polygon.topRight, polygon.bottomRight, step);
-    const verticalStart = interpolatePoint(polygon.topLeft, polygon.topRight, step);
-    const verticalEnd = interpolatePoint(polygon.bottomLeft, polygon.bottomRight, step);
-
-    return [
-      { x1: horizontalStart.x, y1: horizontalStart.y, x2: horizontalEnd.x, y2: horizontalEnd.y },
-      { x1: verticalStart.x, y1: verticalStart.y, x2: verticalEnd.x, y2: verticalEnd.y },
-    ];
-  });
-
 export interface ScannerOverlayProps {
   active: boolean;
   color?: string;
@@ -93,89 +81,21 @@ export interface ScannerOverlayProps {
 }
 
 export const ScannerOverlay: React.FC<ScannerOverlayProps> = ({
-  active,
+  active: _active, // kept for compatibility; no animation currently
   color = '#0b7ef4',
   lineWidth = StyleSheet.hairlineWidth,
   polygon,
 }) => {
-  const scanProgress = useRef(new Animated.Value(0)).current;
-  const fallbackBase = useRef(new Animated.Value(0)).current;
-  const [scanY, setScanY] = useState<number | null>(null);
-
-  const metrics = useMemo(() => (polygon ? calculateMetrics(polygon) : null), [polygon]);
-
-  const scanBarHeight = useMemo(() => {
-    if (!metrics) return 0;
-    return Math.max(metrics.height * 0.2, 16);
-  }, [metrics]);
-
-  const travelDistance = useMemo(() => {
-    if (!metrics) {
-      return 0;
-    }
-    return Math.max(metrics.height - scanBarHeight, 0);
-  }, [metrics, scanBarHeight]);
-
-  useEffect(() => {
-    scanProgress.stopAnimation();
-    scanProgress.setValue(0);
-    setScanY(null);
-
-    if (!active || !metrics || travelDistance <= 0) {
-      return undefined;
-    }
-
-    const loop = Animated.loop(
-      Animated.sequence([
-        Animated.timing(scanProgress, {
-          toValue: 1,
-          duration: SCAN_DURATION_MS,
-          easing: Easing.inOut(Easing.quad),
-          useNativeDriver: false,
-        }),
-        Animated.timing(scanProgress, {
-          toValue: 0,
-          duration: SCAN_DURATION_MS,
-          easing: Easing.inOut(Easing.quad),
-          useNativeDriver: false,
-        }),
-      ]),
-    );
+  const points = useMemo(() => (polygon ? createPointsString(polygon) : null), [polygon]);
+  const gridLines = useMemo(() => (polygon ? createGridLines(polygon) : []), [polygon]);
+  const bounds = useMemo(() => (polygon ? getBounds(polygon) : null), [polygon]);
 
-    loop.start();
-    return () => {
-      loop.stop();
-      scanProgress.stopAnimation();
-    };
-  }, [active, metrics, scanProgress, travelDistance]);
-
-  useEffect(() => {
-    if (!metrics || travelDistance <= 0) {
-      setScanY(null);
-      return undefined;
-    }
-
-    const listenerId = scanProgress.addListener(({ value }) => {
-      const nextValue = metrics.minY + travelDistance * value;
-      if (Number.isFinite(nextValue)) {
-        setScanY(nextValue);
-      }
-    });
-
-    return () => {
-      scanProgress.removeListener(listenerId);
-    };
-  }, [metrics, scanProgress, travelDistance]);
-
-  if (!polygon || !metrics || metrics.width <= 0 || metrics.height <= 0) {
+  if (!polygon || !points || !bounds) {
     return null;
   }
 
   if (SvgModule) {
-    const { default: Svg, Polygon, Line, Defs, LinearGradient, Stop, Rect } = SvgModule;
-    const gridLines = createGridLines(polygon);
-    const points = createPointsString(polygon);
-    const scanRectY = scanY ?? metrics.minY;
+    const { default: Svg, Polygon, Line } = SvgModule;
 
     return (
       <View pointerEvents="none" style={StyleSheet.absoluteFill}>
@@ -194,60 +114,26 @@ export const ScannerOverlay: React.FC<ScannerOverlayProps> = ({
             />
           ))}
           <Polygon points={points} stroke={color} strokeWidth={lineWidth} fill="none" />
-          <Defs>
-            <LinearGradient id="scanGradient" x1="0" y1="0" x2="0" y2="1">
-              <Stop offset="0%" stopColor="rgba(255,255,255,0)" />
-              <Stop offset="50%" stopColor={color} stopOpacity={0.8} />
-              <Stop offset="100%" stopColor="rgba(255,255,255,0)" />
-            </LinearGradient>
-          </Defs>
-          {active && travelDistance > 0 && Number.isFinite(scanRectY) && (
-            <Rect
-              x={metrics.minX}
-              width={metrics.width}
-              height={scanBarHeight}
-              fill="url(#scanGradient)"
-              y={scanRectY}
-            />
-          )}
         </Svg>
       </View>
     );
   }
 
-  const relativeTranslate =
-    metrics && travelDistance > 0
-      ? Animated.multiply(scanProgress, travelDistance)
-      : fallbackBase;
-
   return (
     <View pointerEvents="none" style={StyleSheet.absoluteFill}>
       <View
         style={[
           styles.fallbackBox,
           {
-            left: metrics.minX,
-            top: metrics.minY,
-            width: metrics.width,
-            height: metrics.height,
+            left: bounds.minX,
+            top: bounds.minY,
+            width: bounds.width,
+            height: bounds.height,
             borderColor: color,
             borderWidth: lineWidth,
           },
         ]}
-      >
-        {active && travelDistance > 0 && (
-          <Animated.View
-            style={[
-              styles.fallbackScanBar,
-              {
-                backgroundColor: color,
-                height: scanBarHeight,
-                transform: [{ translateY: relativeTranslate }],
-              },
-            ]}
-          />
-        )}
-      </View>
+      />
     </View>
   );
 };
@@ -256,10 +142,5 @@ const styles = StyleSheet.create({
   fallbackBox: {
     position: 'absolute',
     backgroundColor: 'rgba(11, 126, 244, 0.1)',
-    overflow: 'hidden',
-  },
-  fallbackScanBar: {
-    width: '100%',
-    opacity: 0.4,
   },
 });