react-native-rectangle-doc-scanner 1.6.0 → 1.7.0

package/dist/DocScanner.d.ts

@@ -36,6 +36,7 @@ interface Props {
     gridColor?: string;
     gridLineWidth?: number;
     detectionConfig?: DetectionConfig;
+    useNativeOverlay?: boolean;
 }
 export declare const DocScanner: React.ForwardRefExoticComponent<Props & React.RefAttributes<DocScannerHandle>>;
 export type { DocScannerHandle };

package/dist/DocScanner.js

@@ -48,12 +48,18 @@ if (!NativeDocScannerModule) {
 const NativeDocScanner = (0, react_native_1.requireNativeComponent)(VIEW_NAME);
 const DEFAULT_OVERLAY_COLOR = '#e7a649';
 const GRID_COLOR_FALLBACK = 'rgba(231, 166, 73, 0.35)';
-exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAULT_OVERLAY_COLOR, autoCapture = true, minStableFrames = 8, enableTorch = false, quality = 90, useBase64 = false, children, showGrid = true, gridColor, gridLineWidth = 2, }, ref) => {
+exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAULT_OVERLAY_COLOR, autoCapture = true, minStableFrames = 8, enableTorch = false, quality = 90, useBase64 = false, children, showGrid = true, gridColor, gridLineWidth = 2, useNativeOverlay, }, ref) => {
     const viewRef = (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);
     const [frameSize, setFrameSize] = (0, react_1.useState)(null);
+    const shouldUseNativeOverlay = (0, react_1.useMemo)(() => {
+        if (typeof useNativeOverlay === 'boolean') {
+            return useNativeOverlay;
+        }
+        return react_native_1.Platform.OS === 'ios';
+    }, [useNativeOverlay]);
     const effectiveGridColor = (0, react_1.useMemo)(() => gridColor ?? GRID_COLOR_FALLBACK, [gridColor]);
     const ensureViewHandle = (0, react_1.useCallback)(() => {
         const nodeHandle = (0, react_native_1.findNodeHandle)(viewRef.current);
@@ -156,7 +162,7 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
     }), [captureNative, resetNativeStability]);
     return (react_1.default.createElement(react_native_1.View, { style: styles.container },
         react_1.default.createElement(NativeDocScanner, { ref: viewRef, style: react_native_1.StyleSheet.absoluteFill, detectionCountBeforeCapture: minStableFrames, autoCapture: autoCapture, enableTorch: enableTorch, quality: quality, useBase64: useBase64, onRectangleDetect: handleRectangleDetect, onPictureTaken: handlePictureTaken }),
-        react_1.default.createElement(overlay_1.Overlay, { quad: quad, color: overlayColor, frameSize: frameSize, showGrid: showGrid, gridColor: effectiveGridColor, gridLineWidth: gridLineWidth }),
+        !shouldUseNativeOverlay && (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));
 });

package/ios/RNRDocScannerView.swift

@@ -28,6 +28,8 @@ class RNRDocScannerView: UIView, AVCaptureVideoDataOutputSampleBufferDelegate, A
   private var previewLayer: AVCaptureVideoPreviewLayer?
   private let videoOutput = AVCaptureVideoDataOutput()
   private let photoOutput = AVCapturePhotoOutput()
+  private let outlineLayer = CAShapeLayer()
+  private let gridLayer = CAShapeLayer()
 
   private var currentStableCounter: Int = 0
   private var isProcessingFrame = false
@@ -51,6 +53,7 @@ class RNRDocScannerView: UIView, AVCaptureVideoDataOutputSampleBufferDelegate, A
   private func commonInit() {
     backgroundColor = .black
     configurePreviewLayer()
+    configureOverlayLayers()
     configureSession()
   }
 
@@ -61,6 +64,23 @@ class RNRDocScannerView: UIView, AVCaptureVideoDataOutputSampleBufferDelegate, A
     previewLayer = layer
   }
 
