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

package/README.md

@@ -1,80 +1,66 @@
 # React Native Rectangle Doc Scanner
 
-VisionCamera + Fast-OpenCV powered document scanner template built for React Native. You can install it as a reusable module, extend the detection pipeline, and publish to npm out of the box.
+> ⚠️ **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.
+
+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
-- Real-time quad detection using `react-native-fast-opencv`
-- Frame processor worklet executed on the UI thread via `react-native-vision-camera`
-- High-resolution processing (1280p) for accurate corner detection
-- Advanced anchor locking system maintains corner positions during camera movement
-- Intelligent edge detection with optimized Canny parameters (50/150 thresholds)
-- Adaptive smoothing with weighted averaging across multiple frames
-- Resize plugin keeps frame processing fast on lower-end devices
-- Skia overlay visualises detected document contours
-- Stability tracker enables auto-capture once the document is steady
+
+- 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
-Install the module alongside these peer dependencies (your host app should already include them or install them now):
 
-- `react-native-vision-camera` (v3+) with frame processors enabled
-- `vision-camera-resize-plugin`
-- `react-native-fast-opencv`
-- `react-native-perspective-image-cropper`
-- `react-native-reanimated` + `react-native-worklets-core`
-- `@shopify/react-native-skia`
-- `react`, `react-native`
+- 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`
 
 ## Installation
 
 ```sh
 yarn add react-native-rectangle-doc-scanner \
-  react-native-vision-camera \
-  vision-camera-resize-plugin \
-  react-native-fast-opencv \
-  react-native-perspective-image-cropper \
-  react-native-reanimated \
-  react-native-worklets-core \
-  @shopify/react-native-skia
-```
-
-Follow each dependency’s native installation guide:
+  @shopify/react-native-skia \
+  react-native-perspective-image-cropper
 
-- Run `npx pod-install` after adding iOS dependencies.
-- For `react-native-reanimated`, add the Babel plugin, enable the JSI runtime, and ensure Reanimated is the first import in `index.js`.
-- Configure `react-native-fast-opencv` according to its README (adds native OpenCV binaries on both platforms).
-- For `react-native-vision-camera`, enable frame processors by adding the new architecture build and the proxy registration they describe. You must also request camera permissions at runtime.
-- Register the resize plugin once in native code (for example inside your `VisionCameraProxy` setup):
-
-  ```ts
-  import { VisionCameraProxy } from 'react-native-vision-camera';
-  import { ResizePlugin } from 'vision-camera-resize-plugin';
+# iOS
+cd ios && pod install
+```
 
-  VisionCameraProxy.installFrameProcessorPlugin('resize', ResizePlugin);
-  ```
+Android will automatically pick up the included Gradle configuration. If you use a custom package list (old architecture), register `new RNRDocScannerPackage()` manually.
 
 ## Usage
 
-### Basic Document Scanning
-
 ```tsx
 import React, { useState } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { DocScanner, CropEditor, type CapturedDocument } from 'react-native-rectangle-doc-scanner';
-
-export const ScanScreen = () => {
+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) {
-    // Show crop editor after capture
     return (
       <CropEditor
         document={capturedDoc}
-        overlayColor="rgba(0,0,0,0.5)"
+        overlayColor="rgba(0,0,0,0.6)"
         overlayStrokeColor="#e7a649"
         handlerColor="#e7a649"
         onCropChange={(rectangle) => {
-          console.log('User adjusted corners:', rectangle);
-          // Process the adjusted corners
+          console.log('Adjusted corners:', rectangle);
         }}
       />
     );
@@ -83,17 +69,16 @@ export const ScanScreen = () => {
   return (
     <View style={styles.container}>
       <DocScanner
+        overlayColor="#e7a649"
+        minStableFrames={8}
+        autoCapture
         onCapture={(doc) => {
-          console.log('Document captured:', doc);
+          console.log('Captured document:', doc);
           setCapturedDoc(doc);
         }}
-        overlayColor="#e7a649"
-        autoCapture
-        minStableFrames={8}
-        cameraProps={{ enableZoomGesture: true }}
       >
-        <View style={styles.overlayControls}>
-          <Text style={styles.hint}>Position document in frame</Text>
+        <View style={styles.overlay}>
+          <Text style={styles.hint}>Align the document with the frame</Text>
         </View>
       </DocScanner>
     </View>
@@ -101,141 +86,85 @@ export const ScanScreen = () => {
 };
 
 const styles = StyleSheet.create({
-  container: { flex: 1 },
-  overlayControls: {
+  container: { flex: 1, backgroundColor: '#000' },
+  overlay: {
     position: 'absolute',
     top: 60,
     alignSelf: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 8,
+    borderRadius: 12,
+    backgroundColor: 'rgba(0,0,0,0.55)',
   },
-  hint: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-    textShadowColor: 'rgba(0,0,0,0.75)',
-    textShadowOffset: { width: 0, height: 1 },
-    textShadowRadius: 3,
-  },
+  hint: { color: '#fff', fontSize: 15, fontWeight: '600' },
 });
 ```
 
