react-native-rectangle-doc-scanner 0.46.0 → 0.49.0

package/dist/DocScanner.js

@@ -285,9 +285,20 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
             // Bilateral filter for edge-preserving smoothing (better quality than Gaussian)
             step = 'bilateralFilter';
             reportStage(step);
-            const tempMat = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Mat);
-            react_native_fast_opencv_1.OpenCV.invoke('bilateralFilter', mat, tempMat, 9, 75, 75);
-            mat = tempMat;
+            try {
+                const tempMat = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Mat);
+                react_native_fast_opencv_1.OpenCV.invoke('bilateralFilter', mat, tempMat, 9, 75, 75);
+                mat = tempMat;
+            }
+            catch (error) {
+                if (__DEV__) {
+                    console.warn('[DocScanner] bilateralFilter unavailable, falling back to GaussianBlur', error);
+                }
+                step = 'gaussianBlurFallback';
+                reportStage(step);
+                const blurKernel = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Size, 5, 5);
+                react_native_fast_opencv_1.OpenCV.invoke('GaussianBlur', mat, mat, blurKernel, 0);
+            }
             step = 'Canny';
             reportStage(step);
             // Configurable Canny parameters for adaptive edge detection

package/dist/FullDocScanner.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { CapturedDocument, Rectangle } from './types';
+import type { DetectionConfig } from './DocScanner';
+export interface FullDocScannerResult {
+    original: CapturedDocument;
+    rectangle: Rectangle | null;
+    /** Base64-encoded JPEG string returned by CustomCropManager */
+    base64: string;
+}
+export interface FullDocScannerStrings {
+    captureHint?: string;
+    manualHint?: string;
+    cancel?: string;
+    confirm?: string;
+    retake?: string;
+    cropTitle?: string;
+    processing?: string;
+}
+export interface FullDocScannerProps {
+    onResult: (result: FullDocScannerResult) => void;
+    onClose?: () => void;
+    detectionConfig?: DetectionConfig;
+    overlayColor?: string;
+    overlayStrokeColor?: string;
+    handlerColor?: string;
+    strings?: FullDocScannerStrings;
+    manualCapture?: boolean;
+    minStableFrames?: number;
+    onError?: (error: Error) => void;
+}
+export declare const FullDocScanner: React.FC<FullDocScannerProps>;

package/dist/FullDocScanner.js

