react-native-rectangle-doc-scanner 3.15.0 → 3.18.0

package/dist/DocScanner.d.ts

@@ -5,6 +5,10 @@ type PictureEvent = {
     width?: number;
     height?: number;
 };
+export type RectangleDetectEvent = {
+    stableCounter: number;
+    lastDetectionType: number;
+};
 export interface DetectionConfig {
     processingWidth?: number;
     cannyLowThreshold?: number;
@@ -31,6 +35,7 @@ interface Props {
     gridColor?: string;
     gridLineWidth?: number;
     detectionConfig?: DetectionConfig;
+    onRectangleDetect?: (event: RectangleDetectEvent) => void;
 }
 type DocScannerHandle = {
     capture: () => Promise<PictureEvent>;

package/dist/DocScanner.js

@@ -40,10 +40,17 @@ exports.DocScanner = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_document_scanner_1 = __importDefault(require("react-native-document-scanner"));
+const overlay_1 = require("./utils/overlay");
 const DEFAULT_OVERLAY_COLOR = '#0b7ef4';
-exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAULT_OVERLAY_COLOR, autoCapture = true, minStableFrames = 8, enableTorch = false, quality = 90, useBase64 = false, children, showGrid = true, }, ref) => {
+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, }, ref) => {
     const scannerRef = (0, react_1.useRef)(null);
     const captureResolvers = (0, react_1.useRef)(null);
+    const [isAutoCapturing, setIsAutoCapturing] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!autoCapture) {
+            setIsAutoCapturing(false);
+        }
+    }, [autoCapture]);
     const normalizedQuality = (0, react_1.useMemo)(() => {
         if (react_native_1.Platform.OS === 'ios') {
             // iOS expects 0-1
@@ -52,6 +59,7 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
         return Math.min(100, Math.max(0, quality));
     }, [quality]);
     const handlePictureTaken = (0, react_1.useCallback)((event) => {
+        setIsAutoCapturing(false);
         const path = event.croppedImage ?? event.initialImage;
         if (path) {
             onCapture?.({
@@ -99,6 +107,17 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
             console.warn('[DocScanner] manual capture failed', error);
         });
     }, [autoCapture, capture]);
+    const handleRectangleDetect = (0, react_1.useCallback)((event) => {
+        if (autoCapture) {
+            if (event.stableCounter >= Math.max(minStableFrames - 1, 0)) {
+                setIsAutoCapturing(true);
+            }
+            else if (event.stableCounter === 0) {
+                setIsAutoCapturing(false);
+            }
+        }
+        onRectangleDetect?.(event);
+    }, [autoCapture, minStableFrames, onRectangleDetect]);
     (0, react_1.useImperativeHandle)(ref, () => ({
         capture,
         reset: () => {
@@ -109,7 +128,8 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
         },
     }), [capture]);
     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: minStableFrames, overlayColor: overlayColor, enableTorch: enableTorch, quality: normalizedQuality, useBase64: useBase64, manualOnly: !autoCapture, onPictureTaken: handlePictureTaken, onError: handleError }),
+        react_1.default.createElement(react_native_document_scanner_1.default, { ref: scannerRef, style: styles.scanner, detectionCountBeforeCapture: minStableFrames, overlayColor: overlayColor, enableTorch: enableTorch, quality: normalizedQuality, useBase64: useBase64, manualOnly: !autoCapture, detectionConfig: detectionConfig, onPictureTaken: handlePictureTaken, onError: handleError, onRectangleDetect: handleRectangleDetect }),
+        showGrid && (react_1.default.createElement(overlay_1.ScannerOverlay, { active: autoCapture && isAutoCapturing, color: gridColor ?? overlayColor, lineWidth: gridLineWidth })),
         !autoCapture && react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.button, onPress: handleManualCapture }),
         children));
 });

package/dist/utils/overlay.d.ts

@@ -1,15 +1,8 @@
 import React from 'react';