-### Advanced Configuration
+The native view renders underneath; anything you pass as `children` sits on top, so you can add custom buttons, headers, progress indicators, etc.
 
-```tsx
-import { DocScanner, type DetectionConfig } from 'react-native-rectangle-doc-scanner';
-
-const detectionConfig: DetectionConfig = {
-  processingWidth: 1280,      // Higher = more accurate but slower
-  cannyLowThreshold: 40,      // Lower = detect more edges
-  cannyHighThreshold: 120,    // Edge strength threshold
-  snapDistance: 8,            // Corner lock sensitivity
-  maxAnchorMisses: 20,        // Frames to hold anchor when detection fails
-  maxCenterDelta: 200,        // Max camera movement while maintaining lock
-};
+## API
 
-<DocScanner
-  detectionConfig={detectionConfig}
-  onCapture={(doc) => {
-    // doc includes: path, quad, width, height
-    console.log('Captured with size:', doc.width, 'x', doc.height);
-  }}
-/>
-```
+### `<DocScanner />`
 
-Passing `children` lets you render any UI on top of the camera preview, so you can freely add buttons, tutorials, or progress indicators without modifying the package.
+| 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. |
 
-## API Reference
+Imperative helpers are exposed via `DocScannerHandle`:
 
-### DocScanner Props
+```ts
+import { DocScanner, type DocScannerHandle } from 'react-native-rectangle-doc-scanner';
 
-- `onCapture({ path, quad, width, height })` — called when a photo is taken
-  - `path`: file path to the captured image
-  - `quad`: detected corner coordinates (or `null` if none found)
-  - `width`, `height`: original frame dimensions for coordinate scaling
-- `overlayColor` (default `#e7a649`) — stroke color for the contour overlay
-- `autoCapture` (default `true`) — auto-captures after stability is reached
-- `minStableFrames` (default `8`) — consecutive stable frames required before auto capture
-- `cameraProps` — forwarded to underlying `Camera` (zoom, HDR, torch, etc.)
-- `children` — custom UI rendered over the camera preview
-- `detectionConfig` — advanced detection configuration (see below)
+const ref = useRef<DocScannerHandle>(null);
 
