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

package/dist/DocScanner.d.ts

@@ -1,13 +1,24 @@
 import React, { ReactNode } from 'react';
+import type { Rectangle as NativeRectangle, RectangleEventPayload } from 'react-native-document-scanner';
+import type { Point, Rectangle } from './types';
 type PictureEvent = {
     croppedImage?: string | null;
     initialImage?: string | null;
     width?: number;
     height?: number;
+    rectangleCoordinates?: NativeRectangle | null;
 };
-export type RectangleDetectEvent = {
-    stableCounter: number;
-    lastDetectionType: number;
+export type RectangleDetectEvent = Omit<RectangleEventPayload, 'rectangleCoordinates' | 'rectangleOnScreen'> & {
+    rectangleCoordinates?: Rectangle | null;
+    rectangleOnScreen?: Rectangle | null;
+};
+export type DocScannerCapture = {
+    path: string;
+    initialPath: string | null;
+    croppedPath: string | null;
+    quad: Point[] | null;
+    width: number;
+    height: number;
 };
 export interface DetectionConfig {
     processingWidth?: number;
@@ -18,12 +29,7 @@ export interface DetectionConfig {
     maxCenterDelta?: number;
 }
 interface Props {
-    onCapture?: (photo: {
-        path: string;
-        quad: null;
-        width: number;
-        height: number;
-    }) => void;
+    onCapture?: (photo: DocScannerCapture) => void;
     overlayColor?: string;
     autoCapture?: boolean;
     minStableFrames?: number;
@@ -37,9 +43,9 @@ interface Props {
     detectionConfig?: DetectionConfig;
     onRectangleDetect?: (event: RectangleDetectEvent) => void;
 }
-type DocScannerHandle = {
+export type DocScannerHandle = {
     capture: () => Promise<PictureEvent>;
     reset: () => void;
 };
 export declare const DocScanner: React.ForwardRefExoticComponent<Props & React.RefAttributes<DocScannerHandle>>;
-export type { DocScannerHandle };
+export {};

package/dist/DocScanner.js

@@ -40,12 +40,39 @@ 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 coordinate_1 = require("./utils/coordinate");
 const overlay_1 = require("./utils/overlay");
+const isFiniteNumber = (value) => typeof value === 'number' && Number.isFinite(value);
+const normalizePoint = (point) => {
+    if (!point || !isFiniteNumber(point.x) || !isFiniteNumber(point.y)) {
+        return null;
+    }
+    return { x: point.x, y: point.y };
+};
+const normalizeRectangle = (rectangle) => {
+    if (!rectangle) {
+        return null;
+    }
+    const topLeft = normalizePoint(rectangle.topLeft);
+    const topRight = normalizePoint(rectangle.topRight);
+    const bottomRight = normalizePoint(rectangle.bottomRight);
+    const bottomLeft = normalizePoint(rectangle.bottomLeft);
+    if (!topLeft || !topRight || !bottomRight || !bottomLeft) {
+        return null;
+    }
+    return {
+        topLeft,
+        topRight,
+        bottomRight,
+        bottomLeft,
+    };
+};
 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, 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);
+    const [detectedRectangle, setDetectedRectangle] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         if (!autoCapture) {
             setIsAutoCapturing(false);
@@ -60,15 +87,22 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
     }, [quality]);
     const handlePictureTaken = (0, react_1.useCallback)((event) => {
         setIsAutoCapturing(false);
-        const path = event.croppedImage ?? event.initialImage;
-        if (path) {
+        const normalizedRectangle = normalizeRectangle(event.rectangleCoordinates ?? null);
+        const quad = normalizedRectangle ? (0, coordinate_1.rectangleToQuad)(normalizedRectangle) : null;
+        const initialPath = event.initialImage ?? null;
+        const croppedPath = event.croppedImage ?? null;
+        const bestPath = croppedPath ?? initialPath;
+        if (bestPath) {
             onCapture?.({
-                path,
-                quad: null,
+                path: bestPath,
+                initialPath,
+                croppedPath,
+                quad,
                 width: event.width ?? 0,
                 height: event.height ?? 0,
             });
         }
+        setDetectedRectangle(null);
         if (captureResolvers.current) {
             captureResolvers.current.resolve(event);
             captureResolvers.current = null;
@@ -108,15 +142,24 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
         });
     }, [autoCapture, capture]);
     const handleRectangleDetect = (0, react_1.useCallback)((event) => {
+        const rectangleCoordinates = normalizeRectangle(event.rectangleCoordinates ?? null);
+        const rectangleOnScreen = normalizeRectangle(event.rectangleOnScreen ?? null);
+        const payload = {
+            ...event,
+            rectangleCoordinates,
+            rectangleOnScreen,
+        };
         if (autoCapture) {
-            if (event.stableCounter >= Math.max(minStableFrames - 1, 0)) {
+            if (payload.stableCounter >= Math.max(minStableFrames - 1, 0)) {
                 setIsAutoCapturing(true);
             }
-            else if (event.stableCounter === 0) {
+            else if (payload.stableCounter === 0) {
                 setIsAutoCapturing(false);
             }
         }
-        onRectangleDetect?.(event);
+        const isGoodRectangle = payload.lastDetectionType === 0;
+        setDetectedRectangle(isGoodRectangle && rectangleOnScreen ? payload : null);
+        onRectangleDetect?.(payload);
     }, [autoCapture, minStableFrames, onRectangleDetect]);
     (0, react_1.useImperativeHandle)(ref, () => ({
         capture,
@@ -127,9 +170,11 @@ exports.DocScanner = (0, react_1.forwardRef)(({ onCapture, overlayColor = DEFAUL
             }
         },
     }), [capture]);
+    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 },
         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 })),
+        showGrid && overlayPolygon && (react_1.default.createElement(overlay_1.ScannerOverlay, { active: overlayIsActive, color: gridColor ?? overlayColor, lineWidth: gridLineWidth, polygon: overlayPolygon })),
         !autoCapture && react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.button, onPress: handleManualCapture }),
         children));
 });