-import type { Point } from '../types';
-type OverlayProps = {
-    quad: Point[] | null;
+export interface ScannerOverlayProps {
+    /** 활성화 시 스캔 바가 움직이며 자동 촬영 중임을 표시합니다. */
+    active: boolean;
     color?: string;
-    frameSize: {
-        width: number;
-        height: number;
-    } | null;
-    showGrid?: boolean;
-    gridColor?: string;
-    gridLineWidth?: number;
-};
-export declare const Overlay: React.FC<OverlayProps>;
-export {};
+    lineWidth?: number;
+}
+export declare const ScannerOverlay: React.FC<ScannerOverlayProps>;

package/dist/utils/overlay.js

@@ -33,150 +33,106 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Overlay = void 0;
+exports.ScannerOverlay = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const react_native_skia_1 = require("@shopify/react-native-skia");
-const lerp = (start, end, t) => ({
-    x: start.x + (end.x - start.x) * t,
-    y: start.y + (end.y - start.y) * t,
-});
-const withAlpha = (value, alpha) => {
-    const hexMatch = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(value.trim());
-    if (!hexMatch) {
-        return `rgba(231, 166, 73, ${alpha})`;
-    }
-    const hex = hexMatch[1];
-    const normalize = hex.length === 3
-        ? hex.split('').map((ch) => ch + ch).join('')
-        : hex;
-    const r = parseInt(normalize.slice(0, 2), 16);
-    const g = parseInt(normalize.slice(2, 4), 16);
-    const b = parseInt(normalize.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-};
-const buildPath = (points) => {
-    const path = react_native_skia_1.Skia.Path.Make();
-    path.moveTo(points[0].x, points[0].y);
-    points.slice(1).forEach((p) => path.lineTo(p.x, p.y));
-    path.close();
-    return path;
-};
-const orderQuad = (points) => {
-    if (points.length !== 4) {
-        return points;
-    }
-    const center = points.reduce((acc, point) => ({ x: acc.x + point.x / 4, y: acc.y + point.y / 4 }), { x: 0, y: 0 });
-    const sorted = [...points].sort((a, b) => {
-        const angleA = Math.atan2(a.y - center.y, a.x - center.x);
-        const angleB = Math.atan2(b.y - center.y, b.x - center.x);
-        return angleA - angleB;
-    });
-    // Ensure the first point is the top-left (smallest y, then smallest x)
-    let startIndex = 0;
-    for (let i = 1; i < sorted.length; i += 1) {
-        const current = sorted[i];
-        const candidate = sorted[startIndex];
-        if (current.y < candidate.y || (current.y === candidate.y && current.x < candidate.x)) {
-            startIndex = i;
-        }
-    }
-    return [
-        sorted[startIndex % 4],
-        sorted[(startIndex + 1) % 4],
-        sorted[(startIndex + 2) % 4],
-        sorted[(startIndex + 3) % 4],
-    ];
-};
-const Overlay = ({ quad, color = '#e7a649', frameSize, showGrid = true, gridColor = 'rgba(231, 166, 73, 0.35)', gridLineWidth = 2, }) => {
-    const { width: screenWidth, height: screenHeight } = (0, react_native_1.useWindowDimensions)();
-    const fillColor = (0, react_1.useMemo)(() => withAlpha(color, 0.2), [color]);
-    const { outlinePath, gridPaths } = (0, react_1.useMemo)(() => {
-        let transformedQuad = null;
-        let sourceQuad = null;
-        let sourceFrameSize = frameSize;
-        if (quad && frameSize) {
-            sourceQuad = quad;
-        }
-        else {
-            // No detection yet – skip drawing
-            return { outlinePath: null, gridPaths: [] };
-        }
-        if (sourceQuad && sourceFrameSize) {
-            if (__DEV__) {
-                console.log('[Overlay] drawing quad:', sourceQuad);
-                console.log('[Overlay] color:', color);
-                console.log('[Overlay] screen dimensions:', screenWidth, 'x', screenHeight);
-                console.log('[Overlay] frame dimensions:', sourceFrameSize.width, 'x', sourceFrameSize.height);
-            }
-            const isFrameLandscape = sourceFrameSize.width > sourceFrameSize.height;
-            const isScreenPortrait = screenHeight > screenWidth;
-            const needsRotation = isFrameLandscape && isScreenPortrait;
-            if (needsRotation) {
-                const scaleX = screenWidth / sourceFrameSize.height;
-                const scaleY = screenHeight / sourceFrameSize.width;
-                transformedQuad = sourceQuad.map((p) => ({
-                    x: p.y * scaleX,
-                    y: (sourceFrameSize.width - p.x) * scaleY,
-                }));
-            }
-            else {
-                const scaleX = screenWidth / sourceFrameSize.width;
-                const scaleY = screenHeight / sourceFrameSize.height;
-                transformedQuad = sourceQuad.map((p) => ({
-                    x: p.x * scaleX,
-                    y: p.y * scaleY,
-                }));
-            }
-        }
-        if (!transformedQuad) {
-            return { outlinePath: null, gridPaths: [] };
-        }
-        const normalizedQuad = orderQuad(transformedQuad);
-        const skPath = buildPath(normalizedQuad);
-        const grid = [];
-        if (showGrid) {
-            const [topLeft, topRight, bottomRight, bottomLeft] = normalizedQuad;
-            const steps = [1 / 3, 2 / 3];
-            steps.forEach((t) => {
-                const start = lerp(topLeft, topRight, t);
-                const end = lerp(bottomLeft, bottomRight, t);
-                const verticalPath = react_native_skia_1.Skia.Path.Make();
-                verticalPath.moveTo(start.x, start.y);
-                verticalPath.lineTo(end.x, end.y);
-                grid.push(verticalPath);
-            });
-            steps.forEach((t) => {
-                const start = lerp(topLeft, bottomLeft, t);
-                const end = lerp(topRight, bottomRight, t);
-                const horizontalPath = react_native_skia_1.Skia.Path.Make();
-                horizontalPath.moveTo(start.x, start.y);
-                horizontalPath.lineTo(end.x, end.y);
-                grid.push(horizontalPath);
-            });
+const BAR_THICKNESS = 4;
+const ScannerOverlay = ({ active, color = 'rgba(255,255,255,0.8)', lineWidth = react_native_1.StyleSheet.hairlineWidth, }) => {
+    const animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const loopRef = (0, react_1.useRef)(null);
+    const [frameHeight, setFrameHeight] = (0, react_1.useState)(0);
+    const borderStyle = (0, react_1.useMemo)(() => ({
+        borderColor: color,
+        borderWidth: lineWidth,
+    }), [color, lineWidth]);
+    (0, react_1.useEffect)(() => {
+        loopRef.current?.stop();
+        if (!active || frameHeight <= 0) {
+            animatedValue.stopAnimation();
+            animatedValue.setValue(0);
+            return;
         }
-        return { outlinePath: skPath, gridPaths: grid };
-    }, [quad, screenWidth, screenHeight, frameSize, showGrid, color]);
-    if (__DEV__) {
-        console.log('[Overlay] rendering Canvas with dimensions:', screenWidth, 'x', screenHeight);
-    }
-    return (react_1.default.createElement(react_native_1.View, { style: styles.container, pointerEvents: "none" },
-        react_1.default.createElement(react_native_skia_1.Canvas, { style: { width: screenWidth, height: screenHeight } }, outlinePath && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_native_skia_1.Path, { path: outlinePath, color: color, style: "stroke", strokeWidth: 8 }),
-            react_1.default.createElement(react_native_skia_1.Path, { path: outlinePath, color: fillColor, style: "fill" }),
-            gridPaths.map((gridPath, index) => (react_1.default.createElement(react_native_skia_1.Path
-            // eslint-disable-next-line react/no-array-index-key
-            , { 
-                // eslint-disable-next-line react/no-array-index-key
-                key: `grid-${index}`, path: gridPath, color: gridColor, style: "stroke", strokeWidth: gridLineWidth }))))))));
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(animatedValue, {
+                toValue: 1,
+                duration: 1600,
+                easing: react_native_1.Easing.inOut(react_native_1.Easing.quad),
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(animatedValue, {
+                toValue: 0,
+                duration: 1600,
+                easing: react_native_1.Easing.inOut(react_native_1.Easing.quad),
+                useNativeDriver: true,
+            }),
+        ]));
+        loopRef.current = loop;
+        loop.start();
+        return () => {
+            loop.stop();
+        };
+    }, [active, animatedValue, frameHeight]);
+    const handleLayout = (event) => {
+        const { height } = event.nativeEvent.layout;
+        setFrameHeight(height);
+    };
+    const translateY = frameHeight <= BAR_THICKNESS
+        ? 0
+        : animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, frameHeight - BAR_THICKNESS],
+        });
+    return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: react_native_1.StyleSheet.absoluteFill },
+        react_1.default.createElement(react_native_1.View, { onLayout: handleLayout, style: [styles.frame, borderStyle] },
+            react_1.default.createElement(react_native_1.View, { style: [
+                    styles.horizontalLine,
+                    { top: '33%', borderBottomColor: color, borderBottomWidth: lineWidth },
+                ] }),
+            react_1.default.createElement(react_native_1.View, { style: [
+                    styles.horizontalLine,
+                    { top: '66%', borderBottomColor: color, borderBottomWidth: lineWidth },
+                ] }),
+            react_1.default.createElement(react_native_1.View, { style: [
+                    styles.verticalLine,
+                    { left: '33%', borderRightColor: color, borderRightWidth: lineWidth },
+                ] }),
+            react_1.default.createElement(react_native_1.View, { style: [
+                    styles.verticalLine,
+                    { left: '66%', borderRightColor: color, borderRightWidth: lineWidth },
+                ] }),
+            react_1.default.createElement(react_native_1.Animated.View, { style: [
+                    styles.scanBar,
+                    {
+                        opacity: active ? 1 : 0,
+                        backgroundColor: color,
+                        transform: [{ translateY }],
+                    },
+                ] }))));
 };