@@ -0,0 +1,257 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullDocScanner = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const DocScanner_1 = require("./DocScanner");
+const CropEditor_1 = require("./CropEditor");
+const coordinate_1 = require("./utils/coordinate");
+const stripFileUri = (value) => value.replace(/^file:\/\//, '');
+const ensureFileUri = (value) => (value.startsWith('file://') ? value : `file://${value}`);
+const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3170f3', overlayStrokeColor = '#3170f3', handlerColor = '#3170f3', strings, manualCapture = false, minStableFrames, onError, }) => {
+    const [screen, setScreen] = (0, react_1.useState)('scanner');
+    const [capturedDoc, setCapturedDoc] = (0, react_1.useState)(null);
+    const [cropRectangle, setCropRectangle] = (0, react_1.useState)(null);
+    const [imageSize, setImageSize] = (0, react_1.useState)(null);
+    const [processing, setProcessing] = (0, react_1.useState)(false);
+    const mergedStrings = (0, react_1.useMemo)(() => ({
+        captureHint: strings?.captureHint ?? 'Align the document within the frame.',
+        manualHint: strings?.manualHint ?? 'Tap the button below to capture.',
+        cancel: strings?.cancel ?? 'Cancel',
+        confirm: strings?.confirm ?? 'Use photo',
+        retake: strings?.retake ?? 'Retake',
+        cropTitle: strings?.cropTitle ?? 'Adjust the corners',
+        processing: strings?.processing ?? 'Processing…',
+    }), [strings]);
+    (0, react_1.useEffect)(() => {
+        if (!capturedDoc) {
+            return;
+        }
+        react_native_1.Image.getSize(ensureFileUri(capturedDoc.path), (width, height) => setImageSize({ width, height }), () => setImageSize({ width: capturedDoc.width, height: capturedDoc.height }));
+    }, [capturedDoc]);
+    const resetState = (0, react_1.useCallback)(() => {
+        setScreen('scanner');
+        setCapturedDoc(null);
+        setCropRectangle(null);
+        setImageSize(null);
+        setProcessing(false);
+    }, []);
+    const handleCapture = (0, react_1.useCallback)((document) => {
+        const normalizedPath = stripFileUri(document.path);
+        const nextQuad = document.quad && document.quad.length === 4 ? document.quad : null;
+        setCapturedDoc({
+            ...document,
+            path: normalizedPath,
+            quad: nextQuad,
+        });
+        setCropRectangle(nextQuad ? (0, coordinate_1.quadToRectangle)(nextQuad) : null);
+        setScreen('crop');
+    }, []);
+    const handleCropChange = (0, react_1.useCallback)((rectangle) => {
+        setCropRectangle(rectangle);
+    }, []);
+    const emitError = (0, react_1.useCallback)((error, fallbackMessage) => {
+        console.error('[FullDocScanner] error', error);
+        onError?.(error);
+        if (!onError && fallbackMessage) {
+            react_native_1.Alert.alert('Document Scanner', fallbackMessage);
+        }
+    }, [onError]);
+    const performCrop = (0, react_1.useCallback)(async () => {
+        if (!capturedDoc) {
+            throw new Error('No captured document to crop');
+        }
+        const size = imageSize ?? { width: capturedDoc.width, height: capturedDoc.height };
+        const cropManager = react_native_1.NativeModules.CustomCropManager;
+        if (!cropManager?.crop) {
+            throw new Error('CustomCropManager.crop is not available');
+        }
+        const fallbackRectangle = capturedDoc.quad && capturedDoc.quad.length === 4
+            ? (0, coordinate_1.quadToRectangle)(capturedDoc.quad)
+            : null;
+        const scaledFallback = fallbackRectangle
+            ? (0, coordinate_1.scaleRectangle)(fallbackRectangle, capturedDoc.width, capturedDoc.height, size.width, size.height)
+            : null;
+        const rectangle = cropRectangle ?? scaledFallback;
+        const base64 = await new Promise((resolve, reject) => {
+            cropManager.crop({
+                topLeft: rectangle?.topLeft ?? { x: 0, y: 0 },
+                topRight: rectangle?.topRight ?? { x: size.width, y: 0 },
+                bottomRight: rectangle?.bottomRight ?? { x: size.width, y: size.height },
+                bottomLeft: rectangle?.bottomLeft ?? { x: 0, y: size.height },
+                width: size.width,
+                height: size.height,
+            }, ensureFileUri(capturedDoc.path), (error, result) => {
+                if (error) {
+                    reject(error instanceof Error ? error : new Error('Crop failed'));
+                    return;
+                }
+                resolve(result.image);
+            });
+        });
+        return base64;
+    }, [capturedDoc, cropRectangle, imageSize]);
+    const handleConfirm = (0, react_1.useCallback)(async () => {
+        if (!capturedDoc) {
+            return;
+        }
+        try {
+            setProcessing(true);
+            const base64 = await performCrop();
+            setProcessing(false);
+            onResult({
+                original: capturedDoc,
+                rectangle: cropRectangle,
+                base64,
+            });
+            resetState();
+        }
+        catch (error) {
+            setProcessing(false);
+            emitError(error instanceof Error ? error : new Error(String(error)), 'Failed to process document.');
+        }
+    }, [capturedDoc, cropRectangle, emitError, onResult, performCrop, resetState]);
+    const handleRetake = (0, react_1.useCallback)(() => {
+        resetState();
+    }, [resetState]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        resetState();
+        onClose?.();
+    }, [onClose, resetState]);
+    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
+        screen === 'scanner' && (react_1.default.createElement(react_native_1.View, { style: styles.flex },
+            react_1.default.createElement(DocScanner_1.DocScanner, { autoCapture: !manualCapture, overlayColor: overlayColor, minStableFrames: minStableFrames ?? 6, detectionConfig: detectionConfig, onCapture: handleCapture },
+                react_1.default.createElement(react_native_1.View, { style: styles.overlay, pointerEvents: "box-none" },
+                    react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.closeButton, onPress: handleClose, accessibilityLabel: mergedStrings.cancel, accessibilityRole: "button" },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.closeButtonLabel }, "\u00D7")),
+                    react_1.default.createElement(react_native_1.View, { style: styles.instructions, pointerEvents: "none" },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.captureText }, mergedStrings.captureHint),
+                        manualCapture && react_1.default.createElement(react_native_1.Text, { style: styles.captureText }, mergedStrings.manualHint)))))),
+        screen === 'crop' && capturedDoc && (react_1.default.createElement(react_native_1.View, { style: styles.flex },
+            react_1.default.createElement(CropEditor_1.CropEditor, { document: capturedDoc, overlayColor: "rgba(0,0,0,0.6)", overlayStrokeColor: overlayStrokeColor, handlerColor: handlerColor, onCropChange: handleCropChange }),
+            react_1.default.createElement(react_native_1.View, { style: styles.cropFooter },
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.actionButton, styles.secondaryButton], onPress: handleRetake },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.buttonText }, mergedStrings.retake)),
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.actionButton, styles.primaryButton], onPress: handleConfirm },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.buttonText }, mergedStrings.confirm))))),
+        processing && (react_1.default.createElement(react_native_1.View, { style: styles.processingOverlay },
+            react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: overlayStrokeColor }),
+            react_1.default.createElement(react_native_1.Text, { style: styles.processingText }, mergedStrings.processing)))));
+};
+exports.FullDocScanner = FullDocScanner;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#000',
+    },
+    flex: {
+        flex: 1,
+    },
+    overlay: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        justifyContent: 'space-between',
+        paddingTop: 48,
+        paddingBottom: 64,
+        paddingHorizontal: 24,
+    },
+    closeButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'flex-end',
+    },
+    closeButtonLabel: {
+        color: '#fff',
+        fontSize: 28,
+        lineHeight: 32,
+        marginTop: -3,
+    },
+    instructions: {
+        alignSelf: 'center',
+        backgroundColor: 'rgba(0,0,0,0.55)',
+        borderRadius: 16,
+        paddingHorizontal: 20,
+        paddingVertical: 16,
+    },
+    captureText: {
+        color: '#fff',
+        fontSize: 15,
+        textAlign: 'center',
+    },
+    cropFooter: {
+        position: 'absolute',
+        bottom: 40,
+        left: 20,
+        right: 20,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    actionButton: {
+        flex: 1,
+        paddingVertical: 14,
+        borderRadius: 12,
+        alignItems: 'center',
+        marginHorizontal: 6,
+    },
+    secondaryButton: {
+        backgroundColor: 'rgba(255,255,255,0.2)',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.35)',
+    },
+    primaryButton: {
+        backgroundColor: '#3170f3',
+    },
+    buttonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    processingOverlay: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0,0,0,0.65)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    processingText: {
+        marginTop: 12,
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+});

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { DocScanner } from './DocScanner';
 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 } from './DocScanner';
 export { quadToRectangle, rectangleToQuad, scaleCoordinates, scaleRectangle, } from './utils/coordinate';

