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

package/ios/RNRDocScannerView.swift

@@ -0,0 +1,228 @@
+import AVFoundation
+import Foundation
+import React
+import Vision
+
+@objc(RNRDocScannerView)
+class RNRDocScannerView: UIView {
+  @objc var detectionCountBeforeCapture: NSNumber = 8
+  @objc var autoCapture: Bool = true
+  @objc var enableTorch: Bool = false {
+    didSet {
+      updateTorchMode()
+    }
+  }
+  @objc var quality: NSNumber = 90
+  @objc var useBase64: Bool = false
+
+  @objc var onRectangleDetect: RCTDirectEventBlock?
+  @objc var onPictureTaken: RCTDirectEventBlock?
+
+  private let session = AVCaptureSession()
+  private let sessionQueue = DispatchQueue(label: "com.reactnative.rectangledocscanner.session")
+  private let analysisQueue = DispatchQueue(label: "com.reactnative.rectangledocscanner.analysis")
+  private var previewLayer: AVCaptureVideoPreviewLayer?
+  private var photoOutput = AVCapturePhotoOutput()
+
+  private var currentStableCounter: Int = 0
+  private var isCaptureInFlight = false
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    commonInit()
+  }
+
+  required init?(coder: NSCoder) {
+    super.init(coder: coder)
+    commonInit()
+  }
+
+  private func commonInit() {
+    backgroundColor = .black
+    configurePreviewLayer()
+    configureSession()
+  }
+
+  private func configurePreviewLayer() {
+    let layer = AVCaptureVideoPreviewLayer(session: session)
+    layer.videoGravity = .resizeAspectFill
+    self.layer.insertSublayer(layer, at: 0)
+    previewLayer = layer
+  }
+
+  private func configureSession() {
+    sessionQueue.async { [weak self] in
+      guard let self else { return }
+
+      session.beginConfiguration()
+      session.sessionPreset = .photo
+
+      defer {
+        session.commitConfiguration()
+        if !session.isRunning {
+          session.startRunning()
+        }
+      }
+
+      guard
+        let videoDevice = AVCaptureDevice.default(.builtInWideAngleCamera, for: .video, position: .back),
+        let videoInput = try? AVCaptureDeviceInput(device: videoDevice),
+        session.canAddInput(videoInput)
+      else {
+        NSLog("[RNRDocScanner] Unable to create AVCaptureDeviceInput")
+        return
+      }
+
+      session.addInput(videoInput)
+
+      if session.canAddOutput(photoOutput) {
+        session.addOutput(photoOutput)
+      }
+
+      // TODO: Wire up AVCaptureVideoDataOutput + rectangle detection pipeline.
+    }
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    previewLayer?.frame = bounds
+  }
+
+  private func updateTorchMode() {
+    sessionQueue.async { [weak self] in
+      guard
+        let self,
+        let device = self.videoDevice(for: .back),
+        device.hasTorch
+      else {
+        return
+      }
+
+      do {
+        try device.lockForConfiguration()
+        device.torchMode = self.enableTorch ? .on : .off
+        device.unlockForConfiguration()
+      } catch {
+        NSLog("[RNRDocScanner] Failed to update torch mode: \(error)")
+      }
+    }
+  }
+
+  private func videoDevice(for position: AVCaptureDevice.Position) -> AVCaptureDevice? {
+    if let device = AVCaptureDevice.default(.builtInWideAngleCamera, for: .video, position: position) {
+      return device
+    }
+    return AVCaptureDevice.devices(for: .video).first(where: { $0.position == position })
+  }
+
+  func handleDetectedRectangle(_ rectangle: VNRectangleObservation?, frameSize: CGSize) {
+    guard let onRectangleDetect else { return }
+
+    let payload: [String: Any?]
+    if let rectangle {
+      let points = [
+        point(from: rectangle.topLeft, frameSize: frameSize),
+        point(from: rectangle.topRight, frameSize: frameSize),
+        point(from: rectangle.bottomRight, frameSize: frameSize),
+        point(from: rectangle.bottomLeft, frameSize: frameSize),
+      ]
+
+      currentStableCounter = min(currentStableCounter + 1, Int(truncating: detectionCountBeforeCapture))
+      payload = [
+        "rectangleCoordinates": [
+          "topLeft": ["x": points[0].x, "y": points[0].y],
+          "topRight": ["x": points[1].x, "y": points[1].y],
+          "bottomRight": ["x": points[2].x, "y": points[2].y],
+          "bottomLeft": ["x": points[3].x, "y": points[3].y],
+        ],
+        "stableCounter": currentStableCounter,
+        "frameWidth": frameSize.width,
+        "frameHeight": frameSize.height,
+      ]
+    } else {
+      currentStableCounter = 0
+      payload = [
+        "rectangleCoordinates": NSNull(),
+        "stableCounter": currentStableCounter,
+        "frameWidth": frameSize.width,
+        "frameHeight": frameSize.height,
+      ]
+    }
+
+    DispatchQueue.main.async {
+      onRectangleDetect(payload.compactMapValues { $0 })
+    }
+  }
+
+  private func point(from normalizedPoint: CGPoint, frameSize: CGSize) -> CGPoint {
+    CGPoint(x: normalizedPoint.x * frameSize.width, y: (1 - normalizedPoint.y) * frameSize.height)
+  }
+
+  func capture(completion: @escaping (Result<RNRDocScannerCaptureResult, Error>) -> Void) {
+    sessionQueue.async { [weak self] in
+      guard let self else { return }
+
+      if isCaptureInFlight {
+        completion(.failure(RNRDocScannerError.captureInProgress))
+        return
+      }
+
+      guard photoOutput.connections.isEmpty == false else {
+        completion(.failure(RNRDocScannerError.captureUnavailable))
+        return
+      }
+
+      isCaptureInFlight = true
+
+      // TODO: Implement real capture logic; emit stub callback for now.
+      DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+        self.isCaptureInFlight = false
+        completion(.failure(RNRDocScannerError.notImplemented))
+      }
+    }
+  }
+
+  func resetStability() {
+    currentStableCounter = 0
+  }
+}
+
+struct RNRDocScannerCaptureResult {
+  let croppedImage: String?
+  let originalImage: String
+  let width: CGFloat
+  let height: CGFloat
+}
+
+enum RNRDocScannerError: Error {
+  case captureInProgress
+  case captureUnavailable
+  case notImplemented
+  case viewNotFound
+
+  var code: String {
+    switch self {
+    case .captureInProgress:
+      return "capture_in_progress"
+    case .captureUnavailable:
+      return "capture_unavailable"
+    case .notImplemented:
+      return "not_implemented"
+    case .viewNotFound:
+      return "view_not_found"
+    }
+  }
+
+  var message: String {
+    switch self {
+    case .captureInProgress:
+      return "A capture request is already in flight."
+    case .captureUnavailable:
+      return "Photo output is not configured yet."
+    case .notImplemented:
+      return "Native capture is not implemented yet."
+    case .viewNotFound:
+      return "Unable to locate the native DocScanner view."
+    }
+  }
+}