-### DetectionConfig
+const fireCapture = () => {
+  ref.current?.capture().then((result) => {
+    console.log(result);
+  });
+};
+```
 
-Fine-tune the detection algorithm for your specific use case:
+> 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.
 
-```typescript
-interface DetectionConfig {
-  processingWidth?: number;      // Default: 1280 (higher = more accurate but slower)
-  cannyLowThreshold?: number;    // Default: 40 (lower = detect more edges)
-  cannyHighThreshold?: number;   // Default: 120 (edge strength threshold)
-  snapDistance?: number;         // Default: 8 (corner lock sensitivity in pixels)
-  maxAnchorMisses?: number;      // Default: 20 (frames to hold anchor when detection fails)
-  maxCenterDelta?: number;       // Default: 200 (max camera movement while maintaining lock)
-}
-```
+### `<CropEditor />`
 
-### CropEditor Props
-
-- `document` — `CapturedDocument` object from `onCapture` callback
-- `overlayColor` (default `rgba(0,0,0,0.5)`) — color of overlay outside crop area
-- `overlayStrokeColor` (default `#e7a649`) — color of crop boundary lines
-- `handlerColor` (default `#e7a649`) — color of corner drag handles
-- `enablePanStrict` (default `false`) — enable strict panning behavior
-- `onCropChange(rectangle)` — callback when user adjusts corners
-
-### Notes on camera behaviour
-
-- If you disable `autoCapture`, the built-in shutter button appears; you can still provide your own UI as `children` to replace or augment it.
-- The internal frame processor handles document detection; do not override `frameProcessor` in `cameraProps`.
-- Adjust `minStableFrames` or tweak lighting conditions if auto capture is too sensitive or too slow.
-
-## Detection Algorithm
-
-The scanner uses a sophisticated multi-stage pipeline optimized for quality and stability:
-
-### 1. Pre-processing (Configurable Resolution)
-- Resizes frame to `processingWidth` (default 1280p) for optimal accuracy
-- Converts to grayscale
-- **Enhanced morphological operations**:
-  - MORPH_CLOSE to fill small holes in edges (7x7 kernel)
-  - MORPH_OPEN to remove small noise
-- **Bilateral filter** for edge-preserving smoothing (better than Gaussian)
-- **Adaptive Canny edge detection** with configurable thresholds (default 40/120)
-
-### 2. Contour Detection
-- Finds external contours using CHAIN_APPROX_SIMPLE
-- Applies convex hull for improved corner accuracy
-- Tests **23 epsilon values** (0.1%-10%) for approxPolyDP to find exact 4 corners
-- Validates quadrilaterals for convexity and valid coordinates
-
-### 3. Advanced Anchor Locking System
-Once corners are detected, the system maintains stability through:
-- **Snap locking**: Corners lock to positions when movement is minimal
-- **Camera movement tolerance**: Maintains lock during movement (up to 200px center delta)
-- **Persistence**: Holds anchor for up to 20 consecutive failed detections
-- **Adaptive blending**: Smoothly transitions between old and new positions
-- **Confidence building**: Increases lock strength over time (max 30 frames)
-- **Intelligent reset**: Only resets when document clearly changes
-
-### 4. Quad Validation
-- Area ratio filtering (0.02%-90% of frame)
-- Minimum edge length validation
-- Aspect ratio constraints (max 7:1)
-- Convexity checks to filter invalid shapes
-
-### 5. Post-Capture Editing
-After capture, users can manually adjust corners using the `CropEditor` component:
-- Grid-based interface with perspective view
-- Draggable corner handles
-- Real-time preview of adjusted crop area
-- Exports adjusted coordinates for final processing
-
-This multi-layered approach ensures high-quality detection with maximum flexibility for various document types and lighting conditions.
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `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
+
+- ✅ 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
+
+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
 ```
+
 Generates the `dist/` output via TypeScript.
 
 ## License
+
 MIT

package/android/build.gradle

@@ -0,0 +1,55 @@
+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 "com.google.mlkit:document-scanner:16.0.0-beta3"
+    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3"
+}

package/android/consumer-rules.pro

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

package/android/proguard-rules.pro

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

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.reactnativerectangledocscanner">
+
+    <uses-permission android:name="android.permission.CAMERA" />
+
+    <application>
+        <!-- Placeholder application entry, not used for libraries. -->
+    </application>
+
+</manifest>

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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,16 @@
+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))
+  }
+}

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