package/dist/index.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.scaleRectangle = exports.scaleCoordinates = exports.rectangleToQuad = exports.quadToRectangle = exports.CropEditor = exports.DocScanner = void 0;
+exports.scaleRectangle = exports.scaleCoordinates = exports.rectangleToQuad = exports.quadToRectangle = exports.FullDocScanner = exports.CropEditor = exports.DocScanner = void 0;
 // Main components
 var DocScanner_1 = require("./DocScanner");
 Object.defineProperty(exports, "DocScanner", { enumerable: true, get: function () { return DocScanner_1.DocScanner; } });
 var CropEditor_1 = require("./CropEditor");
 Object.defineProperty(exports, "CropEditor", { enumerable: true, get: function () { return CropEditor_1.CropEditor; } });
+var FullDocScanner_1 = require("./FullDocScanner");
+Object.defineProperty(exports, "FullDocScanner", { enumerable: true, get: function () { return FullDocScanner_1.FullDocScanner; } });
 // Utilities
 var coordinate_1 = require("./utils/coordinate");
 Object.defineProperty(exports, "quadToRectangle", { enumerable: true, get: function () { return coordinate_1.quadToRectangle; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "0.46.0",
+  "version": "0.49.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {

package/src/DocScanner.tsx

@@ -352,9 +352,19 @@ export const DocScanner: React.FC<Props> = ({
       // Bilateral filter for edge-preserving smoothing (better quality than Gaussian)
       step = 'bilateralFilter';
       reportStage(step);
-      const tempMat = OpenCV.createObject(ObjectType.Mat);
-      OpenCV.invoke('bilateralFilter', mat, tempMat, 9, 75, 75);
-      mat = tempMat;
+      try {
+        const tempMat = OpenCV.createObject(ObjectType.Mat);
+        OpenCV.invoke('bilateralFilter', mat, tempMat, 9, 75, 75);
+        mat = tempMat;
+      } catch (error) {
+        if (__DEV__) {
+          console.warn('[DocScanner] bilateralFilter unavailable, falling back to GaussianBlur', error);
+        }
+        step = 'gaussianBlurFallback';
+        reportStage(step);
+        const blurKernel = OpenCV.createObject(ObjectType.Size, 5, 5);
+        OpenCV.invoke('GaussianBlur', mat, mat, blurKernel, 0);
+      }
 
       step = 'Canny';
       reportStage(step);

package/src/FullDocScanner.tsx

@@ -0,0 +1,376 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  Alert,
+  Image,
+  NativeModules,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { DocScanner } from './DocScanner';
+import { CropEditor } from './CropEditor';
+import type { CapturedDocument, Point, Quad, Rectangle } from './types';
+import type { DetectionConfig } from './DocScanner';
+import { quadToRectangle, scaleRectangle } from './utils/coordinate';
+
+type CustomCropManagerType = {
+  crop: (
+    points: {
+      topLeft: Point;
+      topRight: Point;
+      bottomRight: Point;
+      bottomLeft: Point;
+      width: number;
+      height: number;
+    },
+    imageUri: string,
+    callback: (error: unknown, result: { image: string }) => void,
+  ) => void;
+};
+
+const stripFileUri = (value: string) => value.replace(/^file:\/\//, '');
+
+const ensureFileUri = (value: string) => (value.startsWith('file://') ? value : `file://${value}`);
+
+export interface FullDocScannerResult {
+  original: CapturedDocument;
+  rectangle: Rectangle | null;
+  /** Base64-encoded JPEG string returned by CustomCropManager */
+  base64: string;
+}
+
+export interface FullDocScannerStrings {
+  captureHint?: string;
+  manualHint?: string;
+  cancel?: string;
+  confirm?: string;
+  retake?: string;
+  cropTitle?: string;
+  processing?: string;
+}
+
+export interface FullDocScannerProps {
+  onResult: (result: FullDocScannerResult) => void;
+  onClose?: () => void;
+  detectionConfig?: DetectionConfig;
+  overlayColor?: string;
+  overlayStrokeColor?: string;
+  handlerColor?: string;
+  strings?: FullDocScannerStrings;
+  manualCapture?: boolean;
+  minStableFrames?: number;
+  onError?: (error: Error) => void;
+}
+
+type ScreenState = 'scanner' | 'crop';
+
+export const FullDocScanner: React.FC<FullDocScannerProps> = ({
+  onResult,
+  onClose,
+  detectionConfig,
+  overlayColor = '#3170f3',
+  overlayStrokeColor = '#3170f3',
+  handlerColor = '#3170f3',
+  strings,
+  manualCapture = false,
+  minStableFrames,
+  onError,
+}) => {
+  const [screen, setScreen] = useState<ScreenState>('scanner');
+  const [capturedDoc, setCapturedDoc] = useState<CapturedDocument | null>(null);
+  const [cropRectangle, setCropRectangle] = useState<Rectangle | null>(null);
+  const [imageSize, setImageSize] = useState<{ width: number; height: number } | null>(null);
+  const [processing, setProcessing] = useState(false);
+
+  const mergedStrings = useMemo<Required<FullDocScannerStrings>>(
+    () => ({
+      captureHint: strings?.captureHint ?? 'Align the document within the frame.',
+      manualHint: strings?.manualHint ?? 'Tap the button below to capture.',
+      cancel: strings?.cancel ?? 'Cancel',
+      confirm: strings?.confirm ?? 'Use photo',
+      retake: strings?.retake ?? 'Retake',
+      cropTitle: strings?.cropTitle ?? 'Adjust the corners',
+      processing: strings?.processing ?? 'Processing…',
+    }),
+    [strings],
+  );
+
+  useEffect(() => {
+    if (!capturedDoc) {
+      return;
+    }
+
+    Image.getSize(
+      ensureFileUri(capturedDoc.path),
+      (width, height) => setImageSize({ width, height }),
+      () => setImageSize({ width: capturedDoc.width, height: capturedDoc.height }),
+    );
+  }, [capturedDoc]);
+
+  const resetState = useCallback(() => {
+    setScreen('scanner');
+    setCapturedDoc(null);
+    setCropRectangle(null);
+    setImageSize(null);
+    setProcessing(false);
+  }, []);
+
+  const handleCapture = useCallback(
+    (document: CapturedDocument) => {
+      const normalizedPath = stripFileUri(document.path);
+      const nextQuad = document.quad && document.quad.length === 4 ? (document.quad as Quad) : null;
+
+      setCapturedDoc({
+        ...document,
+        path: normalizedPath,
+        quad: nextQuad,
+      });
+      setCropRectangle(nextQuad ? quadToRectangle(nextQuad) : null);
+      setScreen('crop');
+    },
+    [],
+  );
+
+  const handleCropChange = useCallback((rectangle: Rectangle) => {
+    setCropRectangle(rectangle);
+  }, []);
+
+  const emitError = useCallback(
+    (error: Error, fallbackMessage?: string) => {
+      console.error('[FullDocScanner] error', error);
+      onError?.(error);
+      if (!onError && fallbackMessage) {
+        Alert.alert('Document Scanner', fallbackMessage);
+      }
+    },
+    [onError],
+  );
+
+  const performCrop = useCallback(async (): Promise<string> => {
+    if (!capturedDoc) {
+      throw new Error('No captured document to crop');
+    }
+
+    const size = imageSize ?? { width: capturedDoc.width, height: capturedDoc.height };
+    const cropManager = NativeModules.CustomCropManager as CustomCropManagerType | undefined;
+
+    if (!cropManager?.crop) {
+      throw new Error('CustomCropManager.crop is not available');
+    }
+
+    const fallbackRectangle =
+      capturedDoc.quad && capturedDoc.quad.length === 4
+        ? quadToRectangle(capturedDoc.quad as Quad)
+        : null;
+
+    const scaledFallback = fallbackRectangle
+      ? scaleRectangle(
+          fallbackRectangle,
+          capturedDoc.width,
+          capturedDoc.height,
+          size.width,
+          size.height,
+        )
+      : null;
+
+    const rectangle = cropRectangle ?? scaledFallback;
+
+    const base64 = await new Promise<string>((resolve, reject) => {
+      cropManager.crop(
+        {
+          topLeft: rectangle?.topLeft ?? { x: 0, y: 0 },
+          topRight: rectangle?.topRight ?? { x: size.width, y: 0 },
+          bottomRight: rectangle?.bottomRight ?? { x: size.width, y: size.height },
+          bottomLeft: rectangle?.bottomLeft ?? { x: 0, y: size.height },
+          width: size.width,
+          height: size.height,
+        },
+        ensureFileUri(capturedDoc.path),
+        (error: unknown, result: { image: string }) => {
+          if (error) {
+            reject(error instanceof Error ? error : new Error('Crop failed'));
+            return;
+          }
+
+          resolve(result.image);
+        },
+      );
+    });
+
+    return base64;
+  }, [capturedDoc, cropRectangle, imageSize]);
+
+  const handleConfirm = useCallback(async () => {
+    if (!capturedDoc) {
+      return;
+    }
+
+    try {
+      setProcessing(true);
+      const base64 = await performCrop();
+      setProcessing(false);
+      onResult({
+        original: capturedDoc,
+        rectangle: cropRectangle,
+        base64,
+      });
+      resetState();
+    } catch (error) {
+      setProcessing(false);
+      emitError(error instanceof Error ? error : new Error(String(error)), 'Failed to process document.');
+    }
+  }, [capturedDoc, cropRectangle, emitError, onResult, performCrop, resetState]);
+
+  const handleRetake = useCallback(() => {
+    resetState();
+  }, [resetState]);
+
+  const handleClose = useCallback(() => {
+    resetState();
+    onClose?.();
+  }, [onClose, resetState]);
+
+  return (
+    <View style={styles.container}>
+      {screen === 'scanner' && (
+        <View style={styles.flex}>
+          <DocScanner
+            autoCapture={!manualCapture}
+            overlayColor={overlayColor}
+            minStableFrames={minStableFrames ?? 6}
+            detectionConfig={detectionConfig}
+            onCapture={handleCapture}
+          >
+            <View style={styles.overlay} pointerEvents="box-none">
+              <TouchableOpacity
+                style={styles.closeButton}
+                onPress={handleClose}
+                accessibilityLabel={mergedStrings.cancel}
+                accessibilityRole="button"
+              >
+                <Text style={styles.closeButtonLabel}>×</Text>
+              </TouchableOpacity>
+              <View style={styles.instructions} pointerEvents="none">
+                <Text style={styles.captureText}>{mergedStrings.captureHint}</Text>
+                {manualCapture && <Text style={styles.captureText}>{mergedStrings.manualHint}</Text>}
+              </View>
+            </View>
+          </DocScanner>
+        </View>
+      )}
+
+      {screen === 'crop' && capturedDoc && (
+        <View style={styles.flex}>
+          <CropEditor
+            document={capturedDoc}
+            overlayColor="rgba(0,0,0,0.6)"
+            overlayStrokeColor={overlayStrokeColor}
+            handlerColor={handlerColor}
+            onCropChange={handleCropChange}
+          />
+          <View style={styles.cropFooter}>
+            <TouchableOpacity style={[styles.actionButton, styles.secondaryButton]} onPress={handleRetake}>
+              <Text style={styles.buttonText}>{mergedStrings.retake}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={[styles.actionButton, styles.primaryButton]} onPress={handleConfirm}>
+              <Text style={styles.buttonText}>{mergedStrings.confirm}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+
+      {processing && (
+        <View style={styles.processingOverlay}>
+          <ActivityIndicator size="large" color={overlayStrokeColor} />
+          <Text style={styles.processingText}>{mergedStrings.processing}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  flex: {
+    flex: 1,
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'space-between',
+    paddingTop: 48,
+    paddingBottom: 64,
+    paddingHorizontal: 24,
+  },
+  closeButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'flex-end',
+  },
+  closeButtonLabel: {
+    color: '#fff',
+    fontSize: 28,
+    lineHeight: 32,
+    marginTop: -3,
+  },
+  instructions: {
+    alignSelf: 'center',
+    backgroundColor: 'rgba(0,0,0,0.55)',
+    borderRadius: 16,
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+  },
+  captureText: {
+    color: '#fff',
+    fontSize: 15,
+    textAlign: 'center',
+  },
+  cropFooter: {
+    position: 'absolute',
+    bottom: 40,
+    left: 20,
+    right: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  actionButton: {
+    flex: 1,
+    paddingVertical: 14,
+    borderRadius: 12,
+    alignItems: 'center',
+    marginHorizontal: 6,
+  },
+  secondaryButton: {
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.35)',
+  },
+  primaryButton: {
+    backgroundColor: '#3170f3',
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  processingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.65)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  processingText: {
+    marginTop: 12,
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/index.ts

@@ -1,6 +1,13 @@
 // Main components
 export { DocScanner } from './DocScanner';
 export { CropEditor } from './CropEditor';
+export { FullDocScanner } from './FullDocScanner';
+
+export type {
+  FullDocScannerResult,
+  FullDocScannerProps,
+  FullDocScannerStrings,
+} from './FullDocScanner';
 
 // Types
 export type { Point, Quad, Rectangle, CapturedDocument } from './types';