react-native-rectangle-doc-scanner 4.15.0 → 4.17.0

package/android/build.gradle

@@ -17,6 +17,8 @@ def safeExtGet(prop, fallback) {
     rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
 }
 
+def hasVisionCamera = rootProject.findProject(':react-native-vision-camera') != null
+
 android {
     compileSdkVersion safeExtGet('compileSdkVersion', 33)
 
@@ -45,6 +47,9 @@ android {
     sourceSets {
         main {
             java.srcDirs += 'src/main/kotlin'
+            if (hasVisionCamera) {
+                java.srcDirs += 'src/visioncamera/kotlin'
+            }
         }
     }
 }
@@ -78,4 +83,8 @@ dependencies {
     // AndroidX
     implementation 'androidx.core:core-ktx:1.10.1'
     implementation 'androidx.appcompat:appcompat:1.6.1'
+
+    if (hasVisionCamera) {
+        implementation project(':react-native-vision-camera')
+    }
 }

package/android/src/main/kotlin/com/reactnativerectangledocscanner/CameraController.kt

@@ -510,6 +510,20 @@ class CameraController(
 
     private fun computeRotationDegrees(): Int {
         val displayRotation = displayRotationDegrees()
+        if (sensorOrientation == 0) {
+            return if (useFrontCamera) {
+                (360 - displayRotation) % 360
+            } else {
+                displayRotation
+            }
+        }
+        if (sensorOrientation == 180) {
+            return if (useFrontCamera) {
+                (180 + displayRotation) % 360
+            } else {
+                (180 - displayRotation + 360) % 360
+            }
+        }
         return if (useFrontCamera) {
             (sensorOrientation + displayRotation) % 360
         } else {

package/android/src/main/kotlin/com/reactnativerectangledocscanner/DocumentScannerModule.kt

@@ -5,6 +5,7 @@ import android.util.Log
 import com.facebook.react.bridge.*
 import com.facebook.react.uimanager.UIManagerModule
 import kotlinx.coroutines.*
+import org.opencv.core.Point
 
 class DocumentScannerModule(reactContext: ReactApplicationContext) :
     ReactContextBaseJavaModule(reactContext) {
@@ -114,8 +115,188 @@ class DocumentScannerModule(reactContext: ReactApplicationContext) :
         }
     }
 
+    /**
+     * Process a captured image from JS (VisionCamera path).
+     * Options map keys:
+     * - imagePath: String (required)
+     * - rectangleCoordinates: Map (optional)
+     * - rectangleWidth: Int (optional)
+     * - rectangleHeight: Int (optional)
+     * - useBase64: Boolean (optional)
+     * - quality: Double (optional)
+     * - brightness: Double (optional)
+     * - contrast: Double (optional)
+     * - saturation: Double (optional)
+     * - saveInAppDocument: Boolean (optional)
+     */
+    @ReactMethod
+    fun processImage(options: ReadableMap, promise: Promise) {
+        scope.launch {
+            try {
+                val imagePath = options.getString("imagePath")
+                    ?: throw IllegalArgumentException("imagePath is required")
+                val rectangleMap = if (options.hasKey("rectangleCoordinates")) {
+                    options.getMap("rectangleCoordinates")
+                } else {
+                    null
+                }
+                val rectangleWidth = if (options.hasKey("rectangleWidth")) {
+                    options.getInt("rectangleWidth")
+                } else {
+                    0
+                }
+                val rectangleHeight = if (options.hasKey("rectangleHeight")) {
+                    options.getInt("rectangleHeight")
+                } else {
+                    0
+                }
+                val useBase64 = options.hasKey("useBase64") && options.getBoolean("useBase64")
+                val quality = if (options.hasKey("quality")) {
+                    options.getDouble("quality").toFloat()
+                } else {
+                    0.95f
+                }
+                val brightness = if (options.hasKey("brightness")) {
+                    options.getDouble("brightness").toFloat()
+                } else {
+                    0f
+                }
+                val contrast = if (options.hasKey("contrast")) {
+                    options.getDouble("contrast").toFloat()
+                } else {
+                    1f
+                }
+                val saturation = if (options.hasKey("saturation")) {
+                    options.getDouble("saturation").toFloat()
+                } else {
+                    1f
+                }
+                val saveInAppDocument = options.hasKey("saveInAppDocument") && options.getBoolean("saveInAppDocument")
+
+                withContext(Dispatchers.IO) {
+                    val bitmap = BitmapFactory.decodeFile(imagePath)
+                        ?: throw IllegalStateException("decode_failed")
+                    val rectangle = rectangleMap?.let { mapToRectangle(it) }
+                    val scaledRectangle = if (rectangle != null && rectangleWidth > 0 && rectangleHeight > 0) {
+                        scaleRectangleToBitmap(rectangle, rectangleWidth, rectangleHeight, bitmap.width, bitmap.height)
+                    } else {
+                        rectangle
+                    }
+
+                    val processed = ImageProcessor.processImage(
+                        imagePath = imagePath,
+                        rectangle = scaledRectangle,
+                        brightness = brightness,
+                        contrast = contrast,
+                        saturation = saturation,
+                        shouldCrop = scaledRectangle != null
+                    )
+
+                    val outputDir = if (saveInAppDocument) {
+                        reactApplicationContext.filesDir
+                    } else {
+                        reactApplicationContext.cacheDir
+                    }
+
+                    val timestamp = System.currentTimeMillis()
+
+                    val result = Arguments.createMap()
+                    if (useBase64) {
+                        val croppedBase64 = ImageProcessor.bitmapToBase64(processed.croppedImage, quality)
+                        val initialBase64 = ImageProcessor.bitmapToBase64(processed.initialImage, quality)
+                        result.putString("croppedImage", croppedBase64)
+                        result.putString("initialImage", initialBase64)
+                    } else {
+                        val croppedPath = ImageProcessor.saveBitmapToFile(
+                            processed.croppedImage,
+                            outputDir,
+                            "cropped_img_$timestamp.jpeg",
+                            quality
+                        )
+                        val initialPath = ImageProcessor.saveBitmapToFile(
+                            processed.initialImage,
+                            outputDir,
+                            "initial_img_$timestamp.jpeg",
+                            quality
+                        )
+                        result.putString("croppedImage", croppedPath)
+                        result.putString("initialImage", initialPath)
+                    }
+
+                    result.putMap("rectangleCoordinates", scaledRectangle?.let { rectangleToWritableMap(it) })
+                    result.putInt("width", processed.croppedImage.width)
+                    result.putInt("height", processed.croppedImage.height)
+
+                    withContext(Dispatchers.Main) {
+                        promise.resolve(result)
+                    }
+                }
+            } catch (e: Exception) {
+                Log.e(TAG, "Failed to process image", e)
+                promise.reject("PROCESSING_FAILED", "Failed to process image: ${e.message}", e)
+            }
+        }
+    }
+
     override fun onCatalystInstanceDestroy() {
         super.onCatalystInstanceDestroy()
         scope.cancel()
     }
+
+    private fun mapToRectangle(map: ReadableMap): Rectangle? {
+        fun toPoint(pointMap: ReadableMap?): Point? {
+            if (pointMap == null) return null
+            if (!pointMap.hasKey("x") || !pointMap.hasKey("y")) return null
+            return Point(pointMap.getDouble("x"), pointMap.getDouble("y"))
+        }
+
+        val topLeft = toPoint(map.getMap("topLeft"))
+        val topRight = toPoint(map.getMap("topRight"))
+        val bottomLeft = toPoint(map.getMap("bottomLeft"))
+        val bottomRight = toPoint(map.getMap("bottomRight"))
+
+        if (topLeft == null || topRight == null || bottomLeft == null || bottomRight == null) {
+            return null
+        }
+
+        return Rectangle(topLeft, topRight, bottomLeft, bottomRight)
+    }
+
+    private fun rectangleToWritableMap(rectangle: Rectangle): WritableMap {
+        val map = Arguments.createMap()
+        fun putPoint(key: String, point: Point) {
+            val pointMap = Arguments.createMap()
+            pointMap.putDouble("x", point.x)
+            pointMap.putDouble("y", point.y)
+            map.putMap(key, pointMap)
+        }
+        putPoint("topLeft", rectangle.topLeft)
+        putPoint("topRight", rectangle.topRight)
+        putPoint("bottomLeft", rectangle.bottomLeft)
+        putPoint("bottomRight", rectangle.bottomRight)
+        return map
+    }
+
+    private fun scaleRectangleToBitmap(
+        rectangle: Rectangle,
+        srcWidth: Int,
+        srcHeight: Int,
+        dstWidth: Int,
+        dstHeight: Int
+    ): Rectangle {
+        if (srcWidth == 0 || srcHeight == 0) return rectangle
+        val scaleX = dstWidth.toDouble() / srcWidth.toDouble()
+        val scaleY = dstHeight.toDouble() / srcHeight.toDouble()
+
+        fun mapPoint(point: Point): Point {
+            return Point(point.x * scaleX, point.y * scaleY)
+        }
+
+        return Rectangle(
+            mapPoint(rectangle.topLeft),
+            mapPoint(rectangle.topRight),
+            mapPoint(rectangle.bottomLeft),
+            mapPoint(rectangle.bottomRight)
+        )
+    }
 }

package/android/src/main/kotlin/com/reactnativerectangledocscanner/DocumentScannerPackage.kt

@@ -1,12 +1,20 @@
 package com.reactnativerectangledocscanner
 
+import android.util.Log
 import com.facebook.react.ReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ViewManager
 
 class DocumentScannerPackage : ReactPackage {
+    companion object {
+        private const val TAG = "DocumentScannerPackage"
+        private const val VISION_CAMERA_REGISTRY =
+            "com.reactnativerectangledocscanner.VisionCameraFrameProcessorRegistry"
+    }
+
     override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        registerVisionCameraPlugin()
         return listOf(DocumentScannerModule(reactContext))
     }
 
@@ -16,4 +24,16 @@ class DocumentScannerPackage : ReactPackage {
             CameraViewManager()
         )
     }
+
+    private fun registerVisionCameraPlugin() {
+        try {
+            val registryClass = Class.forName(VISION_CAMERA_REGISTRY)
+            val registerMethod = registryClass.getMethod("register")
+            registerMethod.invoke(null)
+        } catch (e: ClassNotFoundException) {
+            // VisionCamera not installed in the host app; skip registration.
+        } catch (e: Exception) {
+            Log.w(TAG, "Failed to register VisionCamera frame processor", e)
+        }
+    }
 }