package/dist/FullDocScanner.js

@@ -73,9 +73,13 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const handleCapture = (0, react_1.useCallback)((document) => {
         const normalizedPath = stripFileUri(document.path);
         const nextQuad = document.quad && document.quad.length === 4 ? document.quad : null;
+        const normalizedInitial = document.initialPath != null ? stripFileUri(document.initialPath) : normalizedPath;
+        const normalizedCropped = document.croppedPath != null ? stripFileUri(document.croppedPath) : null;
         setCapturedDoc({
             ...document,
             path: normalizedPath,
+            initialPath: normalizedInitial,
+            croppedPath: normalizedCropped,
             quad: nextQuad,
         });
         setCropRectangle(nextQuad ? (0, coordinate_1.quadToRectangle)(nextQuad) : null);

package/dist/index.d.ts

@@ -3,5 +3,5 @@ export { CropEditor } from './CropEditor';
 export { FullDocScanner } from './FullDocScanner';
 export type { FullDocScannerResult, FullDocScannerProps, FullDocScannerStrings, } from './FullDocScanner';
 export type { Point, Quad, Rectangle, CapturedDocument } from './types';
-export type { DetectionConfig, DocScannerHandle } from './DocScanner';
+export type { DetectionConfig, DocScannerHandle, DocScannerCapture, RectangleDetectEvent, } from './DocScanner';
 export { quadToRectangle, rectangleToQuad, scaleCoordinates, scaleRectangle, } from './utils/coordinate';

package/dist/types.d.ts

@@ -11,6 +11,8 @@ export type Rectangle = {
 };
 export type CapturedDocument = {
     path: string;
+    initialPath?: string | null;
+    croppedPath?: string | null;
     quad: Point[] | null;
     width: number;
     height: number;

package/dist/utils/overlay.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import type { Rectangle } from '../types';
 export interface ScannerOverlayProps {
-    /** 활성화 시 스캔 바가 움직이며 자동 촬영 중임을 표시합니다. */
+    /** 자동 캡처 중임을 표시할 때 true로 설정합니다. */
     active: boolean;
     color?: string;
     lineWidth?: number;
+    polygon?: Rectangle | null;
 }
 export declare const ScannerOverlay: React.FC<ScannerOverlayProps>;

package/dist/utils/overlay.js

@@ -36,103 +36,133 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScannerOverlay = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-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]);
+const react_native_skia_1 = require("@shopify/react-native-skia");
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const withAlpha = (inputColor, alpha) => {
+    const parsed = (0, react_native_1.processColor)(inputColor);
+    const normalized = typeof parsed === 'number' ? parsed >>> 0 : null;
+    if (normalized == null) {
+        return inputColor;
+    }
+    const r = (normalized >> 16) & 0xff;
+    const g = (normalized >> 8) & 0xff;
+    const b = normalized & 0xff;
+    const clampedAlpha = clamp(alpha, 0, 1);
+    return `rgba(${r}, ${g}, ${b}, ${clampedAlpha})`;
+};
+const createPolygonPath = (polygon) => {
+    if (!polygon) {
+        return null;
+    }
+    const path = react_native_skia_1.Skia.Path.Make();
+    path.moveTo(polygon.topLeft.x, polygon.topLeft.y);
+    path.lineTo(polygon.topRight.x, polygon.topRight.y);
+    path.lineTo(polygon.bottomRight.x, polygon.bottomRight.y);
+    path.lineTo(polygon.bottomLeft.x, polygon.bottomLeft.y);
+    path.close();
+    return path;
+};
+const interpolate = (a, b, t) => ({
+    x: a.x + (b.x - a.x) * t,
+    y: a.y + (b.y - a.y) * t,
+});
+const createLinePath = (start, end) => {
+    const path = react_native_skia_1.Skia.Path.Make();
+    path.moveTo(start.x, start.y);
+    path.lineTo(end.x, end.y);
+    return path;
+};
+const createGridPaths = (polygon) => {
+    if (!polygon) {
+        return [];
+    }
+    const lines = [];
+    const steps = [1 / 3, 2 / 3];
+    steps.forEach((t) => {
+        const horizontalStart = interpolate(polygon.topLeft, polygon.bottomLeft, t);
+        const horizontalEnd = interpolate(polygon.topRight, polygon.bottomRight, t);
+        lines.push(createLinePath(horizontalStart, horizontalEnd));
+        const verticalStart = interpolate(polygon.topLeft, polygon.topRight, t);
+        const verticalEnd = interpolate(polygon.bottomLeft, polygon.bottomRight, t);
+        lines.push(createLinePath(verticalStart, verticalEnd));
+    });
+    return lines;
+};
+const getPolygonMetrics = (polygon) => {
+    const minX = Math.min(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
+    const maxX = Math.max(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
+    const minY = Math.min(polygon.topLeft.y, polygon.topRight.y, polygon.bottomLeft.y, polygon.bottomRight.y);
+    const maxY = Math.max(polygon.topLeft.y, polygon.topRight.y, polygon.bottomLeft.y, polygon.bottomRight.y);
+    return {
+        minX,
+        maxX,
+        minY,
+        maxY,
+        width: maxX - minX,
+        height: maxY - minY,
+        centerX: minX + (maxX - minX) / 2,
+    };
+};
+const SCAN_DURATION_MS = 2200;
+const ScannerOverlay = ({ active, color = '#0b7ef4', lineWidth = react_native_1.StyleSheet.hairlineWidth, polygon, }) => {
+    const path = (0, react_1.useMemo)(() => createPolygonPath(polygon ?? null), [polygon]);
+    const gridPaths = (0, react_1.useMemo)(() => createGridPaths(polygon ?? null), [polygon]);
+    const metrics = (0, react_1.useMemo)(() => (polygon ? getPolygonMetrics(polygon) : null), [polygon]);
+    const gradientStart = (0, react_native_skia_1.useValue)((0, react_native_skia_1.vec)(0, 0));
+    const gradientEnd = (0, react_native_skia_1.useValue)((0, react_native_skia_1.vec)(0, 0));
+    const gradientColors = (0, react_native_skia_1.useValue)([
+        react_native_skia_1.Skia.Color(withAlpha(color, 0)),
+        react_native_skia_1.Skia.Color(withAlpha(color, 0.85)),
+        react_native_skia_1.Skia.Color(withAlpha(color, 0)),
+    ]);
+    const gradientPositions = (0, react_native_skia_1.useValue)([0, 0.5, 1]);
     (0, react_1.useEffect)(() => {
-        loopRef.current?.stop();
-        if (!active || frameHeight <= 0) {
-            animatedValue.stopAnimation();
-            animatedValue.setValue(0);
+        if (!metrics) {
             return;
         }
-        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();
+        let frame = null;
+        const transparentColor = react_native_skia_1.Skia.Color(withAlpha(color, 0));
+        const highlightColor = react_native_skia_1.Skia.Color(withAlpha(color, 0.9));
+        const bandSize = Math.max(metrics.height * 0.25, 20);
+        const animate = () => {
+            const now = Date.now() % SCAN_DURATION_MS;
+            const progress = now / SCAN_DURATION_MS;
+            const travel = metrics.height + bandSize * 2;
+            const start = metrics.minY - bandSize + travel * progress;
+            const end = start + bandSize;
+            const clampedStart = clamp(start, metrics.minY, metrics.maxY);
+            const clampedEnd = clamp(end, metrics.minY, metrics.maxY);
+            gradientStart.current = (0, react_native_skia_1.vec)(metrics.centerX, clampedStart);
+            gradientEnd.current = (0, react_native_skia_1.vec)(metrics.centerX, clampedEnd <= clampedStart ? clampedStart + 1 : clampedEnd);
+            gradientColors.current = [transparentColor, highlightColor, transparentColor];
+            frame = requestAnimationFrame(animate);
+        };
+        gradientStart.current = (0, react_native_skia_1.vec)(metrics.centerX, metrics.minY);
+        gradientEnd.current = (0, react_native_skia_1.vec)(metrics.centerX, metrics.maxY);
+        if (active) {
+            animate();
+        }
+        else {
+            gradientColors.current = [transparentColor, transparentColor, transparentColor];
+        }
         return () => {
-            loop.stop();
+            if (frame !== null) {
+                cancelAnimationFrame(frame);
+            }
         };
-    }, [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 }],
-                    },
-                ] }))));
+    }, [active, color, gradientColors, gradientEnd, gradientStart, metrics]);
+    if (!polygon || !path || !metrics) {
+        return null;
+    }
+    const strokeColor = withAlpha(color, 0.9);
+    const fillColor = withAlpha(color, 0.18);
+    const gridColor = withAlpha(color, 0.35);
+    return (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: react_native_1.StyleSheet.absoluteFillObject },
+        react_1.default.createElement(react_native_skia_1.Canvas, { style: react_native_1.StyleSheet.absoluteFillObject },
+            react_1.default.createElement(react_native_skia_1.Path, { path: path, color: fillColor, style: "fill" }),
+            gridPaths.map((gridPath, index) => (react_1.default.createElement(react_native_skia_1.Path, { key: `grid-${index}`, path: gridPath, color: gridColor, style: "stroke", strokeWidth: lineWidth }))),
+            react_1.default.createElement(react_native_skia_1.Path, { path: path, color: strokeColor, style: "stroke", strokeWidth: lineWidth }),
+            react_1.default.createElement(react_native_skia_1.Path, { path: path },
+                react_1.default.createElement(react_native_skia_1.LinearGradient, { start: gradientStart, end: gradientEnd, colors: gradientColors, positions: gradientPositions })))));
 };
 exports.ScannerOverlay = ScannerOverlay;
