react-native-rectangle-doc-scanner 0.63.0 → 0.65.0

package/src/DocScanner.tsx

@@ -1,96 +1,71 @@
-import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { View, TouchableOpacity, StyleSheet } from 'react-native';
-import { Camera, useCameraDevice, useCameraPermission, useFrameProcessor } from 'react-native-vision-camera';
-import { useResizePlugin } from 'vision-camera-resize-plugin';
-import { useRunOnJS } from 'react-native-worklets-core';
+import React, {
+  ComponentType,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
-  OpenCV,
-  ColorConversionCodes,
-  MorphTypes,
-  MorphShapes,
-  RetrievalModes,
-  ContourApproximationModes,
-  ObjectType,
-} from 'react-native-fast-opencv';
+  LayoutChangeEvent,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import DocumentScanner from 'react-native-document-scanner-plugin';
 import { Overlay } from './utils/overlay';
-import { checkStability } from './utils/stability';
-import {
-  blendQuads,
-  isValidQuad,
-  orderQuadPoints,
-  quadArea,
-  quadCenter,
-  quadDistance,
-  quadEdgeLengths,
-  sanitizeQuad,
-  weightedAverageQuad,
-} from './utils/quad';
 import type { Point } from './types';
 
-const isConvexQuadrilateral = (points: Point[]) => {
-  '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);
+type NativeRectangle = {
+  topLeft: Point;
+  topRight: Point;
+  bottomRight: Point;
+  bottomLeft: Point;
+};
 
-      // Relax the collinearity check - allow very small cross products
-      if (Math.abs(cross) < 0.1) {
-        return false;
-      }
+type NativeRectangleEvent = {
+  rectangleCoordinates?: NativeRectangle | null;
+  stableCounter?: number;
+};
 
-      if (i === 0) {
-        previous = cross;
-      } else if (previous * cross < 0) {
-        return false;
-      }
-    }
+type NativeCaptureResult = {
+  croppedImage?: string;
+  initialImage?: string;
+  width?: number;
+  height?: number;
+};
 
-    return true;
-  } catch (err) {
-    return false;
-  }
+type DocumentScannerHandle = {
+  capture: () => Promise<NativeCaptureResult>;
 };
 