@@ -0,0 +1,129 @@
+package com.reactnativerectangledocscanner
+
+import android.content.Context
+import android.graphics.Color
+import android.util.AttributeSet
+import android.util.Log
+import android.widget.FrameLayout
+import androidx.camera.core.ImageAnalysis
+import androidx.camera.core.ImageCapture
+import androidx.camera.lifecycle.ProcessCameraProvider
+import androidx.camera.view.PreviewView
+import androidx.core.content.ContextCompat
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.RCTEventEmitter
+import java.util.concurrent.ExecutorService
+import java.util.concurrent.Executors
+
+class RNRDocScannerView @JvmOverloads constructor(
+  context: Context,
+  attrs: AttributeSet? = null,
+) : FrameLayout(context, attrs) {
+
+  var detectionCountBeforeCapture: Int = 8
+  var autoCapture: Boolean = true
+  var enableTorch: Boolean = false
+    set(value) {
+      field = value
+      updateTorchMode(value)
+    }
+  var quality: Int = 90
+  var useBase64: Boolean = false
+
+  private val previewView: PreviewView = PreviewView(context)
+  private var cameraProvider: ProcessCameraProvider? = null
+  private var imageCapture: ImageCapture? = null
+  private var imageAnalysis: ImageAnalysis? = null
+  private var cameraExecutor: ExecutorService? = null
+  private var currentStableCounter: Int = 0
+  private var captureInFlight: Boolean = false
+
+  init {
+    setBackgroundColor(Color.BLACK)
+    addView(
+      previewView,
+      LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT),
+    )
+    initializeCamera()
+  }
+
+  private fun initializeCamera() {
+    cameraExecutor = Executors.newSingleThreadExecutor()
+    val providerFuture = ProcessCameraProvider.getInstance(context)
+    providerFuture.addListener(
+      {
+        cameraProvider = providerFuture.get()
+        // TODO: Configure Preview + ImageAnalysis + ML Kit processing.
+      },
+      ContextCompat.getMainExecutor(context),
+    )
+  }
+
+  fun emitRectangle(rectangle: WritableMap?) {
+    val event: WritableMap = Arguments.createMap().apply {
+      if (rectangle != null) {
+        putMap("rectangleCoordinates", rectangle)
+        currentStableCounter = (currentStableCounter + 1).coerceAtMost(detectionCountBeforeCapture)
+      } else {
+        putNull("rectangleCoordinates")
+        currentStableCounter = 0
+      }
+      putInt("stableCounter", currentStableCounter)
+      // Frame size placeholders until analysis is wired.
+      putDouble("frameWidth", width.toDouble())
+      putDouble("frameHeight", height.toDouble())
+    }
+
+    (context as? ReactContext)
+      ?.getJSModule(RCTEventEmitter::class.java)
+      ?.receiveEvent(id, "onRectangleDetect", event)
+  }
+
+  fun emitPictureTaken(payload: WritableMap) {
+    (context as? ReactContext)
+      ?.getJSModule(RCTEventEmitter::class.java)
+      ?.receiveEvent(id, "onPictureTaken", payload)
+  }
+
+  fun capture(promise: Promise) {
+    if (captureInFlight) {
+      promise.reject("capture_in_progress", "A capture request is already running.")
+      return
+    }
+
+    val imageCapture = this.imageCapture
+    if (imageCapture == null) {
+      promise.reject("capture_unavailable", "Image capture is not initialised yet.")
+      return
+    }
+
+    captureInFlight = true
+    // TODO: Hook into ImageCapture#takePicture and ML Kit cropping.
+    postDelayed(
+      {
+        captureInFlight = false
+        promise.reject("not_implemented", "Native capture pipeline has not been implemented.")
+      },
+      100,
+    )
+  }
+
+  fun reset() {
+    currentStableCounter = 0
+  }
+
+  private fun updateTorchMode(enabled: Boolean) {
+    // TODO: Toggle torch once camera is integrated.
+    Log.d("RNRDocScanner", "Torch set to $enabled (not yet wired).")
+  }
+
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+    cameraExecutor?.shutdown()
+    cameraExecutor = null
+    cameraProvider?.unbindAll()
+  }
+}

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

@@ -0,0 +1,50 @@
+package com.reactnativerectangledocscanner
+
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+
+class RNRDocScannerViewManager(
+  private val reactContext: ReactApplicationContext,
+) : SimpleViewManager<RNRDocScannerView>() {
+
+  override fun getName() = "RNRDocScannerView"
+
+  override fun createViewInstance(reactContext: ThemedReactContext): RNRDocScannerView {
+    return RNRDocScannerView(reactContext)
+  }
+
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
+    return mutableMapOf(
+      "onRectangleDetect" to mapOf("registrationName" to "onRectangleDetect"),
+      "onPictureTaken" to mapOf("registrationName" to "onPictureTaken"),
+    )
+  }
+
+  @ReactProp(name = "detectionCountBeforeCapture", defaultInt = 8)
+  fun setDetectionCountBeforeCapture(view: RNRDocScannerView, value: Int) {
+    view.detectionCountBeforeCapture = value
+  }
+
+  @ReactProp(name = "autoCapture", defaultBoolean = true)
+  fun setAutoCapture(view: RNRDocScannerView, value: Boolean) {
+    view.autoCapture = value
+  }
+
+  @ReactProp(name = "enableTorch", defaultBoolean = false)
+  fun setEnableTorch(view: RNRDocScannerView, value: Boolean) {
+    view.enableTorch = value
+  }
+
+  @ReactProp(name = "quality", defaultInt = 90)
+  fun setQuality(view: RNRDocScannerView, value: Int) {
+    view.quality = value
+  }
+
+  @ReactProp(name = "useBase64", defaultBoolean = false)
+  fun setUseBase64(view: RNRDocScannerView, value: Boolean) {
+    view.useBase64 = value
+  }
+}