package/android/src/visioncamera/kotlin/com/reactnativerectangledocscanner/DocumentScannerFrameProcessorPlugin.kt

@@ -0,0 +1,44 @@
+package com.reactnativerectangledocscanner
+
+import android.util.Log
+import com.mrousavy.camera.frameprocessors.Frame
+import com.mrousavy.camera.frameprocessors.FrameProcessorPlugin
+
+class DocumentScannerFrameProcessorPlugin : FrameProcessorPlugin() {
+    override fun callback(frame: Frame, params: Map<String, Any>?): Any? {
+        return try {
+            val imageProxy = frame.imageProxy
+            val rotationDegrees = imageProxy.imageInfo.rotationDegrees
+            val frameWidth = if (rotationDegrees == 90 || rotationDegrees == 270) {
+                imageProxy.height
+            } else {
+                imageProxy.width
+            }
+            val frameHeight = if (rotationDegrees == 90 || rotationDegrees == 270) {
+                imageProxy.width
+            } else {
+                imageProxy.height
+            }
+
+            val nv21 = imageProxy.toNv21()
+            val rectangle = DocumentDetector.detectRectangleInYUV(
+                nv21,
+                imageProxy.width,
+                imageProxy.height,
+                rotationDegrees
+            )
+
+            val result = HashMap<String, Any?>()
+            result["rectangle"] = rectangle?.toMap()
+            result["imageWidth"] = frameWidth
+            result["imageHeight"] = frameHeight
+            result["rotation"] = rotationDegrees
+            result["isMirrored"] = runCatching { frame.isMirrored }.getOrDefault(false)
+
+            result
+        } catch (e: Throwable) {
+            Log.e("DocScannerVC", "Frame processor failed", e)
+            null
+        }
+    }
+}

package/android/src/visioncamera/kotlin/com/reactnativerectangledocscanner/VisionCameraFrameProcessorRegistry.kt