package/ios/RNRDocScannerViewManager.m

@@ -0,0 +1,21 @@
+#import <React/RCTBridge.h>
+#import <React/RCTUIManager.h>
+#import <React/RCTViewManager.h>
+
+#import "react-native-rectangle-doc-scanner-Swift.h"
+
+@interface RCT_EXTERN_MODULE(RNRDocScannerViewManager, RCTViewManager)
+RCT_EXPORT_VIEW_PROPERTY(detectionCountBeforeCapture, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(autoCapture, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(enableTorch, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(quality, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(useBase64, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(onRectangleDetect, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onPictureTaken, RCTDirectEventBlock)
+
+RCT_EXTERN_METHOD(capture:(nonnull NSNumber *)reactTag
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(reset:(nonnull NSNumber *)reactTag)
+@end

package/ios/RNRDocScannerViewManager.swift

@@ -0,0 +1,47 @@
+import Foundation
+import React
+
+@objc(RNRDocScannerViewManager)
+class RNRDocScannerViewManager: RCTViewManager {
+  override static func requiresMainQueueSetup() -> Bool {
+    true
+  }
+
+  override func view() -> UIView! {
+    RNRDocScannerView()
+  }
+
+  @objc func capture(_ reactTag: NSNumber, resolver resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
+    bridge.uiManager.addUIBlock { _, viewRegistry in
+      guard let view = viewRegistry?[reactTag] as? RNRDocScannerView else {
+        reject(RNRDocScannerError.viewNotFound.code, RNRDocScannerError.viewNotFound.message, nil)
+        return
+      }
+
+      view.capture { result in
+        switch result {
+        case let .success(payload):
+          resolve([
+            "croppedImage": payload.croppedImage as Any,
+            "initialImage": payload.originalImage,
+            "width": payload.width,
+            "height": payload.height,
+          ])
+        case let .failure(error as RNRDocScannerError):
+          reject(error.code, error.message, error)
+        case let .failure(error):
+          reject("capture_failed", error.localizedDescription, error)
+        }
+      }
+    }
+  }
+
+  @objc func reset(_ reactTag: NSNumber) {
+    bridge.uiManager.addUIBlock { _, viewRegistry in
+      guard let view = viewRegistry?[reactTag] as? RNRDocScannerView else {
+        return
+      }
+      view.resetStability()
+    }
+  }
+}

package/package.json

@@ -1,6 +1,8 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "0.65.0",
+  "version": "0.69.0",
+  "description": "Native-backed document scanner for React Native with customizable overlays.",
+  "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {
@@ -18,14 +20,13 @@
   "peerDependencies": {
     "@shopify/react-native-skia": "*",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-perspective-image-cropper": "*"
   },
   "devDependencies": {
     "@types/react": "^18.2.41",
     "@types/react-native": "0.73.0",
     "typescript": "^5.3.3"
   },
-  "dependencies": {
-    "react-native-document-scanner-plugin": "^1.6.3"
-  }
+  "dependencies": {}
 }

package/react-native-rectangle-doc-scanner.podspec

@@ -0,0 +1,22 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name         = 'react-native-rectangle-doc-scanner'
+  s.version      = package['version']
+  s.summary      = package.fetch('description', 'Document scanner with native camera overlay support for React Native.')
+  s.homepage     = package['homepage'] || 'https://github.com/danchew90/react-native-rectangle-doc-scanner'
+  s.license      = package['license'] || { :type => 'MIT' }
+  s.author       = package['author'] || { 'react-native-rectangle-doc-scanner' => 'opensource@example.com' }
+  s.source       = { :git => package.dig('repository', 'url') || s.homepage, :tag => "v#{s.version}" }
+
+  s.platform     = :ios, '13.0'
+  s.swift_version = '5.0'
+
+  s.source_files = 'ios/**/*.{h,m,mm,swift}'
+  s.public_header_files = 'ios/**/*.h'
+  s.requires_arc = true
+
+  s.dependency 'React-Core'
+end

package/src/DocScanner.tsx

@@ -1,21 +1,36 @@
 import React, {
-  ComponentType,
   ReactNode,
+  forwardRef,
   useCallback,
+  useImperativeHandle,
   useMemo,
   useRef,
   useState,
 } from 'react';
 import {
-  LayoutChangeEvent,
+  findNodeHandle,
+  NativeModules,
+  requireNativeComponent,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
-import DocumentScanner from 'react-native-document-scanner-plugin';
+import type { NativeSyntheticEvent } from 'react-native';
 import { Overlay } from './utils/overlay';
 import type { Point } from './types';
 
+const MODULE_NAME = 'RNRDocScannerModule';
+const VIEW_NAME = 'RNRDocScannerView';
+
+const NativeDocScannerModule = NativeModules[MODULE_NAME];
+
+if (!NativeDocScannerModule) {
+  const fallbackMessage =
+    `The native module '${MODULE_NAME}' is not linked. Make sure you have run pod install, ` +
+    `synced Gradle, and rebuilt the app after installing 'react-native-rectangle-doc-scanner'.`;
+  throw new Error(fallbackMessage);
+}
+
 type NativeRectangle = {
   topLeft: Point;
   topRight: Point;
@@ -23,43 +38,39 @@ type NativeRectangle = {
   bottomLeft: Point;
 };
 
-type NativeRectangleEvent = {
-  rectangleCoordinates?: NativeRectangle | null;
-  stableCounter?: number;
+type RectangleEvent = {
+  rectangleCoordinates: NativeRectangle | null;
+  stableCounter: number;
+  frameWidth: number;
+  frameHeight: number;
 };
 
-type NativeCaptureResult = {
-  croppedImage?: string;
+type PictureEvent = {
+  croppedImage?: string | null;
   initialImage?: string;
   width?: number;
   height?: number;
 };
 
-type DocumentScannerHandle = {
-  capture: () => Promise<NativeCaptureResult>;
-};
-
-type NativeDocumentScannerProps = {
+type NativeDocScannerProps = {
   style?: object;
-  overlayColor?: string;
   detectionCountBeforeCapture?: number;
+  autoCapture?: boolean;
   enableTorch?: boolean;
-  hideControls?: boolean;
-  useBase64?: boolean;
   quality?: number;
-  onRectangleDetect?: (event: NativeRectangleEvent) => void;
-  onPictureTaken?: (event: NativeCaptureResult) => void;
+  useBase64?: boolean;
+  onRectangleDetect?: (event: NativeSyntheticEvent<RectangleEvent>) => void;
+  onPictureTaken?: (event: NativeSyntheticEvent<PictureEvent>) => void;
+};
+
+type DocScannerHandle = {
+  capture: () => Promise<PictureEvent>;
+  reset: () => void;
 };
 
-const NativeDocumentScanner = DocumentScanner as unknown as ComponentType<
-  NativeDocumentScannerProps & { ref?: React.Ref<DocumentScannerHandle> }
->;
+const NativeDocScanner = requireNativeComponent<NativeDocScannerProps>(VIEW_NAME);
+type NativeDocScannerInstance = React.ElementRef<typeof NativeDocScanner>;
 
-/**
- * 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 {
   processingWidth?: number;
   cannyLowThreshold?: number;
@@ -87,22 +98,23 @@ interface Props {
 const DEFAULT_OVERLAY_COLOR = '#e7a649';
 const GRID_COLOR_FALLBACK = 'rgba(231, 166, 73, 0.35)';
 
-export const DocScanner: React.FC<Props> = ({
+export const DocScanner = forwardRef<DocScannerHandle, Props>(({
   onCapture,
   overlayColor = DEFAULT_OVERLAY_COLOR,
   autoCapture = true,
   minStableFrames = 8,
   enableTorch = false,
-  quality,
+  quality = 90,
   useBase64 = false,
   children,
   showGrid = true,
   gridColor,
   gridLineWidth = 2,
-}) => {
-  const scannerRef = useRef<DocumentScannerHandle | null>(null);
+}, ref) => {
+  const viewRef = useRef<NativeDocScannerInstance | null>(null);
   const capturingRef = useRef(false);
   const [quad, setQuad] = useState<Point[] | null>(null);
+  const [stable, setStable] = useState(0);
   const [frameSize, setFrameSize] = useState<{ width: number; height: number } | null>(null);
 
   const effectiveGridColor = useMemo(
@@ -110,80 +122,142 @@ export const DocScanner: React.FC<Props> = ({
     [gridColor],
   );
 
-  const handleLayout = useCallback((event: LayoutChangeEvent) => {
-    const { width, height } = event.nativeEvent.layout;
-    if (width > 0 && height > 0) {
-      setFrameSize({ width, height });
+  const ensureViewHandle = useCallback(() => {
+    const nodeHandle = findNodeHandle(viewRef.current);
+    if (!nodeHandle) {
+      throw new Error('Unable to obtain native view handle for DocScanner.');
     }
+    return nodeHandle;
   }, []);
 
-  const handleRectangleDetect = useCallback((event: NativeRectangleEvent) => {
-    const coordinates = event?.rectangleCoordinates;
-
-    if (!coordinates) {
-      setQuad(null);
-      return;
+  const resetNativeStability = useCallback(() => {
+    try {
+      const handle = ensureViewHandle();
+      NativeDocScannerModule.reset(handle);
+    } catch (error) {
+      console.warn('[DocScanner] unable to reset native stability', error);
     }
+  }, [ensureViewHandle]);
 
-    const nextQuad: Point[] = [
-      coordinates.topLeft,
-      coordinates.topRight,
-      coordinates.bottomRight,
-      coordinates.bottomLeft,
-    ];
-
-    setQuad(nextQuad);
-  }, []);
-
-  const handlePictureTaken = useCallback(
-    (event: NativeCaptureResult) => {
+  const emitCaptureResult = useCallback(
+    (payload: PictureEvent) => {
       capturingRef.current = false;
 
-      const path = event?.croppedImage ?? event?.initialImage;
+      const path = payload.croppedImage ?? payload.initialImage;
       if (!path) {
         return;
       }
 
-      const width = event?.width ?? frameSize?.width ?? 0;
-      const height = event?.height ?? frameSize?.height ?? 0;
-
+      const width = payload.width ?? frameSize?.width ?? 0;
+      const height = payload.height ?? frameSize?.height ?? 0;
       onCapture?.({
         path,
         quad,
         width,
         height,
       });
+      setStable(0);
+      resetNativeStability();
+    },
+    [frameSize, onCapture, quad, resetNativeStability],
+  );
+
+  const handleRectangleDetect = useCallback(
+    (event: NativeSyntheticEvent<RectangleEvent>) => {
+      const { rectangleCoordinates, stableCounter, frameWidth, frameHeight } = event.nativeEvent;
+      setStable(stableCounter);
+      setFrameSize({ width: frameWidth, height: frameHeight });
+
+      if (!rectangleCoordinates) {
+        setQuad(null);
+        return;
+      }
+
+      setQuad([
+        rectangleCoordinates.topLeft,
+        rectangleCoordinates.topRight,
+        rectangleCoordinates.bottomRight,
+        rectangleCoordinates.bottomLeft,
+      ]);
+
+      if (autoCapture && stableCounter >= minStableFrames) {
+        triggerCapture();
+      }
+    },
+    [autoCapture, minStableFrames],
+  );
+
+  const handlePictureTaken = useCallback(
+    (event: NativeSyntheticEvent<PictureEvent>) => {
+      emitCaptureResult(event.nativeEvent);
     },
-    [frameSize, onCapture, quad],
+    [emitCaptureResult],
   );
 
+  const captureNative = useCallback((): Promise<PictureEvent> => {
+    if (capturingRef.current) {
+      return Promise.reject(new Error('capture_in_progress'));
+    }
+
+    try {
+      const handle = ensureViewHandle();
+      capturingRef.current = true;
+      return NativeDocScannerModule.capture(handle)
+        .then((result: PictureEvent) => {
+          emitCaptureResult(result);
+          return result;
+        })
+        .catch((error: Error) => {
+          capturingRef.current = false;
+          throw error;
+        });
+    } catch (error) {
+      capturingRef.current = false;
+      return Promise.reject(error);
+    }
+  }, [emitCaptureResult, ensureViewHandle]);
+
+  const triggerCapture = useCallback(() => {
+    if (capturingRef.current) {
+      return;
+    }
+
+    captureNative().catch((error: Error) => {
+      console.warn('[DocScanner] capture failed', error);
+    });
+  }, [captureNative]);
+
   const handleManualCapture = useCallback(() => {
-    if (autoCapture || capturingRef.current || !scannerRef.current) {
+    if (autoCapture) {
       return;
     }
+    captureNative().catch((error: Error) => {
+      console.warn('[DocScanner] manual capture failed', error);
+    });
+  }, [autoCapture, captureNative]);
 
-    capturingRef.current = true;
-    scannerRef.current
-      .capture()
-      .catch((error) => {
-        console.warn('[DocScanner] manual capture failed', error);
-        capturingRef.current = false;
-      });
-  }, [autoCapture]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      capture: captureNative,
+      reset: () => {
+        setStable(0);
+        resetNativeStability();
+      },
+    }),
+    [captureNative, resetNativeStability],
+  );
 
   return (
-    <View style={styles.container} onLayout={handleLayout}>
-      <NativeDocumentScanner
-        ref={(instance) => {
-          scannerRef.current = instance as DocumentScannerHandle | null;
-        }}
+    <View style={styles.container}>
+      <NativeDocScanner
+        ref={viewRef}
         style={StyleSheet.absoluteFill}
-        overlayColor="transparent"
-        detectionCountBeforeCapture={autoCapture ? minStableFrames : 10000}
+        detectionCountBeforeCapture={minStableFrames}
+        autoCapture={autoCapture}
         enableTorch={enableTorch}
-        hideControls
-        useBase64={useBase64}
         quality={quality}
+        useBase64={useBase64}
         onRectangleDetect={handleRectangleDetect}
         onPictureTaken={handlePictureTaken}
       />
@@ -201,11 +275,12 @@ export const DocScanner: React.FC<Props> = ({
       {children}
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: '#000',
   },
   button: {
     position: 'absolute',
@@ -217,3 +292,5 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
   },
 });
+
+export type { DocScannerHandle };