+  private func configureOverlayLayers() {
+    outlineLayer.strokeColor = UIColor(red: 0.18, green: 0.6, blue: 0.95, alpha: 1.0).cgColor
+    outlineLayer.fillColor = UIColor(red: 0.18, green: 0.6, blue: 0.95, alpha: 0.2).cgColor
+    outlineLayer.lineWidth = 4
+    outlineLayer.lineJoin = .round
+    outlineLayer.isHidden = true
+    layer.addSublayer(outlineLayer)
+
+    gridLayer.strokeColor = UIColor(red: 0.18, green: 0.6, blue: 0.95, alpha: 0.35).cgColor
+    gridLayer.fillColor = UIColor.clear.cgColor
+    gridLayer.lineWidth = 1.5
+    gridLayer.lineJoin = .round
+    gridLayer.isHidden = true
+    gridLayer.zPosition = outlineLayer.zPosition + 1
+    layer.addSublayer(gridLayer)
+  }
+
   private func configureSession() {
     sessionQueue.async { [weak self] in
       guard let self else { return }
@@ -115,6 +135,8 @@ class RNRDocScannerView: UIView, AVCaptureVideoDataOutputSampleBufferDelegate, A
     if let connection = previewLayer?.connection, connection.isVideoOrientationSupported {
       connection.videoOrientation = .portrait
     }
+    outlineLayer.frame = bounds
+    gridLayer.frame = bounds
   }
 
   private func updateTorchMode() {
@@ -236,6 +258,8 @@ class RNRDocScannerView: UIView, AVCaptureVideoDataOutputSampleBufferDelegate, A
       effectiveObservation = nil
     }
 
+    updateNativeOverlay(with: effectiveObservation)
+
     let payload: [String: Any?]
     if let observation = effectiveObservation {
       let points = [
@@ -276,6 +300,66 @@ class RNRDocScannerView: UIView, AVCaptureVideoDataOutputSampleBufferDelegate, A
     CGPoint(x: normalizedPoint.x * frameSize.width, y: (1 - normalizedPoint.y) * frameSize.height)
   }
 
+  private func updateNativeOverlay(with observation: VNRectangleObservation?) {
+    DispatchQueue.main.async {
+      guard let observation else {
+        self.outlineLayer.path = nil
+        self.gridLayer.path = nil
+        self.outlineLayer.isHidden = true
+        self.gridLayer.isHidden = true
+        return
+      }
+
+      guard let previewLayer = self.previewLayer else {
+        return
+      }
+
+      let points = [
+        self.convertToLayerPoint(observation.topLeft, previewLayer: previewLayer),
+        self.convertToLayerPoint(observation.topRight, previewLayer: previewLayer),
+        self.convertToLayerPoint(observation.bottomRight, previewLayer: previewLayer),
+        self.convertToLayerPoint(observation.bottomLeft, previewLayer: previewLayer),
+      ]
+
+      let outline = UIBezierPath()
+      outline.move(to: points[0])
+      outline.addLine(to: points[1])
+      outline.addLine(to: points[2])
+      outline.addLine(to: points[3])
+      outline.close()
+
+      self.outlineLayer.path = outline.cgPath
+      self.outlineLayer.isHidden = false
+
+      let gridPath = UIBezierPath()
+      let steps: [CGFloat] = [1.0 / 3.0, 2.0 / 3.0]
+
+      for step in steps {
+        let startVertical = self.interpolate(points[0], points[1], t: step)
+        let endVertical = self.interpolate(points[3], points[2], t: step)
+        gridPath.move(to: startVertical)
+        gridPath.addLine(to: endVertical)
+
+        let startHorizontal = self.interpolate(points[0], points[3], t: step)
+        let endHorizontal = self.interpolate(points[1], points[2], t: step)
+        gridPath.move(to: startHorizontal)
+        gridPath.addLine(to: endHorizontal)
+      }
+
+      self.gridLayer.path = gridPath.cgPath
+      self.gridLayer.isHidden = false
+    }
+  }
+
+  private func convertToLayerPoint(_ normalizedPoint: CGPoint, previewLayer: AVCaptureVideoPreviewLayer) -> CGPoint {
+    let devicePoint = CGPoint(x: normalizedPoint.x, y: 1 - normalizedPoint.y)
+    return previewLayer.layerPointConverted(fromCaptureDevicePoint: devicePoint)
+  }
+
+  private func interpolate(_ start: CGPoint, _ end: CGPoint, t: CGFloat) -> CGPoint {
+    CGPoint(x: start.x + (end.x - start.x) * t, y: start.y + (end.y - start.y) * t)
+  }
+
   // MARK: - Capture
 
   func capture(completion: @escaping (Result<RNRDocScannerCaptureResult, Error>) -> Void) {

package/package.json

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

package/src/DocScanner.tsx

@@ -8,6 +8,7 @@ import React, {
   useState,
 } from 'react';
 import {
+  Platform,
   findNodeHandle,
   NativeModules,
   requireNativeComponent,
@@ -93,6 +94,7 @@ interface Props {
   gridColor?: string;
   gridLineWidth?: number;
   detectionConfig?: DetectionConfig;
+  useNativeOverlay?: boolean;
 }
 
 const DEFAULT_OVERLAY_COLOR = '#e7a649';
@@ -110,6 +112,7 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(({
   showGrid = true,
   gridColor,
   gridLineWidth = 2,
+  useNativeOverlay,
 }, ref) => {
   const viewRef = useRef<NativeDocScannerInstance | null>(null);
   const capturingRef = useRef(false);
@@ -117,6 +120,13 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(({
   const [stable, setStable] = useState(0);
   const [frameSize, setFrameSize] = useState<{ width: number; height: number } | null>(null);
 
+  const shouldUseNativeOverlay = useMemo(() => {
+    if (typeof useNativeOverlay === 'boolean') {
+      return useNativeOverlay;
+    }
+    return Platform.OS === 'ios';
+  }, [useNativeOverlay]);
+
   const effectiveGridColor = useMemo(
     () => gridColor ?? GRID_COLOR_FALLBACK,
     [gridColor],
@@ -261,14 +271,16 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(({
         onRectangleDetect={handleRectangleDetect}
         onPictureTaken={handlePictureTaken}
       />
-      <Overlay
-        quad={quad}
-        color={overlayColor}
-        frameSize={frameSize}
-        showGrid={showGrid}
-        gridColor={effectiveGridColor}
-        gridLineWidth={gridLineWidth}
-      />
+      {!shouldUseNativeOverlay && (
+        <Overlay
+          quad={quad}
+          color={overlayColor}
+          frameSize={frameSize}
+          showGrid={showGrid}
+          gridColor={effectiveGridColor}
+          gridLineWidth={gridLineWidth}
+        />
+      )}
       {!autoCapture && (
         <TouchableOpacity style={styles.button} onPress={handleManualCapture} />
       )}