@@ -0,0 +1,18 @@
+package com.reactnativerectangledocscanner
+
+import com.mrousavy.camera.frameprocessors.FrameProcessorPluginRegistry
+import java.util.concurrent.atomic.AtomicBoolean
+
+object VisionCameraFrameProcessorRegistry {
+    private val registered = AtomicBoolean(false)
+
+    @JvmStatic
+    fun register() {
+        if (!registered.compareAndSet(false, true)) {
+            return
+        }
+        FrameProcessorPluginRegistry.addFrameProcessorPlugin("DocumentScanner") { _, _ ->
+            DocumentScannerFrameProcessorPlugin()
+        }
+    }
+}

package/dist/DocScanner.js

@@ -44,6 +44,19 @@ const coordinate_1 = require("./utils/coordinate");
 const overlay_1 = require("./utils/overlay");
 const isFiniteNumber = (value) => typeof value === 'number' && Number.isFinite(value);
 const { RNPdfScannerManager } = react_native_1.NativeModules;
+const safeRequire = (moduleName) => {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        return require(moduleName);
+    }
+    catch {
+        return null;
+    }
+};
+const visionCameraModule = react_native_1.Platform.OS === 'android' ? safeRequire('react-native-vision-camera') : null;
+const reanimatedModule = react_native_1.Platform.OS === 'android' ? safeRequire('react-native-reanimated') : null;
+const hasVisionCamera = react_native_1.Platform.OS === 'android' &&
+    Boolean(visionCameraModule?.Camera && visionCameraModule?.useCameraDevice && visionCameraModule?.useFrameProcessor);
 const normalizePoint = (point) => {
     if (!point || !isFiniteNumber(point.x) || !isFiniteNumber(point.y)) {
         return null;
@@ -69,7 +82,350 @@ const normalizeRectangle = (rectangle) => {
     };
 };
 const DEFAULT_OVERLAY_COLOR = '#0b7ef4';
+const RectangleQuality = {
+    GOOD: 0,
+    BAD_ANGLE: 1,
+    TOO_FAR: 2,
+};
+const evaluateRectangleQualityInView = (rectangle, viewWidth, viewHeight) => {
+    if (!viewWidth || !viewHeight) {
+        return RectangleQuality.TOO_FAR;
+    }
+    const minDim = Math.min(viewWidth, viewHeight);
+    const angleThreshold = Math.max(60, minDim * 0.08);
+    const topYDiff = Math.abs(rectangle.topRight.y - rectangle.topLeft.y);
+    const bottomYDiff = Math.abs(rectangle.bottomLeft.y - rectangle.bottomRight.y);
+    const leftXDiff = Math.abs(rectangle.topLeft.x - rectangle.bottomLeft.x);
+    const rightXDiff = Math.abs(rectangle.topRight.x - rectangle.bottomRight.x);
+    if (topYDiff > angleThreshold ||
+        bottomYDiff > angleThreshold ||
+        leftXDiff > angleThreshold ||
+        rightXDiff > angleThreshold) {
+        return RectangleQuality.BAD_ANGLE;
+    }
+    const margin = Math.max(120, minDim * 0.12);
+    if (rectangle.topLeft.y > margin ||
+        rectangle.topRight.y > margin ||
+        rectangle.bottomLeft.y < viewHeight - margin ||
+        rectangle.bottomRight.y < viewHeight - margin) {
+        return RectangleQuality.TOO_FAR;
+    }
+    return RectangleQuality.GOOD;
+};
+const mirrorRectangleHorizontally = (rectangle, imageWidth) => ({
+    topLeft: { x: imageWidth - rectangle.topRight.x, y: rectangle.topRight.y },
+    topRight: { x: imageWidth - rectangle.topLeft.x, y: rectangle.topLeft.y },
+    bottomLeft: { x: imageWidth - rectangle.bottomRight.x, y: rectangle.bottomRight.y },
+    bottomRight: { x: imageWidth - rectangle.bottomLeft.x, y: rectangle.bottomLeft.y },
+});
+const mapRectangleToView = (rectangle, imageWidth, imageHeight, viewWidth, viewHeight, density) => {
+    const viewWidthPx = viewWidth * density;
+    const viewHeightPx = viewHeight * density;
+    const scale = Math.max(viewWidthPx / imageWidth, viewHeightPx / imageHeight);
+    const scaledImageWidth = imageWidth * scale;
+    const scaledImageHeight = imageHeight * scale;
+    const offsetX = (scaledImageWidth - viewWidthPx) / 2;
+    const offsetY = (scaledImageHeight - viewHeightPx) / 2;
+    const mapPoint = (point) => ({
+        x: (point.x * scale - offsetX) / density,
+        y: (point.y * scale - offsetY) / density,
+    });
+    return {
+        topLeft: mapPoint(rectangle.topLeft),
+        topRight: mapPoint(rectangle.topRight),
+        bottomRight: mapPoint(rectangle.bottomRight),
+        bottomLeft: mapPoint(rectangle.bottomLeft),
+    };
+};
+const VisionCameraScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAULT_OVERLAY_COLOR, autoCapture = true, minStableFrames = 8, enableTorch = false, quality = 90, useBase64 = false, children, showGrid = true, gridColor, gridLineWidth, detectionConfig, onRectangleDetect, showManualCaptureButton = false, }, ref) => {
+    const cameraRef = (0, react_1.useRef)(null);
+    const captureResolvers = (0, react_1.useRef)(null);
+    const captureOriginRef = (0, react_1.useRef)('auto');
+    const captureInProgressRef = (0, react_1.useRef)(false);
+    const stableCounterRef = (0, react_1.useRef)(0);
+    const lastDetectionTimestampRef = (0, react_1.useRef)(0);
+    const lastRectangleRef = (0, react_1.useRef)(null);
+    const lastImageSizeRef = (0, react_1.useRef)(null);
+    const rectangleClearTimeoutRef = (0, react_1.useRef)(null);
+    const [isAutoCapturing, setIsAutoCapturing] = (0, react_1.useState)(false);
+    const [detectedRectangle, setDetectedRectangle] = (0, react_1.useState)(null);
+    const [viewSize, setViewSize] = (0, react_1.useState)({ width: 0, height: 0 });
+    const [hasPermission, setHasPermission] = (0, react_1.useState)(false);
+    const normalizedQuality = (0, react_1.useMemo)(() => Math.min(100, Math.max(0, quality)), [quality]);
+    const density = react_native_1.PixelRatio.get() || 1;
+    const CameraComponent = visionCameraModule?.Camera;
+    const runOnJS = reanimatedModule?.runOnJS;
+    const device = visionCameraModule.useCameraDevice('back');
+    (0, react_1.useEffect)(() => {
+        let mounted = true;
+        const requestPermission = async () => {
+            try {
+                if (!CameraComponent?.requestCameraPermission) {
+                    if (mounted) {
+                        setHasPermission(true);
+                    }
+                    return;
+                }
+                const status = await CameraComponent.requestCameraPermission();
+                if (mounted) {
+                    setHasPermission(status === 'authorized');
+                }
+            }
+            catch (error) {
+                if (mounted) {
+                    setHasPermission(false);
+                }
+            }
+        };
+        requestPermission();
+        return () => {
+            mounted = false;
+        };
+    }, [CameraComponent]);
+    (0, react_1.useEffect)(() => {
+        if (!autoCapture) {
+            setIsAutoCapturing(false);
+        }
+    }, [autoCapture]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (rectangleClearTimeoutRef.current) {
+                clearTimeout(rectangleClearTimeoutRef.current);
+            }
+        };
+    }, []);
+    const handlePictureTaken = (0, react_1.useCallback)((event) => {
+        const captureError = event?.error;
+        if (captureError) {
+            console.error('[DocScanner] Native capture error received:', captureError);
+            captureOriginRef.current = 'auto';
+            setIsAutoCapturing(false);
+            setDetectedRectangle(null);
+            if (captureResolvers.current) {
+                captureResolvers.current.reject(new Error(String(captureError)));
+                captureResolvers.current = null;
+            }
+            return;
+        }
+        setIsAutoCapturing(false);
+        const normalizedRectangle = normalizeRectangle(event.rectangleCoordinates ?? null) ??
+            normalizeRectangle(event.rectangleOnScreen ?? null) ??
+            lastRectangleRef.current;
+        const quad = normalizedRectangle ? (0, coordinate_1.rectangleToQuad)(normalizedRectangle) : null;
+        const origin = captureOriginRef.current;
+        captureOriginRef.current = 'auto';
+        const initialPath = event.initialImage ?? null;
+        const croppedPath = event.croppedImage ?? null;
+        const editablePath = initialPath ?? croppedPath;
+        if (editablePath) {
+            onCapture?.({
+                path: editablePath,
+                initialPath,
+                croppedPath,
+                quad,
+                rectangle: normalizedRectangle,
+                width: event.width ?? 0,
+                height: event.height ?? 0,
+                origin,
+            });
+        }
+        setDetectedRectangle(null);
+        if (captureResolvers.current) {
+            captureResolvers.current.resolve(event);
+            captureResolvers.current = null;
+        }
+    }, [onCapture]);
+    const handleError = (0, react_1.useCallback)((error) => {
+        if (captureResolvers.current) {
+            captureResolvers.current.reject(error);
+            captureResolvers.current = null;
+        }
+    }, []);
+    const applyRectangleEvent = (0, react_1.useCallback)((payload) => {
+        if (autoCapture) {
+            if (payload.stableCounter >= Math.max(minStableFrames - 1, 0)) {
+                setIsAutoCapturing(true);
+            }
+            else if (payload.stableCounter === 0) {
+                setIsAutoCapturing(false);
+            }
+        }
+        const hasAnyRectangle = Boolean(payload.rectangleOnScreen || payload.rectangleCoordinates);
+        if (hasAnyRectangle) {
+            if (rectangleClearTimeoutRef.current) {
+                clearTimeout(rectangleClearTimeoutRef.current);
+            }
+            setDetectedRectangle(payload);
+            rectangleClearTimeoutRef.current = setTimeout(() => {
+                setDetectedRectangle(null);
+                rectangleClearTimeoutRef.current = null;
+            }, 500);
+        }
+        else {
+            if (rectangleClearTimeoutRef.current) {
+                clearTimeout(rectangleClearTimeoutRef.current);
+                rectangleClearTimeoutRef.current = null;
+            }
+            setDetectedRectangle(null);
+        }
+        onRectangleDetect?.(payload);
+    }, [autoCapture, minStableFrames, onRectangleDetect]);
+    const captureVision = (0, react_1.useCallback)(async (origin) => {
+        if (captureInProgressRef.current) {
+            throw new Error('capture_in_progress');
+        }
+        if (!cameraRef.current?.takePhoto) {
+            throw new Error('capture_not_supported');
+        }
+        if (!RNPdfScannerManager?.processImage) {
+            throw new Error('process_image_not_supported');
+        }
+        captureInProgressRef.current = true;
+        captureOriginRef.current = origin;
+        try {
+            const photo = await cameraRef.current.takePhoto({ flash: 'off' });
+            const imageSize = lastImageSizeRef.current;
+            const payload = await RNPdfScannerManager.processImage({
+                imagePath: photo.path,
+                rectangleCoordinates: lastRectangleRef.current,
+                rectangleWidth: imageSize?.width ?? 0,
+                rectangleHeight: imageSize?.height ?? 0,
+                useBase64,
+                quality: normalizedQuality,
+                brightness: 0,
+                contrast: 1,
+                saturation: 1,
+                saveInAppDocument: false,
+            });
+            handlePictureTaken(payload);
+            return payload;
+        }
+        catch (error) {
+            handleError(error);
+            throw error;
+        }
+        finally {
+            captureInProgressRef.current = false;
+        }
+    }, [handleError, handlePictureTaken, normalizedQuality, useBase64]);
+    const capture = (0, react_1.useCallback)(() => {
+        captureOriginRef.current = 'manual';
+        if (captureResolvers.current) {
+            captureOriginRef.current = 'auto';
+            return Promise.reject(new Error('capture_in_progress'));
+        }
+        return new Promise((resolve, reject) => {
+            captureResolvers.current = { resolve, reject };
+            captureVision('manual').catch((error) => {
+                captureResolvers.current = null;
+                captureOriginRef.current = 'auto';
+                reject(error);
+            });
+        });
+    }, [captureVision]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        capture,
+        reset: () => {
+            if (captureResolvers.current) {
+                captureResolvers.current.reject(new Error('reset'));
+                captureResolvers.current = null;
+            }
+            if (rectangleClearTimeoutRef.current) {
+                clearTimeout(rectangleClearTimeoutRef.current);
+                rectangleClearTimeoutRef.current = null;
+            }
+            lastRectangleRef.current = null;
+            lastImageSizeRef.current = null;
+            stableCounterRef.current = 0;
+            setDetectedRectangle(null);
+            setIsAutoCapturing(false);
+            captureOriginRef.current = 'auto';
+        },
+    }), [capture]);
+    const handleVisionResult = (0, react_1.useCallback)((result) => {
+        const now = Date.now();
+        if (now - lastDetectionTimestampRef.current < 100) {
+            return;
+        }
+        lastDetectionTimestampRef.current = now;
+        const imageWidth = Number(result?.imageWidth) || 0;
+        const imageHeight = Number(result?.imageHeight) || 0;
+        const isMirrored = Boolean(result?.isMirrored);
+        let rectangleCoordinates = normalizeRectangle(result?.rectangle ?? null);
+        if (rectangleCoordinates && isMirrored && imageWidth) {
+            rectangleCoordinates = mirrorRectangleHorizontally(rectangleCoordinates, imageWidth);
+        }
+        const rectangleOnScreen = rectangleCoordinates && viewSize.width && viewSize.height && imageWidth && imageHeight
+            ? mapRectangleToView(rectangleCoordinates, imageWidth, imageHeight, viewSize.width, viewSize.height, density)
+            : null;
+        const quality = rectangleOnScreen
+            ? evaluateRectangleQualityInView(rectangleOnScreen, viewSize.width, viewSize.height)
+            : RectangleQuality.TOO_FAR;
+        if (!rectangleCoordinates) {
+            stableCounterRef.current = 0;
+        }
+        else if (quality === RectangleQuality.GOOD) {
+            const cap = autoCapture ? minStableFrames : 99999;
+            stableCounterRef.current = Math.min(stableCounterRef.current + 1, cap);
+        }
+        else if (stableCounterRef.current > 0) {
+            stableCounterRef.current -= 1;
+        }
+        if (rectangleCoordinates) {
+            lastRectangleRef.current = rectangleCoordinates;
+            if (imageWidth && imageHeight) {
+                lastImageSizeRef.current = { width: imageWidth, height: imageHeight };
+            }
+        }
+        const payload = {
+            stableCounter: stableCounterRef.current,
+            lastDetectionType: quality,
+            rectangleCoordinates,
+            rectangleOnScreen,
+            previewSize: viewSize.width && viewSize.height ? { width: viewSize.width, height: viewSize.height } : undefined,
+            imageSize: imageWidth && imageHeight ? { width: imageWidth, height: imageHeight } : undefined,
+        };
+        applyRectangleEvent(payload);
+        if (autoCapture &&
+            rectangleCoordinates &&
+            stableCounterRef.current >= minStableFrames &&
+            !captureInProgressRef.current) {
+            stableCounterRef.current = 0;
+            captureVision('auto').catch(() => { });
+        }
+    }, [applyRectangleEvent, autoCapture, captureVision, density, minStableFrames, viewSize]);
+    const plugin = (0, react_1.useMemo)(() => {
+        if (!visionCameraModule?.VisionCameraProxy?.initFrameProcessorPlugin) {
+            return null;
+        }
+        return visionCameraModule.VisionCameraProxy.initFrameProcessorPlugin('DocumentScanner', detectionConfig ?? {});
+    }, [detectionConfig]);
+    const frameProcessor = visionCameraModule.useFrameProcessor((frame) => {
+        'worklet';
+        if (!plugin || !runOnJS) {
+            return;
+        }
+        const output = plugin.call(frame, null);
+        runOnJS(handleVisionResult)(output ?? null);
+    }, [plugin, runOnJS, handleVisionResult]);
+    const handleLayout = (0, react_1.useCallback)((event) => {
+        const { width, height } = event.nativeEvent.layout;
+        if (width && height) {
+            setViewSize({ width, height });
+        }
+    }, []);
+    const overlayPolygon = detectedRectangle?.rectangleOnScreen ?? null;
+    const overlayIsActive = autoCapture ? isAutoCapturing : (detectedRectangle?.stableCounter ?? 0) > 0;
+    return (react_1.default.createElement(react_native_1.View, { style: styles.container, onLayout: handleLayout },
+        CameraComponent && device && hasPermission ? (react_1.default.createElement(CameraComponent, { ref: cameraRef, style: styles.scanner, device: device, isActive: true, photo: true, torch: enableTorch ? 'on' : 'off', frameProcessor: frameProcessor, frameProcessorFps: 10 })) : (react_1.default.createElement(react_native_1.View, { style: styles.scanner })),
+        showGrid && overlayPolygon && (react_1.default.createElement(overlay_1.ScannerOverlay, { active: overlayIsActive, color: gridColor ?? overlayColor, lineWidth: gridLineWidth, polygon: overlayPolygon })),
+        showManualCaptureButton && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.button, onPress: () => captureVision('manual') })),
+        children));
+});
 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, detectionConfig, onRectangleDetect, showManualCaptureButton = false, }, ref) => {
+    if (hasVisionCamera) {
+        return (react_1.default.createElement(VisionCameraScanner, { ref: ref, onCapture: onCapture, overlayColor: overlayColor, autoCapture: autoCapture, minStableFrames: minStableFrames, enableTorch: enableTorch, quality: quality, useBase64: useBase64, showGrid: showGrid, gridColor: gridColor, gridLineWidth: gridLineWidth, detectionConfig: detectionConfig, onRectangleDetect: onRectangleDetect, showManualCaptureButton: showManualCaptureButton }, children));
+    }
     const scannerRef = (0, react_1.useRef)(null);
     const captureResolvers = (0, react_1.useRef)(null);
     const [isAutoCapturing, setIsAutoCapturing] = (0, react_1.useState)(false);

package/package.json

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

package/src/DocScanner.tsx

@@ -10,6 +10,7 @@ import React, {
 } from 'react';
 import {
   Platform,
+  PixelRatio,
   StyleSheet,
   TouchableOpacity,
   View,
@@ -52,6 +53,21 @@ const isFiniteNumber = (value: unknown): value is number =>
 
 const { RNPdfScannerManager } = NativeModules;
 
+const safeRequire = (moduleName: string) => {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    return require(moduleName);
+  } catch {
+    return null;
+  }
+};
+
+const visionCameraModule = Platform.OS === 'android' ? safeRequire('react-native-vision-camera') : null;
+const reanimatedModule = Platform.OS === 'android' ? safeRequire('react-native-reanimated') : null;
+const hasVisionCamera =
+  Platform.OS === 'android' &&
+  Boolean(visionCameraModule?.Camera && visionCameraModule?.useCameraDevice && visionCameraModule?.useFrameProcessor);
+
 const normalizePoint = (point?: { x?: number; y?: number } | null): Point | null => {
   if (!point || !isFiniteNumber(point.x) || !isFiniteNumber(point.y)) {
     return null;
@@ -114,6 +130,487 @@ export type DocScannerHandle = {
 
 const DEFAULT_OVERLAY_COLOR = '#0b7ef4';
 
+const RectangleQuality = {
+  GOOD: 0,
+  BAD_ANGLE: 1,
+  TOO_FAR: 2,
+} as const;
+
+const evaluateRectangleQualityInView = (rectangle: Rectangle, viewWidth: number, viewHeight: number) => {
+  if (!viewWidth || !viewHeight) {
+    return RectangleQuality.TOO_FAR;
+  }
+
+  const minDim = Math.min(viewWidth, viewHeight);
+  const angleThreshold = Math.max(60, minDim * 0.08);
+  const topYDiff = Math.abs(rectangle.topRight.y - rectangle.topLeft.y);
+  const bottomYDiff = Math.abs(rectangle.bottomLeft.y - rectangle.bottomRight.y);
+  const leftXDiff = Math.abs(rectangle.topLeft.x - rectangle.bottomLeft.x);
+  const rightXDiff = Math.abs(rectangle.topRight.x - rectangle.bottomRight.x);
+
+  if (
+    topYDiff > angleThreshold ||
+    bottomYDiff > angleThreshold ||
+    leftXDiff > angleThreshold ||
+    rightXDiff > angleThreshold
+  ) {
+    return RectangleQuality.BAD_ANGLE;
+  }
+
+  const margin = Math.max(120, minDim * 0.12);
+  if (
+    rectangle.topLeft.y > margin ||
+    rectangle.topRight.y > margin ||
+    rectangle.bottomLeft.y < viewHeight - margin ||
+    rectangle.bottomRight.y < viewHeight - margin
+  ) {
+    return RectangleQuality.TOO_FAR;
+  }
+
+  return RectangleQuality.GOOD;
+};
+
+const mirrorRectangleHorizontally = (rectangle: Rectangle, imageWidth: number): Rectangle => ({
+  topLeft: { x: imageWidth - rectangle.topRight.x, y: rectangle.topRight.y },
+  topRight: { x: imageWidth - rectangle.topLeft.x, y: rectangle.topLeft.y },
+  bottomLeft: { x: imageWidth - rectangle.bottomRight.x, y: rectangle.bottomRight.y },
+  bottomRight: { x: imageWidth - rectangle.bottomLeft.x, y: rectangle.bottomLeft.y },
+});
+
+const mapRectangleToView = (
+  rectangle: Rectangle,
+  imageWidth: number,
+  imageHeight: number,
+  viewWidth: number,
+  viewHeight: number,
+  density: number,
+): Rectangle => {
+  const viewWidthPx = viewWidth * density;
+  const viewHeightPx = viewHeight * density;
+  const scale = Math.max(viewWidthPx / imageWidth, viewHeightPx / imageHeight);
+  const scaledImageWidth = imageWidth * scale;
+  const scaledImageHeight = imageHeight * scale;
+  const offsetX = (scaledImageWidth - viewWidthPx) / 2;
+  const offsetY = (scaledImageHeight - viewHeightPx) / 2;
+
+  const mapPoint = (point: Point): Point => ({
+    x: (point.x * scale - offsetX) / density,
+    y: (point.y * scale - offsetY) / density,
+  });
+
+  return {
+    topLeft: mapPoint(rectangle.topLeft),
+    topRight: mapPoint(rectangle.topRight),
+    bottomRight: mapPoint(rectangle.bottomRight),
+    bottomLeft: mapPoint(rectangle.bottomLeft),
+  };
+};
+
+const VisionCameraScanner = forwardRef<DocScannerHandle, Props>(
+  (
+    {
+      onCapture,
+      overlayColor = DEFAULT_OVERLAY_COLOR,
+      autoCapture = true,
+      minStableFrames = 8,
+      enableTorch = false,
+      quality = 90,
+      useBase64 = false,
+      children,
+      showGrid = true,
+      gridColor,
+      gridLineWidth,
+      detectionConfig,
+      onRectangleDetect,
+      showManualCaptureButton = false,
+    },
+    ref,
+  ) => {
+    const cameraRef = useRef<any>(null);
+    const captureResolvers = useRef<{
+      resolve: (value: PictureEvent) => void;
+      reject: (reason?: unknown) => void;
+    } | null>(null);
+    const captureOriginRef = useRef<'auto' | 'manual'>('auto');
+    const captureInProgressRef = useRef(false);
+    const stableCounterRef = useRef(0);
+    const lastDetectionTimestampRef = useRef(0);
+    const lastRectangleRef = useRef<Rectangle | null>(null);
+    const lastImageSizeRef = useRef<{ width: number; height: number } | null>(null);
+    const rectangleClearTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const [isAutoCapturing, setIsAutoCapturing] = useState(false);
+    const [detectedRectangle, setDetectedRectangle] = useState<RectangleDetectEvent | null>(null);
+    const [viewSize, setViewSize] = useState({ width: 0, height: 0 });
+    const [hasPermission, setHasPermission] = useState(false);
+
+    const normalizedQuality = useMemo(() => Math.min(100, Math.max(0, quality)), [quality]);
+    const density = PixelRatio.get() || 1;
+
+    const CameraComponent = visionCameraModule?.Camera;
+    const runOnJS = reanimatedModule?.runOnJS;
+
+    const device = visionCameraModule.useCameraDevice('back');
+
+    useEffect(() => {
+      let mounted = true;
+
+      const requestPermission = async () => {
+        try {
+          if (!CameraComponent?.requestCameraPermission) {
+            if (mounted) {
+              setHasPermission(true);
+            }
+            return;
+          }
+
+          const status = await CameraComponent.requestCameraPermission();
+          if (mounted) {
+            setHasPermission(status === 'authorized');
+          }
+        } catch (error) {
+          if (mounted) {
+            setHasPermission(false);
+          }
+        }
+      };
+
+      requestPermission();
+
+      return () => {
+        mounted = false;
+      };
+    }, [CameraComponent]);
+
+    useEffect(() => {
+      if (!autoCapture) {
+        setIsAutoCapturing(false);
+      }
+    }, [autoCapture]);
+
+    useEffect(() => {
+      return () => {
+        if (rectangleClearTimeoutRef.current) {
+          clearTimeout(rectangleClearTimeoutRef.current);
+        }
+      };
+    }, []);
+
+    const handlePictureTaken = useCallback(
+      (event: PictureEvent) => {
+        const captureError = (event as any)?.error;
+        if (captureError) {
+          console.error('[DocScanner] Native capture error received:', captureError);
+          captureOriginRef.current = 'auto';
+          setIsAutoCapturing(false);
+          setDetectedRectangle(null);
+
+          if (captureResolvers.current) {
+            captureResolvers.current.reject(new Error(String(captureError)));
+            captureResolvers.current = null;
+          }
+
+          return;
+        }
+
+        setIsAutoCapturing(false);
+
+        const normalizedRectangle =
+          normalizeRectangle(event.rectangleCoordinates ?? null) ??
+          normalizeRectangle(event.rectangleOnScreen ?? null) ??
+          lastRectangleRef.current;
+        const quad = normalizedRectangle ? rectangleToQuad(normalizedRectangle) : null;
+        const origin = captureOriginRef.current;
+        captureOriginRef.current = 'auto';
+
+        const initialPath = event.initialImage ?? null;
+        const croppedPath = event.croppedImage ?? null;
+        const editablePath = initialPath ?? croppedPath;
+
+        if (editablePath) {
+          onCapture?.({
+            path: editablePath,
+            initialPath,
+            croppedPath,
+            quad,
+            rectangle: normalizedRectangle,
+            width: event.width ?? 0,
+            height: event.height ?? 0,
+            origin,
+          });
+        }
+
+        setDetectedRectangle(null);
+
+        if (captureResolvers.current) {
+          captureResolvers.current.resolve(event);
+          captureResolvers.current = null;
+        }
+      },
+      [onCapture],
+    );
+
+    const handleError = useCallback((error: Error) => {
+      if (captureResolvers.current) {
+        captureResolvers.current.reject(error);
+        captureResolvers.current = null;
+      }
+    }, []);
+
+    const applyRectangleEvent = useCallback(
+      (payload: RectangleDetectEvent) => {
+        if (autoCapture) {
+          if (payload.stableCounter >= Math.max(minStableFrames - 1, 0)) {
+            setIsAutoCapturing(true);
+          } else if (payload.stableCounter === 0) {
+            setIsAutoCapturing(false);
+          }
+        }
+
+        const hasAnyRectangle = Boolean(payload.rectangleOnScreen || payload.rectangleCoordinates);
+
+        if (hasAnyRectangle) {
+          if (rectangleClearTimeoutRef.current) {
+            clearTimeout(rectangleClearTimeoutRef.current);
+          }
+          setDetectedRectangle(payload);
+          rectangleClearTimeoutRef.current = setTimeout(() => {
+            setDetectedRectangle(null);
+            rectangleClearTimeoutRef.current = null;
+          }, 500);
+        } else {
+          if (rectangleClearTimeoutRef.current) {
+            clearTimeout(rectangleClearTimeoutRef.current);
+            rectangleClearTimeoutRef.current = null;
+          }
+          setDetectedRectangle(null);
+        }
+
+        onRectangleDetect?.(payload);
+      },
+      [autoCapture, minStableFrames, onRectangleDetect],
+    );
+
+    const captureVision = useCallback(
+      async (origin: 'auto' | 'manual') => {
+        if (captureInProgressRef.current) {
+          throw new Error('capture_in_progress');
+        }
+
+        if (!cameraRef.current?.takePhoto) {
+          throw new Error('capture_not_supported');
+        }
+
+        if (!RNPdfScannerManager?.processImage) {
+          throw new Error('process_image_not_supported');
+        }
+
+        captureInProgressRef.current = true;
+        captureOriginRef.current = origin;
+
+        try {
+          const photo = await cameraRef.current.takePhoto({ flash: 'off' });
+          const imageSize = lastImageSizeRef.current;
+          const payload = await RNPdfScannerManager.processImage({
+            imagePath: photo.path,
+            rectangleCoordinates: lastRectangleRef.current,
+            rectangleWidth: imageSize?.width ?? 0,
+            rectangleHeight: imageSize?.height ?? 0,
+            useBase64,
+            quality: normalizedQuality,
+            brightness: 0,
+            contrast: 1,
+            saturation: 1,
+            saveInAppDocument: false,
+          });
+          handlePictureTaken(payload);
+          return payload;
+        } catch (error) {
+          handleError(error as Error);
+          throw error;
+        } finally {
+          captureInProgressRef.current = false;
+        }
+      },
+      [handleError, handlePictureTaken, normalizedQuality, useBase64],
+    );
+
+    const capture = useCallback((): Promise<PictureEvent> => {
+      captureOriginRef.current = 'manual';
+
+      if (captureResolvers.current) {
+        captureOriginRef.current = 'auto';
+        return Promise.reject(new Error('capture_in_progress'));
+      }
+
+      return new Promise<PictureEvent>((resolve, reject) => {
+        captureResolvers.current = { resolve, reject };
+        captureVision('manual').catch((error) => {
+          captureResolvers.current = null;
+          captureOriginRef.current = 'auto';
+          reject(error);
+        });
+      });
+    }, [captureVision]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        capture,
+        reset: () => {
+          if (captureResolvers.current) {
+            captureResolvers.current.reject(new Error('reset'));
+            captureResolvers.current = null;
+          }
+
+          if (rectangleClearTimeoutRef.current) {
+            clearTimeout(rectangleClearTimeoutRef.current);
+            rectangleClearTimeoutRef.current = null;
+          }
+
+          lastRectangleRef.current = null;
+          lastImageSizeRef.current = null;
+          stableCounterRef.current = 0;
+          setDetectedRectangle(null);
+          setIsAutoCapturing(false);
+          captureOriginRef.current = 'auto';
+        },
+      }),
+      [capture],
+    );
+
+    const handleVisionResult = useCallback(
+      (result: any) => {
+        const now = Date.now();
+        if (now - lastDetectionTimestampRef.current < 100) {
+          return;
+        }
+        lastDetectionTimestampRef.current = now;
+
+        const imageWidth = Number(result?.imageWidth) || 0;
+        const imageHeight = Number(result?.imageHeight) || 0;
+        const isMirrored = Boolean(result?.isMirrored);
+
+        let rectangleCoordinates = normalizeRectangle(result?.rectangle ?? null);
+        if (rectangleCoordinates && isMirrored && imageWidth) {
+          rectangleCoordinates = mirrorRectangleHorizontally(rectangleCoordinates, imageWidth);
+        }
+
+        const rectangleOnScreen =
+          rectangleCoordinates && viewSize.width && viewSize.height && imageWidth && imageHeight
+            ? mapRectangleToView(
+                rectangleCoordinates,
+                imageWidth,
+                imageHeight,
+                viewSize.width,
+                viewSize.height,
+                density,
+              )
+            : null;
+
+        const quality = rectangleOnScreen
+          ? evaluateRectangleQualityInView(rectangleOnScreen, viewSize.width, viewSize.height)
+          : RectangleQuality.TOO_FAR;
+
+        if (!rectangleCoordinates) {
+          stableCounterRef.current = 0;
+        } else if (quality === RectangleQuality.GOOD) {
+          const cap = autoCapture ? minStableFrames : 99999;
+          stableCounterRef.current = Math.min(stableCounterRef.current + 1, cap);
+        } else if (stableCounterRef.current > 0) {
+          stableCounterRef.current -= 1;
+        }
+
+        if (rectangleCoordinates) {
+          lastRectangleRef.current = rectangleCoordinates;
+          if (imageWidth && imageHeight) {
+            lastImageSizeRef.current = { width: imageWidth, height: imageHeight };
+          }
+        }
+
+        const payload: RectangleDetectEvent = {
+          stableCounter: stableCounterRef.current,
+          lastDetectionType: quality,
+          rectangleCoordinates,
+          rectangleOnScreen,
+          previewSize: viewSize.width && viewSize.height ? { width: viewSize.width, height: viewSize.height } : undefined,
+          imageSize: imageWidth && imageHeight ? { width: imageWidth, height: imageHeight } : undefined,
+        };
+
+        applyRectangleEvent(payload);
+
+        if (
+          autoCapture &&
+          rectangleCoordinates &&
+          stableCounterRef.current >= minStableFrames &&
+          !captureInProgressRef.current
+        ) {
+          stableCounterRef.current = 0;
+          captureVision('auto').catch(() => {});
+        }
+      },
+      [applyRectangleEvent, autoCapture, captureVision, density, minStableFrames, viewSize],
+    );
+
+    const plugin = useMemo(() => {
+      if (!visionCameraModule?.VisionCameraProxy?.initFrameProcessorPlugin) {
+        return null;
+      }
+      return visionCameraModule.VisionCameraProxy.initFrameProcessorPlugin('DocumentScanner', detectionConfig ?? {});
+    }, [detectionConfig]);
+
+    const frameProcessor = visionCameraModule.useFrameProcessor((frame: any) => {
+      'worklet';
+      if (!plugin || !runOnJS) {
+        return;
+      }
+      const output = plugin.call(frame, null);
+      runOnJS(handleVisionResult)(output ?? null);
+    }, [plugin, runOnJS, handleVisionResult]);
+
+    const handleLayout = useCallback((event: any) => {
+      const { width, height } = event.nativeEvent.layout;
+      if (width && height) {
+        setViewSize({ width, height });
+      }
+    }, []);
+
+    const overlayPolygon = detectedRectangle?.rectangleOnScreen ?? null;
+    const overlayIsActive = autoCapture ? isAutoCapturing : (detectedRectangle?.stableCounter ?? 0) > 0;
+
+    return (
+      <View style={styles.container} onLayout={handleLayout}>
+        {CameraComponent && device && hasPermission ? (
+          <CameraComponent
+            ref={cameraRef}
+            style={styles.scanner}
+            device={device}
+            isActive={true}
+            photo={true}
+            torch={enableTorch ? 'on' : 'off'}
+            frameProcessor={frameProcessor}
+            frameProcessorFps={10}
+          />
+        ) : (
+          <View style={styles.scanner} />
+        )}
+        {showGrid && overlayPolygon && (
+          <ScannerOverlay
+            active={overlayIsActive}
+            color={gridColor ?? overlayColor}
+            lineWidth={gridLineWidth}
+            polygon={overlayPolygon}
+          />
+        )}
+        {showManualCaptureButton && (
+          <TouchableOpacity style={styles.button} onPress={() => captureVision('manual')} />
+        )}
+        {children}
+      </View>
+    );
+  },
+);
+
 export const DocScanner = forwardRef<DocScannerHandle, Props>(
   (
     {
@@ -134,6 +631,29 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
     },
     ref,
   ) => {
+    if (hasVisionCamera) {
+      return (
+        <VisionCameraScanner
+          ref={ref}
+          onCapture={onCapture}
+          overlayColor={overlayColor}
+          autoCapture={autoCapture}
+          minStableFrames={minStableFrames}
+          enableTorch={enableTorch}
+          quality={quality}
+          useBase64={useBase64}
+          showGrid={showGrid}
+          gridColor={gridColor}
+          gridLineWidth={gridLineWidth}
+          detectionConfig={detectionConfig}
+          onRectangleDetect={onRectangleDetect}
+          showManualCaptureButton={showManualCaptureButton}
+        >
+          {children}
+        </VisionCameraScanner>
+      );
+    }
+
     const scannerRef = useRef<any>(null);
     const captureResolvers = useRef<{
       resolve: (value: PictureEvent) => void;