-type CameraRef = {
-  takePhoto: (options: { qualityPrioritization: 'balanced' | 'quality' | 'speed' }) => Promise<{
-    path: string;
-  }>;
+type NativeDocumentScannerProps = {
+  style?: object;
+  overlayColor?: string;
+  detectionCountBeforeCapture?: number;
+  enableTorch?: boolean;
+  hideControls?: boolean;
+  useBase64?: boolean;
+  quality?: number;
+  onRectangleDetect?: (event: NativeRectangleEvent) => void;
+  onPictureTaken?: (event: NativeCaptureResult) => void;
 };
 
-type CameraOverrides = Omit<React.ComponentProps<typeof Camera>, 'style' | 'ref' | 'frameProcessor'>;
+const NativeDocumentScanner = DocumentScanner as unknown as ComponentType<
+  NativeDocumentScannerProps & { ref?: React.Ref<DocumentScannerHandle> }
+>;
 
 /**
- * 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;
 }
 
@@ -99,534 +74,129 @@ 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;
 }
 
+const DEFAULT_OVERLAY_COLOR = '#e7a649';
+const GRID_COLOR_FALLBACK = 'rgba(231, 166, 73, 0.35)';
+
 export const DocScanner: React.FC<Props> = ({
   onCapture,
-  overlayColor = '#e7a649',
+  overlayColor = DEFAULT_OVERLAY_COLOR,
   autoCapture = true,
   minStableFrames = 8,
-  cameraProps,
+  enableTorch = false,
+  quality,
+  useBase64 = false,
   children,
-  detectionConfig = {},
+  showGrid = true,
+  gridColor,
+  gridLineWidth = 2,
 }) => {
-  const device = useCameraDevice('back');
-  const { hasPermission, requestPermission } = useCameraPermission();
-  const { resize } = useResizePlugin();
-  const camera = useRef<CameraRef | null>(null);
-  const handleCameraRef = useCallback((ref: CameraRef | null) => {
-    camera.current = ref;
-  }, []);
+  const scannerRef = useRef<DocumentScannerHandle | null>(null);
+  const capturingRef = useRef(false);
   const [quad, setQuad] = useState<Point[] | null>(null);
-  const [stable, setStable] = useState(0);
-
-  useEffect(() => {
-    requestPermission();
-  }, [requestPermission]);
-
-  const lastQuadRef = useRef<Point[] | null>(null);
-  const smoothingBufferRef = useRef<Point[][]>([]);
-  const anchorQuadRef = useRef<Point[] | null>(null);
-  const anchorMissesRef = useRef(0);
-  const anchorConfidenceRef = useRef(0);
-  const lastMeasurementRef = useRef<Point[] | null>(null);
-  const frameSizeRef = useRef<{ width: number; height: number } | null>(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;
+  const [frameSize, setFrameSize] = useState<{ width: number; height: number } | null>(null);
 
-  // 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 effectiveGridColor = useMemo(
+    () => gridColor ?? GRID_COLOR_FALLBACK,
+    [gridColor],
+  );
 
-  const updateQuad = useRunOnJS((value: Point[] | null) => {
-    if (__DEV__) {
-      console.log('[DocScanner] quad', value);
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    if (width > 0 && height > 0) {
+      setFrameSize({ width, height });
     }
+  }, []);
 
-    const fallbackToAnchor = (resetHistory: boolean) => {
-      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;
-        }
-      }
+  const handleRectangleDetect = useCallback((event: NativeRectangleEvent) => {
+    const coordinates = event?.rectangleCoordinates;
 
-      anchorMissesRef.current = 0;
-      anchorConfidenceRef.current = 0;
-      anchorQuadRef.current = null;
-      lastQuadRef.current = null;
+    if (!coordinates) {
       setQuad(null);
-      return false;
-    };
-
-    if (!isValidQuad(value)) {
-      const handled = fallbackToAnchor(false);
-      if (handled) {
-        return;
-      }
-      return;
-    }
-
-    anchorMissesRef.current = 0;
-
-    const ordered = orderQuadPoints(value);
-    const sanitized = sanitizeQuad(ordered);
-
-    const frameSize = frameSizeRef.current;
-    const frameArea = frameSize ? frameSize.width * frameSize.height : null;
-    const area = quadArea(sanitized);
-    const edges = 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 && quadDistance(lastMeasurement, sanitized) > HISTORY_RESET_DISTANCE;
+    const nextQuad: Point[] = [
+      coordinates.topLeft,
+      coordinates.topRight,
+      coordinates.bottomRight,
+      coordinates.bottomLeft,
+    ];
 
-    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 ? weightedAverageQuad(nextHistory) : sanitized;
+    setQuad(nextQuad);
+  }, []);
 
-    const anchor = anchorQuadRef.current;
-    if (anchor && isValidQuad(anchor)) {
-      const delta = quadDistance(candidate, anchor);
-      const anchorCenter = quadCenter(anchor);
-      const candidateCenter = quadCenter(candidate);
-      const anchorArea = quadArea(anchor);
-      const candidateArea = quadArea(candidate);
-      const centerDelta = Math.hypot(candidateCenter.x - anchorCenter.x, candidateCenter.y - anchorCenter.y);
-      const areaShift = anchorArea > 0 ? Math.abs(anchorArea - candidateArea) / anchorArea : 0;
+  const handlePictureTaken = useCallback(
+    (event: NativeCaptureResult) => {
+      capturingRef.current = false;
 
-      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);
+      const path = event?.croppedImage ?? event?.initialImage;
+      if (!path) {
         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 = 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 = orderQuadPoints(candidate);
-    anchorQuadRef.current = candidate;
-    lastQuadRef.current = candidate;
-    setQuad(candidate);
-    anchorMissesRef.current = 0;
-  }, []);
-
-  const reportError = useRunOnJS((step: string, error: unknown) => {
-    const message = error instanceof Error ? error.message : `${error}`;
-    console.warn(`[DocScanner] frame error at ${step}: ${message}`);
-  }, []);
-
-  const reportStage = useRunOnJS((_stage: string) => {
-    // Disabled for performance
-  }, []);
-
-  const [frameSize, setFrameSize] = useState<{ width: number; height: number } | null>(null);
-  const updateFrameSize = useRunOnJS((width: number, height: number) => {
-    frameSizeRef.current = { width, height };
-    setFrameSize({ width, height });
-  }, []);
-
-  const frameProcessor = useFrameProcessor((frame) => {
-    'worklet';
-
-    let step = 'start';
-
-    try {
-      // Report frame size for coordinate transformation
-      updateFrameSize(frame.width, frame.height);
+      const width = event?.width ?? frameSize?.width ?? 0;
+      const height = event?.height ?? frameSize?.height ?? 0;
 
-      // 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 },
+      onCapture?.({
+        path,
+        quad,
+        width,
+        height,
       });
+    },
+    [frameSize, onCapture, quad],
+  );
 
-      step = 'frameBufferToMat';
-      reportStage(step);
-      let mat = OpenCV.frameBufferToMat(height, width, 3, resized);
-
-      step = 'cvtColor';
-      reportStage(step);
-      OpenCV.invoke('cvtColor', mat, mat, ColorConversionCodes.COLOR_BGR2GRAY);
-
-      // Enhanced morphological operations for noise reduction
-      const morphologyKernel = OpenCV.createObject(ObjectType.Size, 7, 7);
-      step = 'getStructuringElement';
-      reportStage(step);
-      const element = OpenCV.invoke('getStructuringElement', MorphShapes.MORPH_RECT, morphologyKernel);
-      step = 'morphologyEx';
-      reportStage(step);
-      OpenCV.invoke('morphologyEx', mat, mat, MorphTypes.MORPH_CLOSE, element);
-      OpenCV.invoke('morphologyEx', mat, mat, MorphTypes.MORPH_OPEN, element);
-
-      const ADAPTIVE_THRESH_GAUSSIAN_C = 1;
-      const THRESH_BINARY = 0;
-      const THRESH_OTSU = 8;
-
-      // Bilateral filter for edge-preserving smoothing (better quality than Gaussian)
-      step = 'bilateralFilter';
-      reportStage(step);
-      let processed = mat;
-      try {
-        const tempMat = OpenCV.createObject(ObjectType.Mat);
-        OpenCV.invoke('bilateralFilter', mat, tempMat, 9, 75, 75);
-        processed = tempMat;
-      } catch (error) {
-        if (__DEV__) {
-          console.warn('[DocScanner] bilateralFilter unavailable, falling back to GaussianBlur', error);
-        }
-        const blurKernel = OpenCV.createObject(ObjectType.Size, 5, 5);
-        OpenCV.invoke('GaussianBlur', mat, mat, blurKernel, 0);
-        processed = mat;
-      }
-
-      // Additional blur and close pass to smooth jagged edges
-      step = 'gaussianBlur';
-      reportStage(step);
-      const gaussianKernel = OpenCV.createObject(ObjectType.Size, 5, 5);
-      OpenCV.invoke('GaussianBlur', processed, processed, gaussianKernel, 0);
-      OpenCV.invoke('morphologyEx', processed, processed, MorphTypes.MORPH_CLOSE, element);
-
-      const baseMat = OpenCV.invoke('clone', processed);
-      const frameArea = width * height;
-      const originalArea = frame.width * frame.height;
-      const minEdgeThreshold = Math.max(14, Math.min(frame.width, frame.height) * MIN_EDGE_RATIO);
-      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.035, 0.04, 0.05,
-        0.06, 0.07, 0.08, 0.09, 0.1, 0.12,
-      ];
-
-      let bestQuad: Point[] | null = null;
-      let bestArea = 0;
-      let convexHullWarned = false;
-
-      const considerCandidate = (candidate: { quad: Point[]; area: number } | null) => {
-        'worklet';
-        if (!candidate) {
-          return;
-        }
-        if (!bestQuad || candidate.area > bestArea) {
-          bestQuad = candidate.quad;
-          bestArea = candidate.area;
-        }
-      };
-
-      const evaluateContours = (inputMat: unknown, attemptLabel: string): { quad: Point[]; area: number } | null => {
-        'worklet';
-
-        step = `findContours_${attemptLabel}`;
-        reportStage(step);
-        const contours = OpenCV.createObject(ObjectType.PointVectorOfVectors);
-        OpenCV.invoke('findContours', inputMat, contours, RetrievalModes.RETR_EXTERNAL, ContourApproximationModes.CHAIN_APPROX_SIMPLE);
-
-        const contourVector = OpenCV.toJSValue(contours);
-        const contourArray = Array.isArray(contourVector?.array) ? contourVector.array : [];
-
-        let bestLocal: { quad: Point[]; area: number } | null = null;
-
-        for (let i = 0; i < contourArray.length; i += 1) {
-          step = `${attemptLabel}_contour_${i}_copy`;
-          reportStage(step);
-          const contour = OpenCV.copyObjectFromVector(contours, i);
-
-          step = `${attemptLabel}_contour_${i}_area`;
-          reportStage(step);
-          const { value: area } = OpenCV.invoke('contourArea', contour, false);
-          if (typeof area !== 'number' || !isFinite(area) || area < 60) {
-            continue;
-          }
-
-          const resizedRatio = area / frameArea;
-          if (resizedRatio < 0.00012 || resizedRatio > 0.98) {
-            continue;
-          }
-
-          let contourToUse = contour;
-          try {
-            const hull = OpenCV.createObject(ObjectType.PointVector);
-            OpenCV.invoke('convexHull', contour, hull, false, true);
-            contourToUse = hull;
-          } catch (err) {
-            if (__DEV__ && !convexHullWarned) {
-              console.warn('[DocScanner] convexHull failed, using original contour');
-              convexHullWarned = true;
-            }
-          }
-
-          const { value: perimeter } = OpenCV.invoke('arcLength', contourToUse, true);
-          if (typeof perimeter !== 'number' || !isFinite(perimeter) || perimeter < 80) {
-            continue;
-          }
-
-          const approx = OpenCV.createObject(ObjectType.PointVector);
-          let approxArray: Array<{ x: number; y: number }> = [];
-
-          for (let attempt = 0; attempt < epsilonValues.length; attempt += 1) {
-            const epsilon = epsilonValues[attempt] * perimeter;
-            step = `${attemptLabel}_contour_${i}_approx_${attempt}`;
-            reportStage(step);
-            OpenCV.invoke('approxPolyDP', contourToUse, approx, epsilon, true);
-
-            const approxValue = OpenCV.toJSValue(approx);
-            const candidate = Array.isArray(approxValue?.array) ? approxValue.array : [];
-            if (candidate.length === 4) {
-              approxArray = candidate as Array<{ x: number; y: number }>;
-              break;
-            }
-          }
-
-          if (approxArray.length !== 4) {
-            continue;
-          }
-
-          const isValidPoint = (pt: { x: number; y: number }) =>
-            typeof pt.x === 'number' && typeof pt.y === 'number' && isFinite(pt.x) && isFinite(pt.y);
-
-          if (!approxArray.every(isValidPoint)) {
-            continue;
-          }
-
-          const normalizedPoints: Point[] = approxArray.map((pt) => ({
-            x: pt.x / ratio,
-            y: pt.y / ratio,
-          }));
-
-          if (!isConvexQuadrilateral(normalizedPoints)) {
-            continue;
-          }
-
-          const sanitized = sanitizeQuad(orderQuadPoints(normalizedPoints));
-          if (!isValidQuad(sanitized)) {
-            continue;
-          }
-
-          const edges = quadEdgeLengths(sanitized);
-          const minEdge = Math.min(...edges);
-          const maxEdge = Math.max(...edges);
-          if (!Number.isFinite(minEdge) || minEdge < minEdgeThreshold) {
-            continue;
-          }
-          const aspectRatio = maxEdge / Math.max(minEdge, 1);
-          if (!Number.isFinite(aspectRatio) || aspectRatio > 8.5) {
-            continue;
-          }
-
-          const quadAreaValue = quadArea(sanitized);
-          const originalRatio = originalArea > 0 ? quadAreaValue / originalArea : 0;
-          if (originalRatio < 0.00012 || originalRatio > 0.92) {
-            continue;
-          }
-
-          const candidate = {
-            quad: sanitized,
-            area: quadAreaValue,
-          };
-
-          if (!bestLocal || candidate.area > bestLocal.area) {
-            bestLocal = candidate;
-          }
-        }
-
-        return bestLocal;
-      };
-
-      const runCanny = (label: string, low: number, high: number) => {
-        'worklet';
-        const working = OpenCV.invoke('clone', baseMat);
-        step = `${label}_canny`;
-        reportStage(step);
-        OpenCV.invoke('Canny', working, working, low, high);
-        OpenCV.invoke('morphologyEx', working, working, MorphTypes.MORPH_CLOSE, element);
-        considerCandidate(evaluateContours(working, label));
-      };
-
-      const runAdaptive = (label: string, blockSize: number, c: number) => {
-        'worklet';
-        const working = OpenCV.invoke('clone', baseMat);
-        step = `${label}_adaptive`;
-        reportStage(step);
-        OpenCV.invoke('adaptiveThreshold', working, working, 255, ADAPTIVE_THRESH_GAUSSIAN_C, THRESH_BINARY, blockSize, c);
-        OpenCV.invoke('morphologyEx', working, working, MorphTypes.MORPH_CLOSE, element);
-        considerCandidate(evaluateContours(working, label));
-      };
-
-      const runOtsu = () => {
-        'worklet';
-        const working = OpenCV.invoke('clone', baseMat);
-        step = 'otsu_threshold';
-        reportStage(step);
-        OpenCV.invoke('threshold', working, working, 0, 255, THRESH_BINARY | THRESH_OTSU);
-        OpenCV.invoke('morphologyEx', working, working, MorphTypes.MORPH_CLOSE, element);
-        considerCandidate(evaluateContours(working, 'otsu'));
-      };
-
-      runCanny('canny_primary', CANNY_LOW, CANNY_HIGH);
-      runCanny('canny_soft', Math.max(6, CANNY_LOW * 0.6), Math.max(CANNY_LOW * 1.2, CANNY_HIGH * 0.75));
-      runCanny('canny_hard', Math.max(12, CANNY_LOW * 1.1), CANNY_HIGH * 1.25);
-
-      runAdaptive('adaptive_19', 19, 7);
-      runAdaptive('adaptive_23', 23, 5);
-      runOtsu();
-
-      step = 'clearBuffers';
-      reportStage(step);
-      OpenCV.clearBuffers();
-      step = 'updateQuad';
-      reportStage(step);
-      updateQuad(bestQuad);
-    } catch (error) {
-      reportError(step, error);
+  const handleManualCapture = useCallback(() => {
+    if (autoCapture || capturingRef.current || !scannerRef.current) {
+      return;
     }
-  }, [resize, reportError, updateQuad]);
-
-  useEffect(() => {
-    const s = checkStability(quad);
-    setStable(s);
-  }, [quad]);
-
-  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;
-  }
+    capturingRef.current = true;
+    scannerRef.current
+      .capture()
+      .catch((error) => {
+        console.warn('[DocScanner] manual capture failed', error);
+        capturingRef.current = false;
+      });
+  }, [autoCapture]);
 
   return (
-    <View style={{ flex: 1 }}>
-      <Camera
-        ref={handleCameraRef}
-        style={StyleSheet.absoluteFillObject}
-        device={resolvedDevice}
-        isActive
-        photo
-        frameProcessor={frameProcessor}
-        frameProcessorFps={15}
-        {...cameraRestProps}
+    <View style={styles.container} onLayout={handleLayout}>
+      <NativeDocumentScanner
+        ref={(instance) => {
+          scannerRef.current = instance as DocumentScannerHandle | null;
+        }}
+        style={StyleSheet.absoluteFill}
+        overlayColor="transparent"
+        detectionCountBeforeCapture={autoCapture ? minStableFrames : 10000}
+        enableTorch={enableTorch}
+        hideControls
+        useBase64={useBase64}
+        quality={quality}
+        onRectangleDetect={handleRectangleDetect}
+        onPictureTaken={handlePictureTaken}
+      />
+      <Overlay
+        quad={quad}
+        color={overlayColor}
+        frameSize={frameSize}
+        showGrid={showGrid}
+        gridColor={effectiveGridColor}
+        gridLineWidth={gridLineWidth}
       />
-      <Overlay quad={quad} color={overlayColor} frameSize={frameSize} />
       {!autoCapture && (
-        <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,
-            });
-          }}
-        />
+        <TouchableOpacity style={styles.button} onPress={handleManualCapture} />
       )}
       {children}
     </View>
@@ -634,6 +204,9 @@ export const DocScanner: React.FC<Props> = ({
 };
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
   button: {
     position: 'absolute',
     bottom: 40,