react-native-rectangle-doc-scanner 0.64.0 → 0.66.0

package/dist/DocScanner.d.ts

@@ -1,22 +1,16 @@
 import React, { ReactNode } from 'react';
-import { Camera } from 'react-native-vision-camera';
 import type { Point } from './types';
-type CameraOverrides = Omit<React.ComponentProps<typeof Camera>, 'style' | 'ref' | 'frameProcessor'>;
 /**
- * Configuration for detection quality and behavior
+ * Detection configuration is no longer used now that the native
+ * implementation handles edge detection. Keeping it for backwards
+ * compatibility with existing consumer code.
  */
 export interface DetectionConfig {
-    /** Processing resolution width (default: 1280) - higher = more accurate but slower */
     processingWidth?: number;
-    /** Canny edge detection lower threshold (default: 40) */
     cannyLowThreshold?: number;
-    /** Canny edge detection upper threshold (default: 120) */
     cannyHighThreshold?: number;
-    /** Snap distance in pixels for corner locking (default: 8) */
     snapDistance?: number;
-    /** Max frames to hold anchor when detection fails (default: 20) */
     maxAnchorMisses?: number;
-    /** Maximum center movement allowed while maintaining lock (default: 200px) */
     maxCenterDelta?: number;
 }
 interface Props {
@@ -29,9 +23,13 @@ interface Props {
     overlayColor?: string;
     autoCapture?: boolean;
     minStableFrames?: number;
-    cameraProps?: CameraOverrides;
+    enableTorch?: boolean;
+    quality?: number;
+    useBase64?: boolean;
     children?: ReactNode;
-    /** Advanced detection configuration */
+    showGrid?: boolean;
+    gridColor?: string;
+    gridLineWidth?: number;
     detectionConfig?: DetectionConfig;
 }
 export declare const DocScanner: React.FC<Props>;

package/dist/DocScanner.js

@@ -32,451 +32,84 @@ 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.DocScanner = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const react_native_vision_camera_1 = require("react-native-vision-camera");
-const vision_camera_resize_plugin_1 = require("vision-camera-resize-plugin");
-const react_native_worklets_core_1 = require("react-native-worklets-core");
-const react_native_fast_opencv_1 = require("react-native-fast-opencv");
+const react_native_document_scanner_plugin_1 = __importDefault(require("react-native-document-scanner-plugin"));
 const overlay_1 = require("./utils/overlay");
-const stability_1 = require("./utils/stability");
-const quad_1 = require("./utils/quad");
-const isConvexQuadrilateral = (points) => {
-    'worklet';
-    try {
-        if (points.length !== 4) {
-            return false;
-        }
-        // Validate all points have valid x and y
-        for (const p of points) {
-            if (typeof p.x !== 'number' || typeof p.y !== 'number' ||
-                !isFinite(p.x) || !isFinite(p.y)) {
-                return false;
-            }
-        }
-        let previous = 0;
-        for (let i = 0; i < 4; i++) {
-            const p0 = points[i];
-            const p1 = points[(i + 1) % 4];
-            const p2 = points[(i + 2) % 4];
-            const cross = (p1.x - p0.x) * (p2.y - p1.y) - (p1.y - p0.y) * (p2.x - p1.x);
-            // Relax the collinearity check - allow very small cross products
-            if (Math.abs(cross) < 0.1) {
-                return false;
-            }
-            if (i === 0) {
-                previous = cross;
-            }
-            else if (previous * cross < 0) {
-                return false;
-            }
-        }
-        return true;
-    }
-    catch (err) {
-        return false;
-    }
-};
-const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, minStableFrames = 8, cameraProps, children, detectionConfig = {}, }) => {
-    const device = (0, react_native_vision_camera_1.useCameraDevice)('back');
-    const { hasPermission, requestPermission } = (0, react_native_vision_camera_1.useCameraPermission)();
-    const { resize } = (0, vision_camera_resize_plugin_1.useResizePlugin)();
-    const camera = (0, react_1.useRef)(null);
-    const handleCameraRef = (0, react_1.useCallback)((ref) => {
-        camera.current = ref;
-    }, []);
+const NativeDocumentScanner = react_native_document_scanner_plugin_1.default;
+const DEFAULT_OVERLAY_COLOR = '#e7a649';
+const GRID_COLOR_FALLBACK = 'rgba(231, 166, 73, 0.35)';
+const DocScanner = ({ onCapture, overlayColor = DEFAULT_OVERLAY_COLOR, autoCapture = true, minStableFrames = 8, enableTorch = false, quality, useBase64 = false, children, showGrid = true, gridColor, gridLineWidth = 2, }) => {
+    const scannerRef = (0, react_1.useRef)(null);
+    const capturingRef = (0, react_1.useRef)(false);
     const [quad, setQuad] = (0, react_1.useState)(null);
-    const [stable, setStable] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        requestPermission();
-    }, [requestPermission]);
-    const lastQuadRef = (0, react_1.useRef)(null);
-    const smoothingBufferRef = (0, react_1.useRef)([]);
-    const anchorQuadRef = (0, react_1.useRef)(null);
-    const anchorMissesRef = (0, react_1.useRef)(0);
-    const anchorConfidenceRef = (0, react_1.useRef)(0);
-    const lastMeasurementRef = (0, react_1.useRef)(null);
-    const frameSizeRef = (0, react_1.useRef)(null);
-    // Detection parameters - configurable via props with sensible defaults
-    const PROCESSING_WIDTH = detectionConfig.processingWidth ?? 1280;
-    const CANNY_LOW = detectionConfig.cannyLowThreshold ?? 40;
-    const CANNY_HIGH = detectionConfig.cannyHighThreshold ?? 120;
-    const SNAP_DISTANCE = detectionConfig.snapDistance ?? 8;
-    const MAX_ANCHOR_MISSES = detectionConfig.maxAnchorMisses ?? 20;
-    const REJECT_CENTER_DELTA = detectionConfig.maxCenterDelta ?? 200;
-    // Fixed parameters for algorithm stability
-    const MAX_HISTORY = 5;
-    const SNAP_CENTER_DISTANCE = 18;
-    const BLEND_DISTANCE = 80;
-    const MAX_CENTER_DELTA = 120;
-    const MAX_AREA_SHIFT = 0.55;
-    const HISTORY_RESET_DISTANCE = 90;
-    const MIN_AREA_RATIO = 0.0002;
-    const MAX_AREA_RATIO = 0.9;
-    const MIN_EDGE_RATIO = 0.015;
-    const MIN_CONFIDENCE_TO_HOLD = 2;
-    const MAX_ANCHOR_CONFIDENCE = 30;
-    const updateQuad = (0, react_native_worklets_core_1.useRunOnJS)((value) => {
-        if (__DEV__) {
-            console.log('[DocScanner] quad', value);
+    const [frameSize, setFrameSize] = (0, react_1.useState)(null);
+    const effectiveGridColor = (0, react_1.useMemo)(() => gridColor ?? GRID_COLOR_FALLBACK, [gridColor]);
+    const handleLayout = (0, react_1.useCallback)((event) => {
+        const { width, height } = event.nativeEvent.layout;
+        if (width > 0 && height > 0) {
+            setFrameSize({ width, height });
         }
-        const fallbackToAnchor = (resetHistory) => {
-            if (resetHistory) {
-                smoothingBufferRef.current = [];
-                lastMeasurementRef.current = null;
-            }
-            const anchor = anchorQuadRef.current;
-            const anchorConfidence = anchorConfidenceRef.current;
-            if (anchor && anchorConfidence >= MIN_CONFIDENCE_TO_HOLD) {
-                anchorMissesRef.current += 1;
-                if (anchorMissesRef.current <= MAX_ANCHOR_MISSES) {
-                    anchorConfidenceRef.current = Math.max(1, anchorConfidence - 1);
-                    lastQuadRef.current = anchor;
-                    setQuad(anchor);
-                    return true;
-                }
-            }
-            anchorMissesRef.current = 0;
-            anchorConfidenceRef.current = 0;
-            anchorQuadRef.current = null;
-            lastQuadRef.current = null;
+    }, []);
+    const handleRectangleDetect = (0, react_1.useCallback)((event) => {
+        const coordinates = event?.rectangleCoordinates;
+        if (!coordinates) {
             setQuad(null);
-            return false;
-        };
-        if (!(0, quad_1.isValidQuad)(value)) {
-            const handled = fallbackToAnchor(false);
-            if (handled) {
-                return;
-            }
-            return;
-        }
-        anchorMissesRef.current = 0;
-        const ordered = (0, quad_1.orderQuadPoints)(value);
-        const sanitized = (0, quad_1.sanitizeQuad)(ordered);
-        const frameSize = frameSizeRef.current;
-        const frameArea = frameSize ? frameSize.width * frameSize.height : null;
-        const area = (0, quad_1.quadArea)(sanitized);
-        const edges = (0, quad_1.quadEdgeLengths)(sanitized);
-        const minEdge = Math.min(...edges);
-        const maxEdge = Math.max(...edges);
-        const aspectRatio = maxEdge > 0 ? maxEdge / Math.max(minEdge, 1) : 0;
-        const minEdgeThreshold = frameSize
-            ? Math.max(14, Math.min(frameSize.width, frameSize.height) * MIN_EDGE_RATIO)
-            : 14;
-        const areaTooSmall = frameArea ? area < frameArea * MIN_AREA_RATIO : area === 0;
-        const areaTooLarge = frameArea ? area > frameArea * MAX_AREA_RATIO : false;
-        const edgesTooShort = minEdge < minEdgeThreshold;
-        const aspectTooExtreme = aspectRatio > 7;
-        if (areaTooSmall || areaTooLarge || edgesTooShort || aspectTooExtreme) {
-            const handled = fallbackToAnchor(true);
-            if (handled) {
-                return;
-            }
             return;
         }
-        const lastMeasurement = lastMeasurementRef.current;
-        const shouldResetHistory = lastMeasurement && (0, quad_1.quadDistance)(lastMeasurement, sanitized) > HISTORY_RESET_DISTANCE;
-        const existingHistory = shouldResetHistory ? [] : smoothingBufferRef.current;
-        const nextHistory = existingHistory.length >= MAX_HISTORY
-            ? [...existingHistory.slice(existingHistory.length - (MAX_HISTORY - 1)), sanitized]
-            : [...existingHistory, sanitized];
-        const hasHistory = nextHistory.length >= 2;
-        let candidate = hasHistory ? (0, quad_1.weightedAverageQuad)(nextHistory) : sanitized;
-        const anchor = anchorQuadRef.current;
-        if (anchor && (0, quad_1.isValidQuad)(anchor)) {
-            const delta = (0, quad_1.quadDistance)(candidate, anchor);
-            const anchorCenter = (0, quad_1.quadCenter)(anchor);
-            const candidateCenter = (0, quad_1.quadCenter)(candidate);
-            const anchorArea = (0, quad_1.quadArea)(anchor);
-            const candidateArea = (0, quad_1.quadArea)(candidate);
-            const centerDelta = Math.hypot(candidateCenter.x - anchorCenter.x, candidateCenter.y - anchorCenter.y);
-            const areaShift = anchorArea > 0 ? Math.abs(anchorArea - candidateArea) / anchorArea : 0;
-            if (centerDelta >= REJECT_CENTER_DELTA || areaShift > 1.2) {
-                smoothingBufferRef.current = [sanitized];
-                lastMeasurementRef.current = sanitized;
-                anchorQuadRef.current = candidate;
-                anchorConfidenceRef.current = 1;
-                anchorMissesRef.current = 0;
-                lastQuadRef.current = candidate;
-                setQuad(candidate);
-                return;
-            }
-            if (delta <= SNAP_DISTANCE && centerDelta <= SNAP_CENTER_DISTANCE && areaShift <= 0.08) {
-                candidate = anchor;
-                smoothingBufferRef.current = nextHistory;
-                lastMeasurementRef.current = sanitized;
-                anchorConfidenceRef.current = Math.min(anchorConfidenceRef.current + 1, MAX_ANCHOR_CONFIDENCE);
-            }
-            else if (delta <= BLEND_DISTANCE && centerDelta <= MAX_CENTER_DELTA && areaShift <= MAX_AREA_SHIFT) {
-                const normalizedDelta = Math.min(1, delta / BLEND_DISTANCE);
-                const adaptiveAlpha = 0.25 + normalizedDelta * 0.45; // 0.25..0.7 range
-                candidate = (0, quad_1.blendQuads)(anchor, candidate, adaptiveAlpha);
-                smoothingBufferRef.current = nextHistory;
-                lastMeasurementRef.current = sanitized;
-                anchorConfidenceRef.current = Math.min(anchorConfidenceRef.current + 1, MAX_ANCHOR_CONFIDENCE);
-            }
-            else {
-                const handled = fallbackToAnchor(true);
-                if (handled) {
-                    return;
-                }
-                return;
-            }
-        }
-        else {
-            smoothingBufferRef.current = nextHistory;
-            lastMeasurementRef.current = sanitized;
-            anchorConfidenceRef.current = Math.min(anchorConfidenceRef.current + 1, MAX_ANCHOR_CONFIDENCE);
-        }
-        candidate = (0, quad_1.orderQuadPoints)(candidate);
-        anchorQuadRef.current = candidate;
-        lastQuadRef.current = candidate;
-        setQuad(candidate);
-        anchorMissesRef.current = 0;
-    }, []);
-    const reportError = (0, react_native_worklets_core_1.useRunOnJS)((step, error) => {
-        const message = error instanceof Error ? error.message : `${error}`;
-        console.warn(`[DocScanner] frame error at ${step}: ${message}`);
-    }, []);
-    const reportStage = (0, react_native_worklets_core_1.useRunOnJS)((_stage) => {
-        // Disabled for performance
-    }, []);
-    const [frameSize, setFrameSize] = (0, react_1.useState)(null);
-    const updateFrameSize = (0, react_native_worklets_core_1.useRunOnJS)((width, height) => {
-        frameSizeRef.current = { width, height };
-        setFrameSize({ width, height });
+        const nextQuad = [
+            coordinates.topLeft,
+            coordinates.topRight,
+            coordinates.bottomRight,
+            coordinates.bottomLeft,
+        ];
+        setQuad(nextQuad);
     }, []);
-    const frameProcessor = (0, react_native_vision_camera_1.useFrameProcessor)((frame) => {
-        'worklet';
-        let step = 'start';
-        try {
-            // Report frame size for coordinate transformation
-            updateFrameSize(frame.width, frame.height);
-            // Use configurable resolution for accuracy vs performance balance
-            const ratio = PROCESSING_WIDTH / frame.width;
-            const width = Math.floor(frame.width * ratio);
-            const height = Math.floor(frame.height * ratio);
-            step = 'resize';
-            reportStage(step);
-            const resized = resize(frame, {
-                dataType: 'uint8',
-                pixelFormat: 'bgr',
-                scale: { width: width, height: height },
-            });
-            step = 'frameBufferToMat';
-            reportStage(step);
-            let mat = react_native_fast_opencv_1.OpenCV.frameBufferToMat(height, width, 3, resized);
-            step = 'cvtColor';
-            reportStage(step);
-            react_native_fast_opencv_1.OpenCV.invoke('cvtColor', mat, mat, react_native_fast_opencv_1.ColorConversionCodes.COLOR_BGR2GRAY);
-            // Enhanced morphological operations for noise reduction
-            const morphologyKernel = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Size, 7, 7);
-            step = 'getStructuringElement';
-            reportStage(step);
-            const element = react_native_fast_opencv_1.OpenCV.invoke('getStructuringElement', react_native_fast_opencv_1.MorphShapes.MORPH_RECT, morphologyKernel);
-            step = 'morphologyEx';
-            reportStage(step);
-            // MORPH_CLOSE to fill small holes in edges
-            react_native_fast_opencv_1.OpenCV.invoke('morphologyEx', mat, mat, react_native_fast_opencv_1.MorphTypes.MORPH_CLOSE, element);
-            // MORPH_OPEN to remove small noise
-            react_native_fast_opencv_1.OpenCV.invoke('morphologyEx', mat, mat, react_native_fast_opencv_1.MorphTypes.MORPH_OPEN, element);
-            // Bilateral filter for edge-preserving smoothing (better quality than Gaussian)
-            step = 'bilateralFilter';
-            reportStage(step);
-            try {
-                const tempMat = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Mat);
-                react_native_fast_opencv_1.OpenCV.invoke('bilateralFilter', mat, tempMat, 9, 75, 75);
-                mat = tempMat;
-            }
-            catch (error) {
-                if (__DEV__) {
-                    console.warn('[DocScanner] bilateralFilter unavailable, falling back to GaussianBlur', error);
-                }
-                step = 'gaussianBlurFallback';
-                reportStage(step);
-                const blurKernel = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Size, 5, 5);
-                react_native_fast_opencv_1.OpenCV.invoke('GaussianBlur', mat, mat, blurKernel, 0);
-            }
-            step = 'Canny';
-            reportStage(step);
-            // Configurable Canny parameters for adaptive edge detection
-            react_native_fast_opencv_1.OpenCV.invoke('Canny', mat, mat, CANNY_LOW, CANNY_HIGH);
-            step = 'createContours';
-            reportStage(step);
-            const contours = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.PointVectorOfVectors);
-            react_native_fast_opencv_1.OpenCV.invoke('findContours', mat, contours, react_native_fast_opencv_1.RetrievalModes.RETR_EXTERNAL, react_native_fast_opencv_1.ContourApproximationModes.CHAIN_APPROX_SIMPLE);
-            let best = null;
-            let maxArea = 0;
-            const frameArea = width * height;
-            step = 'toJSValue';
-            reportStage(step);
-            const contourVector = react_native_fast_opencv_1.OpenCV.toJSValue(contours);
-            const contourArray = Array.isArray(contourVector?.array) ? contourVector.array : [];
-            for (let i = 0; i < contourArray.length; i += 1) {
-                step = `contour_${i}_copy`;
-                reportStage(step);
-                const contour = react_native_fast_opencv_1.OpenCV.copyObjectFromVector(contours, i);
-                // Compute absolute area first
-                step = `contour_${i}_area_abs`;
-                reportStage(step);
-                const { value: area } = react_native_fast_opencv_1.OpenCV.invoke('contourArea', contour, false);
-                // Skip extremely small contours, but keep threshold very low to allow distant documents
-                if (typeof area !== 'number' || !isFinite(area)) {
-                    continue;
-                }
-                if (area < 50) {
-                    continue;
-                }
-                step = `contour_${i}_area`; // ratio stage
-                reportStage(step);
-                const areaRatio = area / frameArea;
-                if (__DEV__) {
-                    console.log('[DocScanner] area', area, 'ratio', areaRatio);
-                }
-                // Skip if area ratio is too small or too large
-                if (areaRatio < 0.0002 || areaRatio > 0.99) {
-                    continue;
-                }
-                // Try to use convex hull for better corner detection
-                let contourToUse = contour;
-                try {
-                    step = `contour_${i}_convexHull`;
-                    reportStage(step);
-                    const hull = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.PointVector);
-                    react_native_fast_opencv_1.OpenCV.invoke('convexHull', contour, hull, false, true);
-                    contourToUse = hull;
-                }
-                catch (err) {
-                    // If convexHull fails, use original contour
-                    if (__DEV__) {
-                        console.warn('[DocScanner] convexHull failed, using original contour');
-                    }
-                }
-                step = `contour_${i}_arcLength`;
-                reportStage(step);
-                const { value: perimeter } = react_native_fast_opencv_1.OpenCV.invoke('arcLength', contourToUse, true);
-                const approx = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.PointVector);
-                let approxArray = [];
-                // Try more epsilon values from 0.1% to 10% for difficult shapes
-                const epsilonValues = [
-                    0.001, 0.002, 0.003, 0.004, 0.005, 0.006, 0.007, 0.008, 0.009,
-                    0.01, 0.012, 0.015, 0.018, 0.02, 0.025, 0.03, 0.04, 0.05, 0.06, 0.07, 0.08, 0.09, 0.1
-                ];
-                for (let attempt = 0; attempt < epsilonValues.length; attempt += 1) {
-                    const epsilon = epsilonValues[attempt] * perimeter;
-                    step = `contour_${i}_approxPolyDP_attempt_${attempt}`;
-                    reportStage(step);
-                    react_native_fast_opencv_1.OpenCV.invoke('approxPolyDP', contourToUse, approx, epsilon, true);
-                    step = `contour_${i}_toJS_attempt_${attempt}`;
-                    reportStage(step);
-                    const approxValue = react_native_fast_opencv_1.OpenCV.toJSValue(approx);
-                    const candidate = Array.isArray(approxValue?.array) ? approxValue.array : [];
-                    if (__DEV__) {
-                        console.log('[DocScanner] approx length', candidate.length, 'epsilon', epsilon);
-                    }
-                    if (candidate.length === 4) {
-                        approxArray = candidate;
-                        break;
-                    }
-                }
-                // Only proceed if we found exactly 4 corners
-                if (approxArray.length !== 4) {
-                    continue;
-                }
-                step = `contour_${i}_convex`;
-                reportStage(step);
-                // Validate points before processing
-                const isValidPoint = (pt) => {
-                    return typeof pt.x === 'number' && typeof pt.y === 'number' &&
-                        !isNaN(pt.x) && !isNaN(pt.y) &&
-                        isFinite(pt.x) && isFinite(pt.y);
-                };
-                if (!approxArray.every(isValidPoint)) {
-                    if (__DEV__) {
-                        console.warn('[DocScanner] invalid points in approxArray', approxArray);
-                    }
-                    continue;
-                }
-                const points = approxArray.map((pt) => ({
-                    x: pt.x / ratio,
-                    y: pt.y / ratio,
-                }));
-                // Verify the quadrilateral is convex (valid document shape)
-                try {
-                    if (!isConvexQuadrilateral(points)) {
-                        if (__DEV__) {
-                            console.log('[DocScanner] not convex, skipping:', points);
-                        }
-                        continue;
-                    }
-                }
-                catch (err) {
-                    if (__DEV__) {
-                        console.warn('[DocScanner] convex check error:', err, 'points:', points);
-                    }
-                    continue;
-                }
-                if (area > maxArea) {
-                    best = points;
-                    maxArea = area;
-                }
-            }
-            step = 'clearBuffers';
-            reportStage(step);
-            react_native_fast_opencv_1.OpenCV.clearBuffers();
-            step = 'updateQuad';
-            reportStage(step);
-            updateQuad(best);
+    const handlePictureTaken = (0, react_1.useCallback)((event) => {
+        capturingRef.current = false;
+        const path = event?.croppedImage ?? event?.initialImage;
+        if (!path) {
+            return;
         }
-        catch (error) {
-            reportError(step, error);
+        const width = event?.width ?? frameSize?.width ?? 0;
+        const height = event?.height ?? frameSize?.height ?? 0;
+        onCapture?.({
+            path,
+            quad,
+            width,
+            height,
+        });
+    }, [frameSize, onCapture, quad]);
+    const handleManualCapture = (0, react_1.useCallback)(() => {
+        if (autoCapture || capturingRef.current || !scannerRef.current) {
+            return;
         }
-    }, [resize, reportError, updateQuad]);
-    (0, react_1.useEffect)(() => {
-        const s = (0, stability_1.checkStability)(quad);
-        setStable(s);
-    }, [quad]);
-    (0, react_1.useEffect)(() => {
-        const capture = async () => {
-            if (autoCapture && quad && stable >= minStableFrames && camera.current && frameSize) {
-                const photo = await camera.current.takePhoto({ qualityPrioritization: 'quality' });
-                onCapture?.({
-                    path: photo.path,
-                    quad,
-                    width: frameSize.width,
-                    height: frameSize.height,
-                });
-                setStable(0);
-            }
-        };
-        capture();
-    }, [autoCapture, minStableFrames, onCapture, quad, stable, frameSize]);
-    const { device: overrideDevice, ...cameraRestProps } = cameraProps ?? {};
-    const resolvedDevice = overrideDevice ?? device;
-    if (!resolvedDevice || !hasPermission) {
-        return null;
-    }
-    return (react_1.default.createElement(react_native_1.View, { style: { flex: 1 } },
-        react_1.default.createElement(react_native_vision_camera_1.Camera, { ref: handleCameraRef, style: react_native_1.StyleSheet.absoluteFillObject, device: resolvedDevice, isActive: true, photo: true, frameProcessor: frameProcessor, frameProcessorFps: 15, ...cameraRestProps }),
-        react_1.default.createElement(overlay_1.Overlay, { quad: quad, color: overlayColor, frameSize: frameSize }),
-        !autoCapture && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.button, onPress: async () => {
-                if (!camera.current || !frameSize) {
-                    return;
-                }
-                const photo = await camera.current.takePhoto({ qualityPrioritization: 'quality' });
-                onCapture?.({
-                    path: photo.path,
-                    quad,
-                    width: frameSize.width,
-                    height: frameSize.height,
-                });
-            } })),
+        capturingRef.current = true;
+        scannerRef.current
+            .capture()
+            .catch((error) => {
+            console.warn('[DocScanner] manual capture failed', error);
+            capturingRef.current = false;
+        });
+    }, [autoCapture]);
+    return (react_1.default.createElement(react_native_1.View, { style: styles.container, onLayout: handleLayout },
+        react_1.default.createElement(NativeDocumentScanner, { ref: (instance) => {
+                scannerRef.current = instance;
+            }, style: react_native_1.StyleSheet.absoluteFill, overlayColor: "transparent", detectionCountBeforeCapture: autoCapture ? minStableFrames : 10000, enableTorch: enableTorch, hideControls: true, useBase64: useBase64, quality: quality, onRectangleDetect: handleRectangleDetect, onPictureTaken: handlePictureTaken }),
+        react_1.default.createElement(overlay_1.Overlay, { quad: quad, color: overlayColor, frameSize: frameSize, showGrid: showGrid, gridColor: effectiveGridColor, gridLineWidth: gridLineWidth }),
+        !autoCapture && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.button, onPress: handleManualCapture })),
         children));
 };
 exports.DocScanner = DocScanner;
 const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
     button: {
         position: 'absolute',
         bottom: 40,

package/dist/utils/overlay.d.ts

@@ -7,6 +7,9 @@ type OverlayProps = {
         width: number;
         height: number;
     } | null;
+    showGrid?: boolean;
+    gridColor?: string;
+    gridLineWidth?: number;
 };
 export declare const Overlay: React.FC<OverlayProps>;
 export {};

