react-native-rectangle-doc-scanner 11.0.0 → 11.2.0

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

@@ -118,11 +118,11 @@ class CameraController(
         Log.d(TAG, "[CAMERAX] TextureView visibility: ${textureView.visibility}")
         Log.d(TAG, "[CAMERAX] TextureView isAvailable: ${textureView.isAvailable}")
 
-        val targetRotation = textureView.display?.rotation ?: android.view.Surface.ROTATION_0
-        Log.d(TAG, "[CAMERAX] Setting target rotation to $targetRotation")
+        // Force portrait orientation (app is portrait-only)
+        val targetRotation = android.view.Surface.ROTATION_0
+        Log.d(TAG, "[CAMERAX] Setting target rotation to ROTATION_0 (portrait-only app)")
 
         preview = Preview.Builder()
-            .setTargetAspectRatio(AspectRatio.RATIO_4_3)
             .setTargetRotation(targetRotation)  // Force portrait
             .build()
             .also { previewUseCase ->
@@ -185,7 +185,7 @@ class CameraController(
         // ImageAnalysis UseCase for document detection
         imageAnalyzer = ImageAnalysis.Builder()
             .setBackpressureStrategy(ImageAnalysis.STRATEGY_KEEP_ONLY_LATEST)
-            .setTargetAspectRatio(AspectRatio.RATIO_4_3)
+            .setTargetResolution(android.util.Size(1920, 1440))  // Higher resolution for better small-edge detection
             .setTargetRotation(targetRotation)  // Match preview rotation
             .build()
             .also {
@@ -201,7 +201,6 @@ class CameraController(
         // ImageCapture UseCase
         imageCapture = ImageCapture.Builder()
             .setCaptureMode(ImageCapture.CAPTURE_MODE_MAXIMIZE_QUALITY)
-            .setTargetAspectRatio(AspectRatio.RATIO_4_3)
             .setTargetRotation(targetRotation)  // Match preview rotation
             .build()
 
@@ -388,18 +387,30 @@ class CameraController(
         mlBox: android.graphics.Rect?
     ): Rectangle? {
         return try {
-            if (mlBox != null) {
-                val frameWidth = if (rotation == 90 || rotation == 270) height else width
-                val frameHeight = if (rotation == 90 || rotation == 270) width else height
-                val padX = (mlBox.width() * 0.25f).toInt().coerceAtLeast(32)
-                val padY = (mlBox.height() * 0.25f).toInt().coerceAtLeast(32)
-                val roi = android.graphics.Rect(
-                    (mlBox.left - padX).coerceAtLeast(0),
-                    (mlBox.top - padY).coerceAtLeast(0),
-                    (mlBox.right + padX).coerceAtMost(frameWidth),
-                    (mlBox.bottom + padY).coerceAtMost(frameHeight)
-                )
-                DocumentDetector.detectRectangleInYUVWithRoi(nv21, width, height, rotation, roi)
+            val frameWidth = if (rotation == 90 || rotation == 270) height else width
+            val frameHeight = if (rotation == 90 || rotation == 270) width else height
+            val frameArea = frameWidth.toLong() * frameHeight.toLong()
+            val roiRect = mlBox?.let { box ->
+                val boxArea = box.width().toLong() * box.height().toLong()
+                val aspect = if (box.height() > 0) box.width().toDouble() / box.height().toDouble() else 0.0
+                val isValidSize = boxArea >= (frameArea * 0.08)
+                val isValidAspect = aspect in 0.4..2.5
+                if (!isValidSize || !isValidAspect) {
+                    null
+                } else {
+                    val padX = (box.width() * 0.25f).toInt().coerceAtLeast(32)
+                    val padY = (box.height() * 0.25f).toInt().coerceAtLeast(32)
+                    android.graphics.Rect(
+                        (box.left - padX).coerceAtLeast(0),
+                        (box.top - padY).coerceAtLeast(0),
+                        (box.right + padX).coerceAtMost(frameWidth),
+                        (box.bottom + padY).coerceAtMost(frameHeight)
+                    )
+                }
+            }
+
+            if (roiRect != null) {
+                DocumentDetector.detectRectangleInYUVWithRoi(nv21, width, height, rotation, roiRect)
                     ?: DocumentDetector.detectRectangleInYUV(nv21, width, height, rotation)
             } else {
                 DocumentDetector.detectRectangleInYUV(nv21, width, height, rotation)
@@ -474,14 +485,35 @@ class CameraController(
 
         if (viewWidth <= 0 || viewHeight <= 0) return null
 
-        // Image coordinates are already in display orientation (rotation applied before detection).
-        val finalWidth = imageWidth
-        val finalHeight = imageHeight
+        // The image coordinates are in camera sensor space. We need to transform them
+        // to match how the TextureView displays the image (after rotation/scaling).
+        val sensorOrientation = getCameraSensorOrientation()
+        val displayRotationDegrees = when (textureView.display?.rotation ?: Surface.ROTATION_0) {
+            Surface.ROTATION_0 -> 0
+            Surface.ROTATION_90 -> 90
+            Surface.ROTATION_180 -> 180
+            Surface.ROTATION_270 -> 270
+            else -> 0
+        }
 
-        // Apply the same center-crop scaling as the TextureView transform.
+        fun rotatePoint(point: org.opencv.core.Point): org.opencv.core.Point {
+            return if (sensorOrientation == 90) {
+                org.opencv.core.Point(
+                    point.y,
+                    imageWidth - point.x
+                )
+            } else {
+                point
+            }
+        }
+
+        val finalWidth = if (sensorOrientation == 90) imageHeight else imageWidth
+        val finalHeight = if (sensorOrientation == 90) imageWidth else imageHeight
+
+        // Then apply fit-center scaling
         val scaleX = viewWidth / finalWidth.toFloat()
         val scaleY = viewHeight / finalHeight.toFloat()
-        val scale = scaleX.coerceAtLeast(scaleY)
+        val scale = scaleX.coerceAtMost(scaleY)
 
         val scaledWidth = finalWidth * scale
         val scaledHeight = finalHeight * scale
@@ -489,9 +521,10 @@ class CameraController(
         val offsetY = (viewHeight - scaledHeight) / 2f
 
         fun transformPoint(point: org.opencv.core.Point): org.opencv.core.Point {
+            val rotated = rotatePoint(point)
             return org.opencv.core.Point(
-                point.x * scale + offsetX,
-                point.y * scale + offsetY
+                rotated.x * scale + offsetX,
+                rotated.y * scale + offsetY
             )
         }
 
@@ -502,9 +535,10 @@ class CameraController(
             transformPoint(rectangle.bottomRight)
         )
 
-        Log.d(TAG, "[MAPPING] Image: ${imageWidth}x${imageHeight} → View: ${viewWidth.toInt()}x${viewHeight.toInt()}")
-        Log.d(TAG, "[MAPPING] Scale: $scale, Offset: ($offsetX, $offsetY)")
+        Log.d(TAG, "[MAPPING] Sensor: ${sensorOrientation}°, Image: ${imageWidth}x${imageHeight} → Final: ${finalWidth}x${finalHeight}")
+        Log.d(TAG, "[MAPPING] View: ${viewWidth.toInt()}x${viewHeight.toInt()}, Scale: $scale, Offset: ($offsetX, $offsetY)")
         Log.d(TAG, "[MAPPING] TL: (${rectangle.topLeft.x}, ${rectangle.topLeft.y}) → " +
+            "Rotated: (${rotatePoint(rectangle.topLeft).x}, ${rotatePoint(rectangle.topLeft).y}) → " +
             "Final: (${result.topLeft.x}, ${result.topLeft.y})")
 
         return result
@@ -545,13 +579,17 @@ class CameraController(
         val centerX = viewWidth / 2f
         val centerY = viewHeight / 2f
 
-        val rotationDegrees = ((sensorOrientation + displayRotationDegrees) % 360).toFloat()
+        // Calculate rotation from buffer to display coordinates.
+        // CameraX accounts for sensor orientation via targetRotation. Some tablets with landscape
+        // sensors report Display 90 in portrait but render upside down; add a 180° fix for that case.
+        val tabletUpsideDownFix = if (sensorOrientation == 0 && displayRotationDegrees == 90) 180 else 0
+        val rotationDegrees = ((displayRotationDegrees + tabletUpsideDownFix) % 360).toFloat()
 
         if (rotationDegrees != 0f) {
-            Log.d(TAG, "[TRANSFORM] Applying rotation: ${rotationDegrees}°")
             matrix.postRotate(rotationDegrees, centerX, centerY)
         }
 
+        // After rotation, determine effective buffer size
         val rotatedBufferWidth = if (rotationDegrees == 90f || rotationDegrees == 270f) {
             bufferHeight
         } else {
@@ -563,17 +601,26 @@ class CameraController(
             bufferHeight
         }
 
-        // Scale to fill the view while maintaining aspect ratio (center-crop).
+        // Scale to fit within the view while maintaining aspect ratio (no zoom/crop)
         val scaleX = viewWidth.toFloat() / rotatedBufferWidth.toFloat()
         val scaleY = viewHeight.toFloat() / rotatedBufferHeight.toFloat()
-        val scale = scaleX.coerceAtLeast(scaleY)
+        val scale = scaleX.coerceAtMost(scaleY)  // Use min to fit
 
         Log.d(TAG, "[TRANSFORM] Rotated buffer: ${rotatedBufferWidth}x${rotatedBufferHeight}, ScaleX: $scaleX, ScaleY: $scaleY, Using: $scale")
 
         matrix.postScale(scale, scale, centerX, centerY)
 
-        // With center-crop, the preview fills the view bounds.
-        previewViewport = android.graphics.RectF(0f, 0f, viewWidth.toFloat(), viewHeight.toFloat())
+        // Track the actual preview viewport within the view for clipping overlays.
+        val scaledWidth = rotatedBufferWidth * scale
+        val scaledHeight = rotatedBufferHeight * scale
+        val offsetX = (viewWidth - scaledWidth) / 2f
+        val offsetY = (viewHeight - scaledHeight) / 2f
+        previewViewport = android.graphics.RectF(
+            offsetX,
+            offsetY,
+            offsetX + scaledWidth,
+            offsetY + scaledHeight
+        )
 
         textureView.setTransform(matrix)
         Log.d(TAG, "[TRANSFORM] Transform applied successfully")

package/android/src/camera2/kotlin/com/reactnativerectangledocscanner/DocumentScannerView.kt

@@ -746,7 +746,7 @@ class DocumentScannerView(context: ThemedReactContext) : FrameLayout(context), L
         if (viewWidth == 0 || viewHeight == 0 || imageWidth == 0 || imageHeight == 0) {
             return rectangle
         }
-        val scale = max(
+        val scale = min(
             viewWidth.toDouble() / imageWidth.toDouble(),
             viewHeight.toDouble() / imageHeight.toDouble()
         )

package/android/src/common/kotlin/com/reactnativerectangledocscanner/DocumentDetector.kt

@@ -589,7 +589,7 @@ class DocumentDetector {
                 return rectangle
             }
 
-            val scale = max(
+            val scale = min(
                 viewWidth.toDouble() / imageWidth.toDouble(),
                 viewHeight.toDouble() / imageHeight.toDouble()
             )
@@ -602,7 +602,10 @@ class DocumentDetector {
             fun mapPoint(point: Point): Point {
                 val x = (point.x * scale) + offsetX
                 val y = (point.y * scale) + offsetY
-                return Point(x, y)
+                return Point(
+                    x.coerceIn(0.0, viewWidth.toDouble()),
+                    y.coerceIn(0.0, viewHeight.toDouble())
+                )
             }
 
             return Rectangle(

package/dist/DocScanner.js

@@ -121,14 +121,24 @@ const mirrorRectangleHorizontally = (rectangle, imageWidth) => ({
 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 scale = react_native_1.Platform.OS === 'ios'
+        ? Math.max(viewWidthPx / imageWidth, viewHeightPx / imageHeight)
+        : Math.min(viewWidthPx / imageWidth, viewHeightPx / imageHeight);
     const scaledImageWidth = imageWidth * scale;
     const scaledImageHeight = imageHeight * scale;
-    const offsetX = (scaledImageWidth - viewWidthPx) / 2;
-    const offsetY = (scaledImageHeight - viewHeightPx) / 2;
+    const offsetX = react_native_1.Platform.OS === 'ios'
+        ? (scaledImageWidth - viewWidthPx) / 2
+        : (viewWidthPx - scaledImageWidth) / 2;
+    const offsetY = react_native_1.Platform.OS === 'ios'
+        ? (scaledImageHeight - viewHeightPx) / 2
+        : (viewHeightPx - scaledImageHeight) / 2;
     const mapPoint = (point) => ({
-        x: (point.x * scale - offsetX) / density,
-        y: (point.y * scale - offsetY) / density,
+        x: react_native_1.Platform.OS === 'ios'
+            ? (point.x * scale - offsetX) / density
+            : (point.x * scale + offsetX) / density,
+        y: react_native_1.Platform.OS === 'ios'
+            ? (point.y * scale - offsetY) / density
+            : (point.y * scale + offsetY) / density,
     });
     return {
         topLeft: mapPoint(rectangle.topLeft),
@@ -418,7 +428,7 @@ const VisionCameraScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor =
     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, clipRect: detectedRectangle?.previewViewport ?? null })),
+        showGrid && overlayPolygon && (react_1.default.createElement(overlay_1.ScannerOverlay, { active: overlayIsActive, color: gridColor ?? overlayColor, lineWidth: gridLineWidth, polygon: overlayPolygon, clipRect: react_native_1.Platform.OS === 'android' ? null : (detectedRectangle?.previewViewport ?? null) })),
         showManualCaptureButton && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.button, onPress: () => captureVision('manual') })),
         children));
 });
@@ -630,6 +640,7 @@ const NativeScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAU
         let rectangleOnScreen = normalizeRectangle(event.rectangleOnScreen ?? null);
         const density = react_native_1.PixelRatio.get();
         if (react_native_1.Platform.OS === 'android' &&
+            !rectangleOnScreen &&
             rectangleCoordinates &&
             event.imageSize &&
             event.previewSize &&
@@ -705,7 +716,7 @@ const NativeScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAU
     const detectionThreshold = autoCapture ? minStableFrames : 99999;
     return (react_1.default.createElement(react_native_1.View, { style: styles.container },
         react_1.default.createElement(react_native_document_scanner_1.default, { ref: scannerRef, style: styles.scanner, detectionCountBeforeCapture: detectionThreshold, overlayColor: overlayColor, enableTorch: enableTorch, quality: normalizedQuality, useBase64: useBase64, manualOnly: false, detectionConfig: detectionConfig, onPictureTaken: handlePictureTaken, onError: handleError, onRectangleDetect: handleRectangleDetect }),
-        showGrid && overlayPolygon && (react_1.default.createElement(overlay_1.ScannerOverlay, { active: overlayIsActive, color: gridColor ?? overlayColor, lineWidth: gridLineWidth, polygon: overlayPolygon, clipRect: detectedRectangle?.previewViewport ?? null })),
+        showGrid && overlayPolygon && (react_1.default.createElement(overlay_1.ScannerOverlay, { active: overlayIsActive, color: gridColor ?? overlayColor, lineWidth: gridLineWidth, polygon: overlayPolygon, clipRect: react_native_1.Platform.OS === 'android' ? null : (detectedRectangle?.previewViewport ?? null) })),
         showManualCaptureButton && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.button, onPress: handleManualCapture })),
         children));
 });

package/package.json

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

package/src/DocScanner.tsx

@@ -188,15 +188,30 @@ const mapRectangleToView = (
 ): Rectangle => {
   const viewWidthPx = viewWidth * density;
   const viewHeightPx = viewHeight * density;
-  const scale = Math.max(viewWidthPx / imageWidth, viewHeightPx / imageHeight);
+  const scale =
+    Platform.OS === 'ios'
+      ? Math.max(viewWidthPx / imageWidth, viewHeightPx / imageHeight)
+      : Math.min(viewWidthPx / imageWidth, viewHeightPx / imageHeight);
   const scaledImageWidth = imageWidth * scale;
   const scaledImageHeight = imageHeight * scale;
-  const offsetX = (scaledImageWidth - viewWidthPx) / 2;
-  const offsetY = (scaledImageHeight - viewHeightPx) / 2;
+  const offsetX =
+    Platform.OS === 'ios'
+      ? (scaledImageWidth - viewWidthPx) / 2
+      : (viewWidthPx - scaledImageWidth) / 2;
+  const offsetY =
+    Platform.OS === 'ios'
+      ? (scaledImageHeight - viewHeightPx) / 2
+      : (viewHeightPx - scaledImageHeight) / 2;
 
   const mapPoint = (point: Point): Point => ({
-    x: (point.x * scale - offsetX) / density,
-    y: (point.y * scale - offsetY) / density,
+    x:
+      Platform.OS === 'ios'
+        ? (point.x * scale - offsetX) / density
+        : (point.x * scale + offsetX) / density,
+    y:
+      Platform.OS === 'ios'
+        ? (point.y * scale - offsetY) / density
+        : (point.y * scale + offsetY) / density,
   });
 
   return {
@@ -601,7 +616,7 @@ const VisionCameraScanner = forwardRef<DocScannerHandle, Props>(
             color={gridColor ?? overlayColor}
             lineWidth={gridLineWidth}
             polygon={overlayPolygon}
-            clipRect={detectedRectangle?.previewViewport ?? null}
+            clipRect={Platform.OS === 'android' ? null : (detectedRectangle?.previewViewport ?? null)}
           />
         )}
         {showManualCaptureButton && (
@@ -881,6 +896,7 @@ const NativeScanner = forwardRef<DocScannerHandle, Props>(
 
         if (
           Platform.OS === 'android' &&
+          !rectangleOnScreen &&
           rectangleCoordinates &&
           event.imageSize &&
           event.previewSize &&
@@ -1002,7 +1018,7 @@ const NativeScanner = forwardRef<DocScannerHandle, Props>(
             color={gridColor ?? overlayColor}
             lineWidth={gridLineWidth}
             polygon={overlayPolygon}
-            clipRect={detectedRectangle?.previewViewport ?? null}
+            clipRect={Platform.OS === 'android' ? null : (detectedRectangle?.previewViewport ?? null)}
           />
         )}
         {showManualCaptureButton && (