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

package/src/DocScanner.tsx

@@ -5,73 +5,17 @@ import React, {
   useImperativeHandle,
   useMemo,
   useRef,
-  useState,
 } from 'react';
-import {
-  Platform,
-  findNodeHandle,
-  NativeModules,
-  requireNativeComponent,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-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;
-  bottomRight: Point;
-  bottomLeft: Point;
-};
-
-type RectangleEvent = {
-  rectangleCoordinates: NativeRectangle | null;
-  stableCounter: number;
-  frameWidth: number;
-  frameHeight: number;
-};
+import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
+import DocumentScanner from 'react-native-document-scanner';
 
 type PictureEvent = {
   croppedImage?: string | null;
-  initialImage?: string;
+  initialImage?: string | null;
   width?: number;
   height?: number;
 };
 
-type NativeDocScannerProps = {
-  style?: object;
-  detectionCountBeforeCapture?: number;
-  autoCapture?: boolean;
-  enableTorch?: boolean;
-  quality?: number;
-  useBase64?: boolean;
-  onRectangleDetect?: (event: NativeSyntheticEvent<RectangleEvent>) => void;
-  onPictureTaken?: (event: NativeSyntheticEvent<PictureEvent>) => void;
-};
-
-type DocScannerHandle = {
-  capture: () => Promise<PictureEvent>;
-  reset: () => void;
-};
-
-const NativeDocScanner = requireNativeComponent<NativeDocScannerProps>(VIEW_NAME);
-type NativeDocScannerInstance = React.ElementRef<typeof NativeDocScanner>;
-
 export interface DetectionConfig {
   processingWidth?: number;
   cannyLowThreshold?: number;
@@ -82,7 +26,7 @@ export interface DetectionConfig {
 }
 
 interface Props {
-  onCapture?: (photo: { path: string; quad: Point[] | null; width: number; height: number }) => void;
+  onCapture?: (photo: { path: string; quad: null; width: number; height: number }) => void;
   overlayColor?: string;
   autoCapture?: boolean;
   minStableFrames?: number;
@@ -94,200 +38,136 @@ interface Props {
   gridColor?: string;
   gridLineWidth?: number;
   detectionConfig?: DetectionConfig;
-  useNativeOverlay?: boolean;
 }
 
-const DEFAULT_OVERLAY_COLOR = '#e7a649';
-const GRID_COLOR_FALLBACK = 'rgba(231, 166, 73, 0.35)';
-
-export const DocScanner = forwardRef<DocScannerHandle, Props>(({
-  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 = 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 shouldUseNativeOverlay = useMemo(() => {
-    if (typeof useNativeOverlay === 'boolean') {
-      return useNativeOverlay;
-    }
-    return Platform.OS === 'ios';
-  }, [useNativeOverlay]);
-
-  const effectiveGridColor = useMemo(
-    () => gridColor ?? GRID_COLOR_FALLBACK,
-    [gridColor],
-  );
-
-  const ensureViewHandle = useCallback(() => {
-    const nodeHandle = findNodeHandle(viewRef.current);
-    if (!nodeHandle) {
-      throw new Error('Unable to obtain native view handle for DocScanner.');
-    }
-    return nodeHandle;
-  }, []);
-
-  const resetNativeStability = useCallback(() => {
-    try {
-      const handle = ensureViewHandle();
-      NativeDocScannerModule.reset(handle);
-    } catch (error) {
-      console.warn('[DocScanner] unable to reset native stability', error);
-    }
-  }, [ensureViewHandle]);
-
-  const emitCaptureResult = useCallback(
-    (payload: PictureEvent) => {
-      capturingRef.current = false;
-
-      const path = payload.croppedImage ?? payload.initialImage;
-      if (!path) {
-        return;
-      }
+type DocScannerHandle = {
+  capture: () => Promise<PictureEvent>;
+  reset: () => void;
+};
 
-      const width = payload.width ?? frameSize?.width ?? 0;
-      const height = payload.height ?? frameSize?.height ?? 0;
-      onCapture?.({
-        path,
-        quad,
-        width,
-        height,
-      });
-      setStable(0);
-      resetNativeStability();
+const DEFAULT_OVERLAY_COLOR = '#0b7ef4';
+
+export const DocScanner = forwardRef<DocScannerHandle, Props>(
+  (
+    {
+      onCapture,
+      overlayColor = DEFAULT_OVERLAY_COLOR,
+      autoCapture = true,
+      minStableFrames = 8,
+      enableTorch = false,
+      quality = 90,
+      useBase64 = false,
+      children,
+      showGrid = true,
     },
-    [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;
+    ref,
+  ) => {
+    const scannerRef = useRef<any>(null);
+    const captureResolvers = useRef<{
+      resolve: (value: PictureEvent) => void;
+      reject: (reason?: unknown) => void;
+    } | null>(null);
+
+    const normalizedQuality = useMemo(() => {
+      if (Platform.OS === 'ios') {
+        // iOS expects 0-1
+        return Math.min(1, Math.max(0, quality / 100));
       }
+      return Math.min(100, Math.max(0, quality));
+    }, [quality]);
+
+    const handlePictureTaken = useCallback(
+      (event: PictureEvent) => {
+        const path = event.croppedImage ?? event.initialImage;
+        if (path) {
+          onCapture?.({
+            path,
+            quad: null,
+            width: event.width ?? 0,
+            height: event.height ?? 0,
+          });
+        }
+
+        if (captureResolvers.current) {
+          captureResolvers.current.resolve(event);
+          captureResolvers.current = null;
+        }
+      },
+      [onCapture],
+    );
 
-      setQuad([
-        rectangleCoordinates.topLeft,
-        rectangleCoordinates.topRight,
-        rectangleCoordinates.bottomRight,
-        rectangleCoordinates.bottomLeft,
-      ]);
-
-      if (autoCapture && stableCounter >= minStableFrames) {
-        triggerCapture();
+    const handleError = useCallback((error: Error) => {
+      if (captureResolvers.current) {
+        captureResolvers.current.reject(error);
+        captureResolvers.current = null;
       }
-    },
-    [autoCapture, minStableFrames],
-  );
-
-  const handlePictureTaken = useCallback(
-    (event: NativeSyntheticEvent<PictureEvent>) => {
-      emitCaptureResult(event.nativeEvent);
-    },
-    [emitCaptureResult],
-  );
+    }, []);
 
-  const captureNative = useCallback((): Promise<PictureEvent> => {
-    if (capturingRef.current) {
-      return Promise.reject(new Error('capture_in_progress'));
-    }
+    const capture = useCallback((): Promise<PictureEvent> => {
+      const instance = scannerRef.current;
+      if (!instance || typeof instance.capture !== 'function') {
+        return Promise.reject(new Error('DocumentScanner native instance is not ready'));
+      }
+      if (captureResolvers.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;
+      const result = instance.capture();
+      if (result && typeof result.then === 'function') {
+        return result.then((payload: PictureEvent) => {
+          handlePictureTaken(payload);
+          return payload;
         });
-    } 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) {
-      return;
-    }
-    captureNative().catch((error: Error) => {
-      console.warn('[DocScanner] manual capture failed', error);
-    });
-  }, [autoCapture, captureNative]);
+      }
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      capture: captureNative,
-      reset: () => {
-        setStable(0);
-        resetNativeStability();
-      },
-    }),
-    [captureNative, resetNativeStability],
-  );
+      return new Promise<PictureEvent>((resolve, reject) => {
+        captureResolvers.current = { resolve, reject };
+      });
+    }, [handlePictureTaken]);
 
-  return (
-    <View style={styles.container}>
-      <NativeDocScanner
-        ref={viewRef}
-        style={StyleSheet.absoluteFill}
-        detectionCountBeforeCapture={minStableFrames}
-        autoCapture={autoCapture}
-        enableTorch={enableTorch}
-        quality={quality}
-        useBase64={useBase64}
-        onRectangleDetect={handleRectangleDetect}
-        onPictureTaken={handlePictureTaken}
-      />
-      {!shouldUseNativeOverlay && (
-        <Overlay
-          quad={quad}
-          color={overlayColor}
-          frameSize={frameSize}
-          showGrid={showGrid}
-          gridColor={effectiveGridColor}
-          gridLineWidth={gridLineWidth}
+    const handleManualCapture = useCallback(() => {
+      if (autoCapture) {
+        return;
+      }
+      capture().catch((error) => {
+        console.warn('[DocScanner] manual capture failed', error);
+      });
+    }, [autoCapture, capture]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        capture,
+        reset: () => {
+          if (captureResolvers.current) {
+            captureResolvers.current.reject(new Error('reset'));
+            captureResolvers.current = null;
+          }
+        },
+      }),
+      [capture],
+    );
+
+    return (
+      <View style={styles.container}>
+        <DocumentScanner
+          ref={scannerRef}
+          style={StyleSheet.absoluteFillObject}
+          detectionCountBeforeCapture={minStableFrames}
+          overlayColor={overlayColor}
+          enableTorch={enableTorch}
+          quality={normalizedQuality}
+          useBase64={useBase64}
+          manualOnly={!autoCapture}
+          onPictureTaken={handlePictureTaken}
+          onError={handleError}
         />
-      )}
-      {!autoCapture && (
-        <TouchableOpacity style={styles.button} onPress={handleManualCapture} />
-      )}
-      {children}
-    </View>
-  );
-});
+        {!autoCapture && <TouchableOpacity style={styles.button} onPress={handleManualCapture} />}
+        {children}
+      </View>
+    );
+  },
+);
 
 const styles = StyleSheet.create({
   container: {

package/src/external.d.ts

@@ -31,18 +31,6 @@ declare module '@shopify/react-native-skia' {
   export const Path: ComponentType<PathProps>;
 }
 
-declare module 'react-native-rectangle-doc-scanner/RNRDocScannerModule' {
-  export type NativeCaptureResult = {
-    croppedImage?: string | null;
-    initialImage?: string;
-    width?: number;
-    height?: number;
-  };
-
-  export function capture(viewTag: number): Promise<NativeCaptureResult>;
-  export function reset(viewTag: number): void;
-}
-
 declare module 'react-native-perspective-image-cropper' {
   import type { ComponentType } from 'react';
 
@@ -69,3 +57,31 @@ declare module 'react-native-perspective-image-cropper' {
   const CustomImageCropperDefault: ComponentType<CustomImageCropperProps>;
   export default CustomImageCropperDefault;
 }
+
+declare module 'react-native-document-scanner' {
+  import type { Component } from 'react';
+  import type { ViewStyle } from 'react-native';
+
+  export type DocumentScannerResult = {
+    croppedImage?: string | null;
+    initialImage?: string | null;
+    width?: number;
+    height?: number;
+  };
+
+  export interface DocumentScannerProps {
+    style?: ViewStyle;
+    detectionCountBeforeCapture?: number;
+    overlayColor?: string;
+    enableTorch?: boolean;
+    useBase64?: boolean;
+    quality?: number;
+    manualOnly?: boolean;
+    onPictureTaken?: (event: DocumentScannerResult) => void;
+    onError?: (error: Error) => void;
+  }
+
+  export default class DocumentScanner extends Component<DocumentScannerProps> {
+    capture(): Promise<DocumentScannerResult>;
+  }
+}

package/android/build.gradle

@@ -1,55 +0,0 @@
-buildscript {
-    repositories {
-        google()
-        mavenCentral()
-    }
-    dependencies {
-        classpath("com.android.tools.build:gradle:8.1.1")
-        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.9.10")
-    }
-}
-
-apply plugin: "com.android.library"
-apply plugin: "org.jetbrains.kotlin.android"
-
-android {
-    namespace "com.reactnativerectangledocscanner"
-    compileSdkVersion 34
-
-    defaultConfig {
-        minSdkVersion 24
-        targetSdkVersion 34
-        consumerProguardFiles "consumer-rules.pro"
-    }
-
-    buildTypes {
-        release {
-            minifyEnabled false
-            proguardFiles getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro"
-        }
-    }
-
-    compileOptions {
-        sourceCompatibility JavaVersion.VERSION_11
-        targetCompatibility JavaVersion.VERSION_11
-    }
-
-    kotlinOptions {
-        jvmTarget = "11"
-    }
-}
-
-repositories {
-    google()
-    mavenCentral()
-}
-
-dependencies {
-    implementation "com.facebook.react:react-native:+"
-    implementation "androidx.camera:camera-core:1.3.1"
-    implementation "androidx.camera:camera-camera2:1.3.1"
-    implementation "androidx.camera:camera-lifecycle:1.3.1"
-    implementation "androidx.camera:camera-view:1.3.1"
-    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3"
-    implementation "org.opencv:opencv-android:4.9.0"
-}

package/android/consumer-rules.pro

@@ -1 +0,0 @@
-# Consumer ProGuard rules will be added once native implementation is complete.

package/android/proguard-rules.pro

@@ -1 +0,0 @@
-# Keep default empty; add rules when native implementation is added.

package/android/src/main/java/com/reactnativerectangledocscanner/RNRDocScannerModule.kt

@@ -1,37 +0,0 @@
-package com.reactnativerectangledocscanner
-
-import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.Promise
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReactContextBaseJavaModule
-import com.facebook.react.bridge.ReactMethod
-import com.facebook.react.bridge.UiThreadUtil
-import com.facebook.react.uimanager.UIManagerHelper
-import com.facebook.react.uimanager.events.EventDispatcher
-
-class RNRDocScannerModule(
-  private val reactContext: ReactApplicationContext,
-) : ReactContextBaseJavaModule(reactContext) {
-
-  override fun getName() = "RNRDocScannerModule"
-
-  @ReactMethod
-  fun capture(viewTag: Int, promise: Promise) {
-    UiThreadUtil.runOnUiThread {
-      val view = UIManagerHelper.getView(reactContext, viewTag) as? RNRDocScannerView
-      if (view == null) {
-        promise.reject("view_not_found", "Unable to locate DocScanner view.")
-        return@runOnUiThread
-      }
-      view.capture(promise)
-    }
-  }
-
-  @ReactMethod
-  fun reset(viewTag: Int) {
-    UiThreadUtil.runOnUiThread {
-      val view = UIManagerHelper.getView(reactContext, viewTag) as? RNRDocScannerView
-      view?.reset()
-    }
-  }
-}

package/android/src/main/java/com/reactnativerectangledocscanner/RNRDocScannerPackage.kt

@@ -1,16 +0,0 @@
-package com.reactnativerectangledocscanner
-
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReactPackage
-import com.facebook.react.bridge.NativeModule
-import com.facebook.react.uimanager.ViewManager
-
-class RNRDocScannerPackage : ReactPackage {
-  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
-    return listOf(RNRDocScannerModule(reactContext))
-  }
-
-  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-    return listOf(RNRDocScannerViewManager(reactContext))
-  }
-}