-exports.Overlay = Overlay;
+exports.ScannerOverlay = ScannerOverlay;
 const styles = react_native_1.StyleSheet.create({
-    container: {
+    frame: {
+        flex: 1,
+        borderRadius: 12,
+        overflow: 'hidden',
+        backgroundColor: 'transparent',
+    },
+    horizontalLine: {
+        position: 'absolute',
+        right: 0,
+        left: 0,
+        height: 0,
+    },
+    verticalLine: {
         position: 'absolute',
         top: 0,
+        bottom: 0,
+        width: 0,
+    },
+    scanBar: {
+        position: 'absolute',
         left: 0,
         right: 0,
-        bottom: 0,
+        height: BAR_THICKNESS,
     },
 });

package/package.json

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

package/src/DocScanner.tsx

@@ -2,12 +2,15 @@ import React, {
   ReactNode,
   forwardRef,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
+  useState,
 } from 'react';
 import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
 import DocumentScanner from 'react-native-document-scanner';
+import { ScannerOverlay } from './utils/overlay';
 
 type PictureEvent = {
   croppedImage?: string | null;
@@ -16,6 +19,11 @@ type PictureEvent = {
   height?: number;
 };
 
+export type RectangleDetectEvent = {
+  stableCounter: number;
+  lastDetectionType: number;
+};
+
 export interface DetectionConfig {
   processingWidth?: number;
   cannyLowThreshold?: number;
@@ -38,6 +46,7 @@ interface Props {
   gridColor?: string;
   gridLineWidth?: number;
   detectionConfig?: DetectionConfig;
+  onRectangleDetect?: (event: RectangleDetectEvent) => void;
 }
 
 type DocScannerHandle = {
@@ -59,6 +68,10 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
       useBase64 = false,
       children,
       showGrid = true,
+      gridColor,
+      gridLineWidth,
+      detectionConfig,
+      onRectangleDetect,
     },
     ref,
   ) => {
@@ -67,6 +80,13 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
       resolve: (value: PictureEvent) => void;
       reject: (reason?: unknown) => void;
     } | null>(null);
+    const [isAutoCapturing, setIsAutoCapturing] = useState(false);
+
+    useEffect(() => {
+      if (!autoCapture) {
+        setIsAutoCapturing(false);
+      }
+    }, [autoCapture]);
 
     const normalizedQuality = useMemo(() => {
       if (Platform.OS === 'ios') {
@@ -78,6 +98,8 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
 
     const handlePictureTaken = useCallback(
       (event: PictureEvent) => {
+        setIsAutoCapturing(false);
+
         const path = event.croppedImage ?? event.initialImage;
         if (path) {
           onCapture?.({
@@ -134,6 +156,21 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
       });
     }, [autoCapture, capture]);
 
+    const handleRectangleDetect = useCallback(
+      (event: RectangleDetectEvent) => {
+        if (autoCapture) {
+          if (event.stableCounter >= Math.max(minStableFrames - 1, 0)) {
+            setIsAutoCapturing(true);
+          } else if (event.stableCounter === 0) {
+            setIsAutoCapturing(false);
+          }
+        }
+
+        onRectangleDetect?.(event);
+      },
+      [autoCapture, minStableFrames, onRectangleDetect],
+    );
+
     useImperativeHandle(
       ref,
       () => ({
@@ -159,9 +196,18 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
           quality={normalizedQuality}
           useBase64={useBase64}
           manualOnly={!autoCapture}
+          detectionConfig={detectionConfig}
           onPictureTaken={handlePictureTaken}
           onError={handleError}
+          onRectangleDetect={handleRectangleDetect}
         />
+        {showGrid && (
+          <ScannerOverlay
+            active={autoCapture && isAutoCapturing}
+            color={gridColor ?? overlayColor}
+            lineWidth={gridLineWidth}
+          />
+        )}
         {!autoCapture && <TouchableOpacity style={styles.button} onPress={handleManualCapture} />}
         {children}
       </View>

package/src/external.d.ts

@@ -77,8 +77,17 @@ declare module 'react-native-document-scanner' {
     useBase64?: boolean;
     quality?: number;
     manualOnly?: boolean;
+    detectionConfig?: {
+      processingWidth?: number;
+      cannyLowThreshold?: number;
+      cannyHighThreshold?: number;
+      snapDistance?: number;
+      maxAnchorMisses?: number;
+      maxCenterDelta?: number;
+    };
     onPictureTaken?: (event: DocumentScannerResult) => void;
     onError?: (error: Error) => void;
+    onRectangleDetect?: (event: { stableCounter: number; lastDetectionType: number }) => void;
   }
 
   export default class DocumentScanner extends Component<DocumentScannerProps> {

package/src/utils/overlay.tsx

@@ -0,0 +1,143 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, LayoutChangeEvent, StyleSheet, View } from 'react-native';
+
+export interface ScannerOverlayProps {
+  /** 활성화 시 스캔 바가 움직이며 자동 촬영 중임을 표시합니다. */
+  active: boolean;
+  color?: string;
+  lineWidth?: number;
+}
+
+const BAR_THICKNESS = 4;
+
+export const ScannerOverlay: React.FC<ScannerOverlayProps> = ({
+  active,
+  color = 'rgba(255,255,255,0.8)',
+  lineWidth = StyleSheet.hairlineWidth,
+}) => {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const loopRef = useRef<Animated.CompositeAnimation | null>(null);
+  const [frameHeight, setFrameHeight] = useState(0);
+
+  const borderStyle = useMemo(
+    () => ({
+      borderColor: color,
+      borderWidth: lineWidth,
+    }),
+    [color, lineWidth],
+  );
+
+  useEffect(() => {
+    loopRef.current?.stop();
+    if (!active || frameHeight <= 0) {
+      animatedValue.stopAnimation();
+      animatedValue.setValue(0);
+      return;
+    }
+
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration: 1600,
+          easing: Easing.inOut(Easing.quad),
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 0,
+          duration: 1600,
+          easing: Easing.inOut(Easing.quad),
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+
+    loopRef.current = loop;
+    loop.start();
+
+    return () => {
+      loop.stop();
+    };
+  }, [active, animatedValue, frameHeight]);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    setFrameHeight(height);
+  };
+
+  const translateY =
+    frameHeight <= BAR_THICKNESS
+      ? 0
+      : animatedValue.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, frameHeight - BAR_THICKNESS],
+        });
+
+  return (
+    <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+      <View onLayout={handleLayout} style={[styles.frame, borderStyle]}>
+        <View
+          style={[
+            styles.horizontalLine,
+            { top: '33%', borderBottomColor: color, borderBottomWidth: lineWidth },
+          ]}
+        />
+        <View
+          style={[
+            styles.horizontalLine,
+            { top: '66%', borderBottomColor: color, borderBottomWidth: lineWidth },
+          ]}
+        />
+        <View
+          style={[
+            styles.verticalLine,
+            { left: '33%', borderRightColor: color, borderRightWidth: lineWidth },
+          ]}
+        />
+        <View
+          style={[
+            styles.verticalLine,
+            { left: '66%', borderRightColor: color, borderRightWidth: lineWidth },
+          ]}
+        />
+        <Animated.View
+          style={[
+            styles.scanBar,
+            {
+              opacity: active ? 1 : 0,
+              backgroundColor: color,
+              transform: [{ translateY }],
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  frame: {
+    flex: 1,
+    borderRadius: 12,
+    overflow: 'hidden',
+    backgroundColor: 'transparent',
+  },
+  horizontalLine: {
+    position: 'absolute',
+    right: 0,
+    left: 0,
+    height: 0,
+  },
+  verticalLine: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: 0,
+  },
+  scanBar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: BAR_THICKNESS,
+  },
+});

package/vendor/react-native-document-scanner/ios/IPDFCameraViewController.m

@@ -220,15 +220,15 @@
         }
     }
 
-    if (self.context && _coreImageContext)
+    if (self.context && _coreImageContext && _glkView)
     {
         // Calculate the rect to draw the image with aspect fill
-        CGRect drawRect = self.bounds;
+        CGRect viewBounds = _glkView.bounds;
         CGRect imageExtent = image.extent;
 
         // Calculate aspect ratios
         CGFloat imageAspect = imageExtent.size.width / imageExtent.size.height;
-        CGFloat viewAspect = drawRect.size.width / drawRect.size.height;
+        CGFloat viewAspect = viewBounds.size.width / viewBounds.size.height;
 
         CGRect fromRect = imageExtent;
 
@@ -245,6 +245,12 @@
             fromRect = CGRectMake(0, yOffset, imageExtent.size.width, newHeight);
         }
 
+        // GLKView renderbuffer expects pixel dimensions, not point-based bounds
+        CGRect drawRect = CGRectMake(0,
+                                     0,
+                                     (CGFloat)_glkView.drawableWidth,
+                                     (CGFloat)_glkView.drawableHeight);
+
         [_coreImageContext drawImage:image inRect:drawRect fromRect:fromRect];
         [self.context presentRenderbuffer:GL_RENDERBUFFER];