package/dist/utils/overlay.js

@@ -37,14 +37,18 @@ exports.Overlay = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_skia_1 = require("@shopify/react-native-skia");
-const Overlay = ({ quad, color = '#e7a649', frameSize }) => {
+const lerp = (start, end, t) => ({
+    x: start.x + (end.x - start.x) * t,
+    y: start.y + (end.y - start.y) * t,
+});
+const Overlay = ({ quad, color = '#e7a649', frameSize, showGrid = true, gridColor = 'rgba(231, 166, 73, 0.35)', gridLineWidth = 2, }) => {
     const { width: screenWidth, height: screenHeight } = (0, react_native_1.useWindowDimensions)();
-    const path = (0, react_1.useMemo)(() => {
+    const { outlinePath, gridPaths } = (0, react_1.useMemo)(() => {
         if (!quad || !frameSize) {
             if (__DEV__) {
                 console.log('[Overlay] no quad or frameSize', { quad, frameSize });
             }
-            return null;
+            return { outlinePath: null, gridPaths: [] };
         }
         if (__DEV__) {
             console.log('[Overlay] drawing quad:', quad);
@@ -93,15 +97,41 @@ const Overlay = ({ quad, color = '#e7a649', frameSize }) => {
         skPath.moveTo(transformedQuad[0].x, transformedQuad[0].y);
         transformedQuad.slice(1).forEach((p) => skPath.lineTo(p.x, p.y));
         skPath.close();
-        return skPath;
-    }, [quad, color, screenWidth, screenHeight, frameSize]);
+        const grid = [];
+        if (showGrid) {
+            const [topLeft, topRight, bottomRight, bottomLeft] = transformedQuad;
+            const steps = [1 / 3, 2 / 3];
+            steps.forEach((t) => {
+                const start = lerp(topLeft, topRight, t);
+                const end = lerp(bottomLeft, bottomRight, t);
+                const verticalPath = react_native_skia_1.Skia.Path.Make();
+                verticalPath.moveTo(start.x, start.y);
+                verticalPath.lineTo(end.x, end.y);
+                grid.push(verticalPath);
+            });
+            steps.forEach((t) => {
+                const start = lerp(topLeft, bottomLeft, t);
+                const end = lerp(topRight, bottomRight, t);
+                const horizontalPath = react_native_skia_1.Skia.Path.Make();
+                horizontalPath.moveTo(start.x, start.y);
+                horizontalPath.lineTo(end.x, end.y);
+                grid.push(horizontalPath);
+            });
+        }
+        return { outlinePath: skPath, gridPaths: grid };
+    }, [quad, screenWidth, screenHeight, frameSize, showGrid]);
     if (__DEV__) {
         console.log('[Overlay] rendering Canvas with dimensions:', screenWidth, 'x', screenHeight);
     }
     return (react_1.default.createElement(react_native_1.View, { style: styles.container, pointerEvents: "none" },
-        react_1.default.createElement(react_native_skia_1.Canvas, { style: { width: screenWidth, height: screenHeight } }, path && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_native_skia_1.Path, { path: path, color: color, style: "stroke", strokeWidth: 8 }),
-            react_1.default.createElement(react_native_skia_1.Path, { path: path, color: "rgba(231, 166, 73, 0.2)", style: "fill" }))))));
+        react_1.default.createElement(react_native_skia_1.Canvas, { style: { width: screenWidth, height: screenHeight } }, outlinePath && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_native_skia_1.Path, { path: outlinePath, color: color, style: "stroke", strokeWidth: 8 }),
+            react_1.default.createElement(react_native_skia_1.Path, { path: outlinePath, color: "rgba(231, 166, 73, 0.2)", style: "fill" }),
+            gridPaths.map((gridPath, index) => (react_1.default.createElement(react_native_skia_1.Path
+            // eslint-disable-next-line react/no-array-index-key
+            , { 
+                // eslint-disable-next-line react/no-array-index-key
+                key: `grid-${index}`, path: gridPath, color: gridColor, style: "stroke", strokeWidth: gridLineWidth }))))))));
 };
 exports.Overlay = Overlay;
 const styles = react_native_1.StyleSheet.create({