-const styles = react_native_1.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "3.18.0",
+  "version": "3.22.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,9 @@ import React, {
 } from 'react';
 import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
 import DocumentScanner from 'react-native-document-scanner';
+import type { Rectangle as NativeRectangle, RectangleEventPayload } from 'react-native-document-scanner';
+import { rectangleToQuad } from './utils/coordinate';
+import type { Point, Rectangle } from './types';
 import { ScannerOverlay } from './utils/overlay';
 
 type PictureEvent = {
@@ -17,11 +20,53 @@ type PictureEvent = {
   initialImage?: string | null;
   width?: number;
   height?: number;
+  rectangleCoordinates?: NativeRectangle | null;
 };
 
-export type RectangleDetectEvent = {
-  stableCounter: number;
-  lastDetectionType: number;
+export type RectangleDetectEvent = Omit<RectangleEventPayload, 'rectangleCoordinates' | 'rectangleOnScreen'> & {
+  rectangleCoordinates?: Rectangle | null;
+  rectangleOnScreen?: Rectangle | null;
+};
+
+export type DocScannerCapture = {
+  path: string;
+  initialPath: string | null;
+  croppedPath: string | null;
+  quad: Point[] | null;
+  width: number;
+  height: number;
+};
+
+const isFiniteNumber = (value: unknown): value is number =>
+  typeof value === 'number' && Number.isFinite(value);
+
+const normalizePoint = (point?: { x?: number; y?: number } | null): Point | null => {
+  if (!point || !isFiniteNumber(point.x) || !isFiniteNumber(point.y)) {
+    return null;
+  }
+  return { x: point.x, y: point.y };
+};
+
+const normalizeRectangle = (rectangle?: NativeRectangle | null): Rectangle | null => {
+  if (!rectangle) {
+    return null;
+  }
+
+  const topLeft = normalizePoint(rectangle.topLeft);
+  const topRight = normalizePoint(rectangle.topRight);
+  const bottomRight = normalizePoint(rectangle.bottomRight);
+  const bottomLeft = normalizePoint(rectangle.bottomLeft);
+
+  if (!topLeft || !topRight || !bottomRight || !bottomLeft) {
+    return null;
+  }
+
+  return {
+    topLeft,
+    topRight,
+    bottomRight,
+    bottomLeft,
+  };
 };
 
 export interface DetectionConfig {
@@ -34,7 +79,7 @@ export interface DetectionConfig {
 }
 
 interface Props {
-  onCapture?: (photo: { path: string; quad: null; width: number; height: number }) => void;
+  onCapture?: (photo: DocScannerCapture) => void;
   overlayColor?: string;
   autoCapture?: boolean;
   minStableFrames?: number;
@@ -49,7 +94,7 @@ interface Props {
   onRectangleDetect?: (event: RectangleDetectEvent) => void;
 }
 
-type DocScannerHandle = {
+export type DocScannerHandle = {
   capture: () => Promise<PictureEvent>;
   reset: () => void;
 };
@@ -81,6 +126,7 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
       reject: (reason?: unknown) => void;
     } | null>(null);
     const [isAutoCapturing, setIsAutoCapturing] = useState(false);
+    const [detectedRectangle, setDetectedRectangle] = useState<RectangleDetectEvent | null>(null);
 
     useEffect(() => {
       if (!autoCapture) {
@@ -100,16 +146,26 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
       (event: PictureEvent) => {
         setIsAutoCapturing(false);
 
-        const path = event.croppedImage ?? event.initialImage;
-        if (path) {
+        const normalizedRectangle = normalizeRectangle(event.rectangleCoordinates ?? null);
+        const quad = normalizedRectangle ? rectangleToQuad(normalizedRectangle) : null;
+
+        const initialPath = event.initialImage ?? null;
+        const croppedPath = event.croppedImage ?? null;
+        const bestPath = croppedPath ?? initialPath;
+
+        if (bestPath) {
           onCapture?.({
-            path,
-            quad: null,
+            path: bestPath,
+            initialPath,
+            croppedPath,
+            quad,
             width: event.width ?? 0,
             height: event.height ?? 0,
           });
         }
 
+        setDetectedRectangle(null);
+
         if (captureResolvers.current) {
           captureResolvers.current.resolve(event);
           captureResolvers.current = null;
@@ -157,16 +213,27 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
     }, [autoCapture, capture]);
 
     const handleRectangleDetect = useCallback(
-      (event: RectangleDetectEvent) => {
+      (event: RectangleEventPayload) => {
+        const rectangleCoordinates = normalizeRectangle(event.rectangleCoordinates ?? null);
+        const rectangleOnScreen = normalizeRectangle(event.rectangleOnScreen ?? null);
+
+        const payload: RectangleDetectEvent = {
+          ...event,
+          rectangleCoordinates,
+          rectangleOnScreen,
+        };
+
         if (autoCapture) {
-          if (event.stableCounter >= Math.max(minStableFrames - 1, 0)) {
+          if (payload.stableCounter >= Math.max(minStableFrames - 1, 0)) {
             setIsAutoCapturing(true);
-          } else if (event.stableCounter === 0) {
+          } else if (payload.stableCounter === 0) {
             setIsAutoCapturing(false);
           }
         }
 
-        onRectangleDetect?.(event);
+        const isGoodRectangle = payload.lastDetectionType === 0;
+        setDetectedRectangle(isGoodRectangle && rectangleOnScreen ? payload : null);
+        onRectangleDetect?.(payload);
       },
       [autoCapture, minStableFrames, onRectangleDetect],
     );
@@ -185,6 +252,9 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
       [capture],
     );
 
+    const overlayPolygon = detectedRectangle?.rectangleOnScreen ?? null;
+    const overlayIsActive = autoCapture ? isAutoCapturing : (detectedRectangle?.stableCounter ?? 0) > 0;
+
     return (
       <View style={styles.container}>
         <DocumentScanner
@@ -201,11 +271,12 @@ export const DocScanner = forwardRef<DocScannerHandle, Props>(
           onError={handleError}
           onRectangleDetect={handleRectangleDetect}
         />
-        {showGrid && (
+        {showGrid && overlayPolygon && (
           <ScannerOverlay
-            active={autoCapture && isAutoCapturing}
+            active={overlayIsActive}
             color={gridColor ?? overlayColor}
             lineWidth={gridLineWidth}
+            polygon={overlayPolygon}
           />
         )}
         {!autoCapture && <TouchableOpacity style={styles.button} onPress={handleManualCapture} />}
@@ -239,5 +310,3 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
   },
 });
-
-export type { DocScannerHandle };

package/src/FullDocScanner.tsx

@@ -128,10 +128,16 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     (document: CapturedDocument) => {
       const normalizedPath = stripFileUri(document.path);
       const nextQuad = document.quad && document.quad.length === 4 ? (document.quad as Quad) : null;
+      const normalizedInitial =
+        document.initialPath != null ? stripFileUri(document.initialPath) : normalizedPath;
+      const normalizedCropped =
+        document.croppedPath != null ? stripFileUri(document.croppedPath) : null;
 
       setCapturedDoc({
         ...document,
         path: normalizedPath,
+        initialPath: normalizedInitial,
+        croppedPath: normalizedCropped,
         quad: nextQuad,
       });
       setCropRectangle(nextQuad ? quadToRectangle(nextQuad) : null);

package/src/external.d.ts

@@ -12,6 +12,7 @@ declare module '@shopify/react-native-skia' {
     Path: {
       Make: () => SkPath;
     };
+    Color: (color: string | number) => number;
   };
 
   export type CanvasProps = {
@@ -26,9 +27,27 @@ declare module '@shopify/react-native-skia' {
     style?: 'stroke' | 'fill';
     strokeWidth?: number;
     color?: string;
+    children?: ReactNode;
   };
 
   export const Path: ComponentType<PathProps>;
+
+  export type SkiaValue<T> = {
+    current: T;
+  };
+
+  export const useValue: <T>(initialValue: T) => SkiaValue<T>;
+
+  export const vec: (x: number, y: number) => { x: number; y: number };
+
+  export type LinearGradientProps = {
+    start: SkiaValue<{ x: number; y: number }> | { x: number; y: number };
+    end: SkiaValue<{ x: number; y: number }> | { x: number; y: number };
+    colors: SkiaValue<number[]> | number[];
+    positions?: SkiaValue<number[]> | number[];
+  };
+
+  export const LinearGradient: ComponentType<LinearGradientProps>;
 }
 
 declare module 'react-native-perspective-image-cropper' {
@@ -62,11 +81,33 @@ declare module 'react-native-document-scanner' {
   import type { Component } from 'react';
   import type { ViewStyle } from 'react-native';
 
+  export type RectanglePoint = {
+    x: number;
+    y: number;
+  };
+
+  export type Rectangle = {
+    topLeft: RectanglePoint;
+    topRight: RectanglePoint;
+    bottomLeft: RectanglePoint;
+    bottomRight: RectanglePoint;
+  };
+
+  export type RectangleEventPayload = {
+    stableCounter: number;
+    lastDetectionType: number;
+    rectangleCoordinates?: Rectangle | null;
+    rectangleOnScreen?: Rectangle | null;
+    previewSize?: { width: number; height: number };
+    imageSize?: { width: number; height: number };
+  };
+
   export type DocumentScannerResult = {
     croppedImage?: string | null;
     initialImage?: string | null;
     width?: number;
     height?: number;
+    rectangleCoordinates?: Rectangle | null;
   };
 
   export interface DocumentScannerProps {
@@ -87,7 +128,7 @@ declare module 'react-native-document-scanner' {
     };
     onPictureTaken?: (event: DocumentScannerResult) => void;
     onError?: (error: Error) => void;
-    onRectangleDetect?: (event: { stableCounter: number; lastDetectionType: number }) => void;
+    onRectangleDetect?: (event: RectangleEventPayload) => void;
   }
 
   export default class DocumentScanner extends Component<DocumentScannerProps> {

package/src/index.ts

@@ -11,7 +11,12 @@ export type {
 
 // Types
 export type { Point, Quad, Rectangle, CapturedDocument } from './types';
-export type { DetectionConfig, DocScannerHandle } from './DocScanner';
+export type {
+  DetectionConfig,
+  DocScannerHandle,
+  DocScannerCapture,
+  RectangleDetectEvent,
+} from './DocScanner';
 
 // Utilities
 export {

package/src/types.ts

@@ -11,6 +11,8 @@ export type Rectangle = {
 
 export type CapturedDocument = {
   path: string;
+  initialPath?: string | null;
+  croppedPath?: string | null;
   quad: Point[] | null;
   width: number;
   height: number;

package/src/utils/overlay.tsx

@@ -1,143 +1,198 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Easing, LayoutChangeEvent, StyleSheet, View } from 'react-native';
+import React, { useEffect, useMemo } from 'react';
+import { View, processColor, StyleSheet } from 'react-native';
+import {
+  Canvas,
+  LinearGradient,
+  Path,
+  Skia,
+  SkPath,
+  useValue,
+  vec,
+} from '@shopify/react-native-skia';
+import type { Point, Rectangle } from '../types';
 
 export interface ScannerOverlayProps {
-  /** 활성화 시 스캔 바가 움직이며 자동 촬영 중임을 표시합니다. */
+  /** 자동 캡처 중임을 표시할 때 true로 설정합니다. */
   active: boolean;
   color?: string;
   lineWidth?: number;
+  polygon?: Rectangle | null;
 }
 
-const BAR_THICKNESS = 4;
+const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
+
+const withAlpha = (inputColor: string, alpha: number): string => {
+  const parsed = processColor(inputColor);
+  const normalized = typeof parsed === 'number' ? parsed >>> 0 : null;
+
+  if (normalized == null) {
+    return inputColor;
+  }
+
+  const r = (normalized >> 16) & 0xff;
+  const g = (normalized >> 8) & 0xff;
+  const b = normalized & 0xff;
+  const clampedAlpha = clamp(alpha, 0, 1);
+
+  return `rgba(${r}, ${g}, ${b}, ${clampedAlpha})`;
+};
+
+const createPolygonPath = (polygon: Rectangle | null): SkPath | null => {
+  if (!polygon) {
+    return null;
+  }
+
+  const path = Skia.Path.Make();
+  path.moveTo(polygon.topLeft.x, polygon.topLeft.y);
+  path.lineTo(polygon.topRight.x, polygon.topRight.y);
+  path.lineTo(polygon.bottomRight.x, polygon.bottomRight.y);
+  path.lineTo(polygon.bottomLeft.x, polygon.bottomLeft.y);
+  path.close();
+  return path;
+};
+
+const interpolate = (a: Point, b: Point, t: number): Point => ({
+  x: a.x + (b.x - a.x) * t,
+  y: a.y + (b.y - a.y) * t,
+});
+
+const createLinePath = (start: Point, end: Point): SkPath => {
+  const path = Skia.Path.Make();
+  path.moveTo(start.x, start.y);
+  path.lineTo(end.x, end.y);
+  return path;
+};
+
+const createGridPaths = (polygon: Rectangle | null): SkPath[] => {
+  if (!polygon) {
+    return [];
+  }
+
+  const lines: SkPath[] = [];
+  const steps = [1 / 3, 2 / 3];
+
+  steps.forEach((t) => {
+    const horizontalStart = interpolate(polygon.topLeft, polygon.bottomLeft, t);
+    const horizontalEnd = interpolate(polygon.topRight, polygon.bottomRight, t);
+    lines.push(createLinePath(horizontalStart, horizontalEnd));
+
+    const verticalStart = interpolate(polygon.topLeft, polygon.topRight, t);
+    const verticalEnd = interpolate(polygon.bottomLeft, polygon.bottomRight, t);
+    lines.push(createLinePath(verticalStart, verticalEnd));
+  });
+
+  return lines;
+};
+
+const getPolygonMetrics = (polygon: Rectangle) => {
+  const minX = Math.min(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
+  const maxX = Math.max(polygon.topLeft.x, polygon.bottomLeft.x, polygon.topRight.x, polygon.bottomRight.x);
+  const minY = Math.min(polygon.topLeft.y, polygon.topRight.y, polygon.bottomLeft.y, polygon.bottomRight.y);
+  const maxY = Math.max(polygon.topLeft.y, polygon.topRight.y, polygon.bottomLeft.y, polygon.bottomRight.y);
+
+  return {
+    minX,
+    maxX,
+    minY,
+    maxY,
+    width: maxX - minX,
+    height: maxY - minY,
+    centerX: minX + (maxX - minX) / 2,
+  };
+};
+
+const SCAN_DURATION_MS = 2200;
 
 export const ScannerOverlay: React.FC<ScannerOverlayProps> = ({
   active,
-  color = 'rgba(255,255,255,0.8)',
+  color = '#0b7ef4',
   lineWidth = StyleSheet.hairlineWidth,
+  polygon,
 }) => {
-  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],
-  );
+  const path = useMemo(() => createPolygonPath(polygon ?? null), [polygon]);
+  const gridPaths = useMemo(() => createGridPaths(polygon ?? null), [polygon]);
+  const metrics = useMemo(() => (polygon ? getPolygonMetrics(polygon) : null), [polygon]);
+
+  const gradientStart = useValue(vec(0, 0));
+  const gradientEnd = useValue(vec(0, 0));
+  const gradientColors = useValue<number[]>([
+    Skia.Color(withAlpha(color, 0)),
+    Skia.Color(withAlpha(color, 0.85)),
+    Skia.Color(withAlpha(color, 0)),
+  ]);
+  const gradientPositions = useValue<number[]>([0, 0.5, 1]);
 
   useEffect(() => {
-    loopRef.current?.stop();
-    if (!active || frameHeight <= 0) {
-      animatedValue.stopAnimation();
-      animatedValue.setValue(0);
+    if (!metrics) {
       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();
+    let frame: number | null = null;
+    const transparentColor = Skia.Color(withAlpha(color, 0));
+    const highlightColor = Skia.Color(withAlpha(color, 0.9));
+    const bandSize = Math.max(metrics.height * 0.25, 20);
+
+    const animate = () => {
+      const now = Date.now() % SCAN_DURATION_MS;
+      const progress = now / SCAN_DURATION_MS;
+      const travel = metrics.height + bandSize * 2;
+      const start = metrics.minY - bandSize + travel * progress;
+      const end = start + bandSize;
+
+      const clampedStart = clamp(start, metrics.minY, metrics.maxY);
+      const clampedEnd = clamp(end, metrics.minY, metrics.maxY);
+
+      gradientStart.current = vec(metrics.centerX, clampedStart);
+      gradientEnd.current = vec(
+        metrics.centerX,
+        clampedEnd <= clampedStart ? clampedStart + 1 : clampedEnd,
+      );
+      gradientColors.current = [transparentColor, highlightColor, transparentColor];
+
+      frame = requestAnimationFrame(animate);
+    };
+
+    gradientStart.current = vec(metrics.centerX, metrics.minY);
+    gradientEnd.current = vec(metrics.centerX, metrics.maxY);
+
+    if (active) {
+      animate();
+    } else {
+      gradientColors.current = [transparentColor, transparentColor, transparentColor];
+    }
 
     return () => {
-      loop.stop();
+      if (frame !== null) {
+        cancelAnimationFrame(frame);
+      }
     };
-  }, [active, animatedValue, frameHeight]);
+  }, [active, color, gradientColors, gradientEnd, gradientStart, metrics]);
 
-  const handleLayout = (event: LayoutChangeEvent) => {
-    const { height } = event.nativeEvent.layout;
-    setFrameHeight(height);
-  };
+  if (!polygon || !path || !metrics) {
+    return null;
+  }
 
-  const translateY =
-    frameHeight <= BAR_THICKNESS
-      ? 0
-      : animatedValue.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, frameHeight - BAR_THICKNESS],
-        });
+  const strokeColor = withAlpha(color, 0.9);
+  const fillColor = withAlpha(color, 0.18);
+  const gridColor = withAlpha(color, 0.35);
 
   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 pointerEvents="none" style={StyleSheet.absoluteFillObject}>
+      <Canvas style={StyleSheet.absoluteFillObject}>
+        <Path path={path} color={fillColor} style="fill" />
+        {gridPaths.map((gridPath, index) => (
+          <Path key={`grid-${index}`} path={gridPath} color={gridColor} style="stroke" strokeWidth={lineWidth} />
+        ))}
+        <Path path={path} color={strokeColor} style="stroke" strokeWidth={lineWidth} />
+        <Path path={path}>
+          <LinearGradient
+            start={gradientStart}
+            end={gradientEnd}
+            colors={gradientColors}
+            positions={gradientPositions}
+          />
+        </Path>
+      </Canvas>
     </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/DocumentScannerView.m

@@ -3,6 +3,7 @@
 
 @implementation DocumentScannerView {
     BOOL _hasSetupCamera;
+    IPDFRectangeType _lastDetectionType;
 }
 
 - (instancetype)init {
@@ -37,6 +38,20 @@
 }
 
 
+- (NSDictionary *)dictionaryForRectangleFeature:(CIRectangleFeature *)rectangleFeature
+{
+    if (!rectangleFeature) {
+        return nil;
+    }
+
+    return @{
+        @"topLeft": @{ @"y": @(rectangleFeature.bottomLeft.x + 30), @"x": @(rectangleFeature.bottomLeft.y)},
+        @"topRight": @{ @"y": @(rectangleFeature.topLeft.x + 30), @"x": @(rectangleFeature.topLeft.y)},
+        @"bottomLeft": @{ @"y": @(rectangleFeature.bottomRight.x), @"x": @(rectangleFeature.bottomRight.y)},
+        @"bottomRight": @{ @"y": @(rectangleFeature.topRight.x), @"x": @(rectangleFeature.topRight.y)},
+    };
+}
+
 - (void) didDetectRectangle:(CIRectangleFeature *)rectangle withType:(IPDFRectangeType)type {
     switch (type) {
         case IPDFRectangeTypeGood:
@@ -46,15 +61,45 @@
             self.stableCounter = 0;
             break;
     }
-    if (self.onRectangleDetect) {
-        self.onRectangleDetect(@{@"stableCounter": @(self.stableCounter), @"lastDetectionType": @(type)});
-    }
+
+    _lastDetectionType = type;
 
     if (self.stableCounter > self.detectionCountBeforeCapture){
         [self capture];
     }
 }
 
+- (void)cameraViewController:(IPDFCameraViewController *)controller
+          didDetectRectangle:(CIRectangleFeature *)rectangle
+                    withType:(IPDFRectangeType)type
+             viewCoordinates:(NSDictionary *)viewCoordinates
+                   imageSize:(CGSize)imageSize
+{
+    _lastDetectionType = type;
+
+    if (!self.onRectangleDetect) {
+        return;
+    }
+
+    NSDictionary *rectangleCoordinates = [self dictionaryForRectangleFeature:rectangle];
+    NSMutableDictionary *payload = [@{
+        @"stableCounter": @(self.stableCounter),
+        @"lastDetectionType": @(_lastDetectionType),
+        @"rectangleCoordinates": rectangleCoordinates ? rectangleCoordinates : [NSNull null],
+        @"rectangleOnScreen": viewCoordinates ? viewCoordinates : [NSNull null],
+        @"previewSize": @{
+            @"width": @(self.bounds.size.width),
+            @"height": @(self.bounds.size.height)
+        },
+        @"imageSize": @{
+            @"width": @(imageSize.width),
+            @"height": @(imageSize.height)
+        }
+    } mutableCopy];
+
+    self.onRectangleDetect(payload);
+}
+
 - (void) capture {
     [self captureImageWithCompletionHander:^(UIImage *croppedImage, UIImage *initialImage, CIRectangleFeature *rectangleFeature) {
       if (self.onPictureTaken) {
@@ -77,12 +122,8 @@
              while rectangleFeature returns a rectangle viewed from landscape, which explains the nonsense of the mapping below.
              Sorry about that.
              */
-            NSDictionary *rectangleCoordinates = rectangleFeature ? @{
-                                     @"topLeft": @{ @"y": @(rectangleFeature.bottomLeft.x + 30), @"x": @(rectangleFeature.bottomLeft.y)},
-                                     @"topRight": @{ @"y": @(rectangleFeature.topLeft.x + 30), @"x": @(rectangleFeature.topLeft.y)},
-                                     @"bottomLeft": @{ @"y": @(rectangleFeature.bottomRight.x), @"x": @(rectangleFeature.bottomRight.y)},
-                                     @"bottomRight": @{ @"y": @(rectangleFeature.topRight.x), @"x": @(rectangleFeature.topRight.y)},
-                                     } : [NSNull null];
+            NSDictionary *rectangleCoordinatesDict = [self dictionaryForRectangleFeature:rectangleFeature];
+            id rectangleCoordinates = rectangleCoordinatesDict ? rectangleCoordinatesDict : [NSNull null];
             if (self.useBase64) {
               self.onPictureTaken(@{
                                     @"croppedImage": [croppedImageData base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength],

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

@@ -0,0 +1,64 @@
+//
+//  IPDFCameraViewController.h
+//  InstaPDF
+//
+//  Created by Maximilian Mackh on 06/01/15.
+//  Copyright (c) 2015 mackh ag. All rights reserved.
+//
+
+#import <UIKit/UIKit.h>
+
+@class CIRectangleFeature;
+
+typedef NS_ENUM(NSInteger, IPDFCameraViewType)
+{
+    IPDFCameraViewTypeBlackAndWhite,
+    IPDFCameraViewTypeNormal
+};
+
+typedef NS_ENUM(NSInteger, IPDFRectangeType)
+{
+    IPDFRectangeTypeGood,
+    IPDFRectangeTypeBadAngle,
+    IPDFRectangeTypeTooFar
+};
+
+@protocol IPDFCameraViewControllerDelegate <NSObject>
+
+- (void)didDetectRectangle:(CIRectangleFeature *)rectangle withType:(IPDFRectangeType)type;
+
+@optional
+- (void)cameraViewController:(id)controller
+         didDetectRectangle:(CIRectangleFeature *)rectangle
+                   withType:(IPDFRectangeType)type
+            viewCoordinates:(NSDictionary *)viewCoordinates
+                  imageSize:(CGSize)imageSize;
+
+@end
+
+@interface IPDFCameraViewController : UIView
+
+- (void)setupCameraView;
+
+- (void)start;
+- (void)stop;
+
+@property (nonatomic, assign, getter=isBorderDetectionEnabled) BOOL enableBorderDetection;
+@property (nonatomic, assign, getter=isTorchEnabled) BOOL enableTorch;
+@property (nonatomic, assign, getter=isFrontCam) BOOL useFrontCam;
+
+@property (weak, nonatomic) id<IPDFCameraViewControllerDelegate> delegate;
+
+@property (nonatomic, assign) IPDFCameraViewType cameraViewType;
+
+- (void)focusAtPoint:(CGPoint)point completionHandler:(void(^)(void))completionHandler;
+
+- (void)captureImageWithCompletionHander:(void(^)(UIImage *data, UIImage *initialData, CIRectangleFeature *rectangleFeature))completionHandler;
+
+@property (nonatomic, strong) UIColor *overlayColor;
+@property (nonatomic, assign) float saturation;
+@property (nonatomic, assign) float contrast;
+@property (nonatomic, assign) float brightness;
+@property (nonatomic, assign) NSInteger detectionRefreshRateInMS;
+
+@end

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

@@ -251,6 +251,25 @@
                                      (CGFloat)_glkView.drawableWidth,
                                      (CGFloat)_glkView.drawableHeight);
 
+        if (self.delegate && _borderDetectLastRectangleFeature) {
+            IPDFRectangeType detectionType = [self typeForRectangle:_borderDetectLastRectangleFeature];
+
+            if ([self.delegate respondsToSelector:@selector(didDetectRectangle:withType:)]) {
+                [self.delegate didDetectRectangle:_borderDetectLastRectangleFeature withType:detectionType];
+            }
+
+            if ([self.delegate respondsToSelector:@selector(cameraViewController:didDetectRectangle:withType:viewCoordinates:imageSize:)]) {
+                NSDictionary *viewCoordinates = [self viewCoordinateDictionaryForRectangleFeature:_borderDetectLastRectangleFeature
+                                                                                          fromRect:fromRect
+                                                                                          drawRect:drawRect];
+                [self.delegate cameraViewController:self
+                               didDetectRectangle:_borderDetectLastRectangleFeature
+                                         withType:detectionType
+                                  viewCoordinates:viewCoordinates
+                                        imageSize:imageExtent.size];
+            }
+        }
+
         [_coreImageContext drawImage:image inRect:drawRect fromRect:fromRect];
         [self.context presentRenderbuffer:GL_RENDERBUFFER];
 
@@ -562,10 +581,6 @@
         }
     }
 
-    if (self.delegate) {
-        [self.delegate didDetectRectangle:biggestRectangle withType:[self typeForRectangle:biggestRectangle]];
-    }
-
     return biggestRectangle;
 }
 
@@ -584,6 +599,50 @@
     return IPDFRectangeTypeGood;
 }
 
+- (NSDictionary *)viewCoordinateDictionaryForRectangleFeature:(CIRectangleFeature *)rectangle
+                                                     fromRect:(CGRect)fromRect
+                                                     drawRect:(CGRect)drawRect
+{
+    if (!rectangle || !_glkView) {
+        return nil;
+    }
+
+    if (CGRectIsEmpty(fromRect) || CGRectIsEmpty(drawRect)) {
+        return nil;
+    }
+
+    CGFloat scaleFactor = _glkView.contentScaleFactor;
+    if (scaleFactor <= 0.0) {
+        scaleFactor = [UIScreen mainScreen].scale;
+    }
+    if (scaleFactor <= 0.0) {
+        scaleFactor = 1.0;
+    }
+
+    CGFloat scaleX = drawRect.size.width / fromRect.size.width;
+    CGFloat scaleY = drawRect.size.height / fromRect.size.height;
+
+    CGPoint (^convertPoint)(CGPoint) = ^CGPoint(CGPoint point) {
+        CGFloat translatedX = (point.x - fromRect.origin.x) * scaleX;
+        CGFloat translatedY = (point.y - fromRect.origin.y) * scaleY;
+        CGFloat flippedY = drawRect.size.height - translatedY;
+
+        return CGPointMake(translatedX / scaleFactor, flippedY / scaleFactor);
+    };
+
+    CGPoint topLeft = convertPoint(rectangle.topLeft);
+    CGPoint topRight = convertPoint(rectangle.topRight);
+    CGPoint bottomLeft = convertPoint(rectangle.bottomLeft);
+    CGPoint bottomRight = convertPoint(rectangle.bottomRight);
+
+    return @{
+        @"topLeft": @{@"x": @(topLeft.x), @"y": @(topLeft.y)},
+        @"topRight": @{@"x": @(topRight.x), @"y": @(topRight.y)},
+        @"bottomLeft": @{@"x": @(bottomLeft.x), @"y": @(bottomLeft.y)},
+        @"bottomRight": @{@"x": @(bottomRight.x), @"y": @(bottomRight.y)}
+    };
+}
+
 BOOL rectangleDetectionConfidenceHighEnough(float confidence)
 {
     return (confidence > 1.0);