react-native-rectangle-doc-scanner 1.13.0 → 1.14.0

package/README.md

@@ -1,86 +1,52 @@
-# React Native Rectangle Doc Scanner
+# React Native Document Scanner Wrapper
 
-> ⚠️ **Native module migration in progress**
->
-> A native VisionKit (iOS) + CameraX/ML Kit (Android) implementation is being scaffolded to replace the previous VisionCamera/OpenCV pipeline. The JavaScript API is already aligned with the native contract; the detection/capture engines will be filled in next. See [`docs/native-module-architecture.md`](docs/native-module-architecture.md) for the roadmap.
+React Native-friendly wrapper around [`react-native-document-scanner`](https://github.com/Michaelvilleneuve/react-native-document-scanner). It exposes a declarative `<DocScanner />` component that renders the native document scanner on both iOS and Android while keeping the surface area small enough to plug into custom UIs.
 
-Native-ready document scanner for React Native that keeps your overlay completely customisable. The library renders a native camera preview, streams polygon detections back to JavaScript, and exposes an imperative `capture()` method so you can build the exact UX you need.
-
-## Features
-
-- Native camera preview surfaces on iOS/Android with React overlay support
-- Polygon detection events (with stability counter) delivered every frame
-- Skia-powered outline + optional 3×3 grid overlay
-- Auto-capture and manual capture flows using the same API
-- Optional `CropEditor` powered by `react-native-perspective-image-cropper`
-
-## Requirements
-
-- React Native 0.70+
-- iOS 13+ (VisionKit availability) / Android 7.0+ (API 24)
-- Camera permission strings in your host app (`NSCameraUsageDescription`, Android runtime permission handling)
-- Peer dependencies:
-  - `@shopify/react-native-skia`
-  - `react-native-perspective-image-cropper`
-  - `react`
-  - `react-native`
+> The native implementation lives inside the upstream library (Objective‑C/OpenCV on iOS, Kotlin/OpenCV on Android). This package simply re-exports a type-safe wrapper, optional crop editor helpers, and a full-screen scanner flow.
 
 ## Installation
 
-```sh
+```bash
 yarn add react-native-rectangle-doc-scanner \
-  @shopify/react-native-skia \
+  github:Michaelvilleneuve/react-native-document-scanner \
   react-native-perspective-image-cropper
 
 # iOS
 cd ios && pod install
 ```
 
-Android will automatically pick up the included Gradle configuration. If you use a custom package list (old architecture), register `new RNRDocScannerPackage()` manually.
+Android automatically links the native module. If you manage packages manually (legacy architecture), register `DocumentScannerPackage()` in your `MainApplication`.
 
 ## Usage
 
 ```tsx
-import React, { useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import {
-  DocScanner,
-  CropEditor,
-  type CapturedDocument,
-} from 'react-native-rectangle-doc-scanner';
-
-export const ScanScreen: React.FC = () => {
-  const [capturedDoc, setCapturedDoc] = useState<CapturedDocument | null>(null);
-
-  if (capturedDoc) {
-    return (
-      <CropEditor
-        document={capturedDoc}
-        overlayColor="rgba(0,0,0,0.6)"
-        overlayStrokeColor="#e7a649"
-        handlerColor="#e7a649"
-        onCropChange={(rectangle) => {
-          console.log('Adjusted corners:', rectangle);
-        }}
-      />
-    );
-  }
+import React, { useRef } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { DocScanner, type DocScannerHandle } from 'react-native-rectangle-doc-scanner';
+
+export const ScanScreen = () => {
+  const scannerRef = useRef<DocScannerHandle>(null);
 
   return (
     <View style={styles.container}>
       <DocScanner
-        overlayColor="#e7a649"
-        minStableFrames={8}
+        ref={scannerRef}
+        overlayColor="rgba(0, 126, 244, 0.35)"
         autoCapture
-        onCapture={(doc) => {
-          console.log('Captured document:', doc);
-          setCapturedDoc(doc);
+        minStableFrames={6}
+        onCapture={(result) => {
+          console.log('Captured document:', result.path);
         }}
       >
-        <View style={styles.overlay}>
-          <Text style={styles.hint}>Align the document with the frame</Text>
+        <View style={styles.overlay} pointerEvents="none">
+          <Text style={styles.hint}>Align the document inside the frame</Text>
         </View>
       </DocScanner>
+
+      <TouchableOpacity
+        style={styles.captureButton}
+        onPress={() => scannerRef.current?.capture()}
+      />
     </View>
   );
 };
@@ -92,78 +58,41 @@ const styles = StyleSheet.create({
     top: 60,
     alignSelf: 'center',
     paddingHorizontal: 20,
-    paddingVertical: 8,
+    paddingVertical: 10,
     borderRadius: 12,
-    backgroundColor: 'rgba(0,0,0,0.55)',
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  hint: { color: '#fff', fontWeight: '600' },
+  captureButton: {
+    position: 'absolute',
+    bottom: 40,
+    alignSelf: 'center',
+    width: 70,
+    height: 70,
+    borderRadius: 35,
+    backgroundColor: '#fff',
   },
-  hint: { color: '#fff', fontSize: 15, fontWeight: '600' },
 });
 ```
 
-The native view renders underneath; anything you pass as `children` sits on top, so you can add custom buttons, headers, progress indicators, etc.
-
-## API
-
-### `<DocScanner />`
-
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `onCapture` | `(result) => void` | – | Fired when a capture resolves. Returns `path`, `width`, `height`, `quad`. |
-| `overlayColor` | `string` | `#e7a649` | Stroke colour for the overlay outline. |
-| `autoCapture` | `boolean` | `true` | When `true`, capture is triggered automatically once stability is reached. |
-| `minStableFrames` | `number` | `8` | Number of stable frames before auto capture fires. |
-| `enableTorch` | `boolean` | `false` | Toggles device torch (if supported). |
-| `quality` | `number` | `90` | JPEG quality (0–100). |
-| `useBase64` | `boolean` | `false` | Return base64 strings instead of file URIs. |
-| `showGrid` | `boolean` | `true` | Show the 3×3 helper grid inside the overlay. |
-| `gridColor` | `string` | `rgba(231,166,73,0.35)` | Colour of grid lines. |
-| `gridLineWidth` | `number` | `2` | Width of grid lines. |
-
-Imperative helpers are exposed via `DocScannerHandle`:
-
-```ts
-import { DocScanner, type DocScannerHandle } from 'react-native-rectangle-doc-scanner';
-
-const ref = useRef<DocScannerHandle>(null);
-
-const fireCapture = () => {
-  ref.current?.capture().then((result) => {
-    console.log(result);
-  });
-};
-```
-
-> The native module currently returns a `"not_implemented"` error from `capture()` until the VisionKit / ML Kit integration is finished. The JS surface is ready for when the native pipeline lands.
+`<DocScanner />` passes through the important upstream props:
 
-### `<CropEditor />`
-
-| Prop | Type | Default | Description |
+| Prop | Type | Default | Notes |
 | --- | --- | --- | --- |
-| `document` | `CapturedDocument` | – | Document produced by `onCapture`. |
-| `overlayColor` | `string` | `rgba(0,0,0,0.5)` | Tint outside the crop area. |
-| `overlayStrokeColor` | `string` | `#e7a649` | Boundary colour. |
-| `handlerColor` | `string` | `#e7a649` | Corner handle colour. |
-| `enablePanStrict` | `boolean` | `false` | Enable strict panning behaviour. |
-| `onCropChange` | `(rectangle) => void` | – | Fires when the user drags handles. |
-
-## Native scaffolding status
+| `overlayColor` | `string` | `#0b7ef4` | Native overlay tint. |
+| `autoCapture` | `boolean` | `true` | Maps to `manualOnly` internally. |
+| `minStableFrames` | `number` | `8` | Detection count before auto capture. |
+| `enableTorch` | `boolean` | `false` | Toggle device torch. |
+| `quality` | `number` | `90` | 0–100 (converted for native). |
+| `useBase64` | `boolean` | `false` | Return base64 payloads instead of file URIs. |
+| `onCapture` | `(result) => void` | — | Receives `{ path, quad: null, width, height }`. |
 
-- ✅ TypeScript wrapper + overlay grid
-- ✅ iOS view manager / module skeleton (Swift)
-- ✅ Android view manager / module skeleton (Kotlin)
-- ☐ VisionKit rectangle detection & capture pipeline
-- ☐ CameraX + ML Kit rectangle detection & capture pipeline
-- ☐ Base64 / file output parity tests
+Manual capture exposes an imperative `capture()` method via `ref`. Children render on top of the camera preview so you can build your own buttons, progress indicators, or onboarding tips.
 
-Contributions to the native pipeline are welcome! Start by reading [`docs/native-module-architecture.md`](docs/native-module-architecture.md) for the current plan.
-
-## Build
-
-```sh
-yarn build
-```
+## Convenience APIs
 
-Generates the `dist/` output via TypeScript.
+- `CropEditor` – wraps `react-native-perspective-image-cropper` for manual corner adjustment.
+- `FullDocScanner` – puts the scanner and crop editor into a single modal-like flow.
 
 ## License
 

package/dist/DocScanner.d.ts

@@ -1,15 +1,10 @@
 import React, { ReactNode } from 'react';
-import type { Point } from './types';
 type PictureEvent = {
     croppedImage?: string | null;
-    initialImage?: string;
+    initialImage?: string | null;
     width?: number;
     height?: number;
 };
-type DocScannerHandle = {
-    capture: () => Promise<PictureEvent>;
-    reset: () => void;
-};
 export interface DetectionConfig {
     processingWidth?: number;
     cannyLowThreshold?: number;
@@ -21,7 +16,7 @@ export interface DetectionConfig {
 interface Props {
     onCapture?: (photo: {
         path: string;
-        quad: Point[] | null;
+        quad: null;
         width: number;
         height: number;
     }) => void;
@@ -36,7 +31,10 @@ interface Props {
     gridColor?: string;
     gridLineWidth?: number;
     detectionConfig?: DetectionConfig;
-    useNativeOverlay?: boolean;
 }
+type DocScannerHandle = {
+    capture: () => Promise<PictureEvent>;
+    reset: () => void;
+};
 export declare const DocScanner: React.ForwardRefExoticComponent<Props & React.RefAttributes<DocScannerHandle>>;
 export type { DocScannerHandle };

package/dist/DocScanner.js

@@ -32,138 +32,85 @@ 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 overlay_1 = require("./utils/overlay");
-const MODULE_NAME = 'RNRDocScannerModule';
-const VIEW_NAME = 'RNRDocScannerView';
-const NativeDocScannerModule = react_native_1.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);
-}
-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, 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;
+const react_native_document_scanner_1 = __importDefault(require("react-native-document-scanner"));
+const DEFAULT_OVERLAY_COLOR = '#0b7ef4';
+exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAULT_OVERLAY_COLOR, autoCapture = true, minStableFrames = 8, enableTorch = false, quality = 90, useBase64 = false, children, showGrid = true, }, ref) => {
+    const scannerRef = (0, react_1.useRef)(null);
+    const captureResolvers = (0, react_1.useRef)(null);
+    const normalizedQuality = (0, react_1.useMemo)(() => {
+        if (react_native_1.Platform.OS === 'ios') {
+            // iOS expects 0-1
+            return Math.min(1, Math.max(0, quality / 100));
         }
-        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);
-        if (!nodeHandle) {
-            throw new Error('Unable to obtain native view handle for DocScanner.');
+        return Math.min(100, Math.max(0, quality));
+    }, [quality]);
+    const handlePictureTaken = (0, react_1.useCallback)((event) => {
+        const path = event.croppedImage ?? event.initialImage;
+        if (path) {
+            onCapture?.({
+                path,
+                quad: null,
+                width: event.width ?? 0,
+                height: event.height ?? 0,
+            });
         }
-        return nodeHandle;
-    }, []);
-    const resetNativeStability = (0, react_1.useCallback)(() => {
-        try {
-            const handle = ensureViewHandle();
-            NativeDocScannerModule.reset(handle);
+        if (captureResolvers.current) {
+            captureResolvers.current.resolve(event);
+            captureResolvers.current = null;
         }
-        catch (error) {
-            console.warn('[DocScanner] unable to reset native stability', error);
+    }, [onCapture]);
+    const handleError = (0, react_1.useCallback)((error) => {
+        if (captureResolvers.current) {
+            captureResolvers.current.reject(error);
+            captureResolvers.current = null;
         }
-    }, [ensureViewHandle]);
-    const emitCaptureResult = (0, react_1.useCallback)((payload) => {
-        capturingRef.current = false;
-        const path = payload.croppedImage ?? payload.initialImage;
-        if (!path) {
-            return;
-        }
-        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 = (0, react_1.useCallback)((event) => {
-        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();
+    }, []);
+    const capture = (0, react_1.useCallback)(() => {
+        const instance = scannerRef.current;
+        if (!instance || typeof instance.capture !== 'function') {
+            return Promise.reject(new Error('DocumentScanner native instance is not ready'));
         }
-    }, [autoCapture, minStableFrames]);
-    const handlePictureTaken = (0, react_1.useCallback)((event) => {
-        emitCaptureResult(event.nativeEvent);
-    }, [emitCaptureResult]);
-    const captureNative = (0, react_1.useCallback)(() => {
-        if (capturingRef.current) {
+        if (captureResolvers.current) {
             return Promise.reject(new Error('capture_in_progress'));
         }
-        try {
-            const handle = ensureViewHandle();
-            capturingRef.current = true;
-            return NativeDocScannerModule.capture(handle)
-                .then((result) => {
-                emitCaptureResult(result);
-                return result;
-            })
-                .catch((error) => {
-                capturingRef.current = false;
-                throw error;
+        const result = instance.capture();
+        if (result && typeof result.then === 'function') {
+            return result.then((payload) => {
+                handlePictureTaken(payload);
+                return payload;
             });
         }
-        catch (error) {
-            capturingRef.current = false;
-            return Promise.reject(error);
-        }
-    }, [emitCaptureResult, ensureViewHandle]);
-    const triggerCapture = (0, react_1.useCallback)(() => {
-        if (capturingRef.current) {
-            return;
-        }
-        captureNative().catch((error) => {
-            console.warn('[DocScanner] capture failed', error);
+        return new Promise((resolve, reject) => {
+            captureResolvers.current = { resolve, reject };
         });
-    }, [captureNative]);
+    }, [handlePictureTaken]);
     const handleManualCapture = (0, react_1.useCallback)(() => {
         if (autoCapture) {
             return;
         }
-        captureNative().catch((error) => {
+        capture().catch((error) => {
             console.warn('[DocScanner] manual capture failed', error);
         });
-    }, [autoCapture, captureNative]);
+    }, [autoCapture, capture]);
     (0, react_1.useImperativeHandle)(ref, () => ({
-        capture: captureNative,
+        capture,
         reset: () => {
-            setStable(0);
-            resetNativeStability();
+            if (captureResolvers.current) {
+                captureResolvers.current.reject(new Error('reset'));
+                captureResolvers.current = null;
+            }
         },
-    }), [captureNative, resetNativeStability]);
+    }), [capture]);
     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 }),
-        !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 })),
+        react_1.default.createElement(react_native_document_scanner_1.default, { ref: scannerRef, style: react_native_1.StyleSheet.absoluteFillObject, detectionCountBeforeCapture: minStableFrames, overlayColor: overlayColor, enableTorch: enableTorch, quality: normalizedQuality, useBase64: useBase64, manualOnly: !autoCapture, onPictureTaken: handlePictureTaken, onError: handleError }),
+        !autoCapture && react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.button, onPress: handleManualCapture }),
         children));
 });
 const styles = react_native_1.StyleSheet.create({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Native-backed document scanner for React Native with customizable overlays.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -28,5 +28,7 @@
     "@types/react-native": "0.73.0",
     "typescript": "^5.3.3"
   },
-  "dependencies": {}
+  "dependencies": {
+    "react-native-document-scanner": "github:Michaelvilleneuve/react-native-document-scanner"
+  }
 }