npm - react-native-rectangle-doc-scanner - Versions diffs - 0.47.0 → 0.50.0 - Mend

react-native-rectangle-doc-scanner 0.47.0 → 0.50.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/CropEditor.js CHANGED Viewed

@@ -32,11 +32,14 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CropEditor = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const react_native_perspective_image_cropper_1 = require("react-native-perspective-image-cropper");
+const react_native_perspective_image_cropper_1 = __importDefault(require("react-native-perspective-image-cropper"));
 const coordinate_1 = require("./utils/coordinate");
 /**
  * CropEditor Component
@@ -97,7 +100,7 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
             react_1.default.createElement(react_native_1.Image, { source: { uri: `file://${document.path}` }, style: styles.hiddenImage, onLoad: handleImageLoad, resizeMode: "contain" })));
     }
     return (react_1.default.createElement(react_native_1.View, { style: styles.container, onLayout: handleLayout },
-        react_1.default.createElement(react_native_perspective_image_cropper_1.CustomImageCropper, { height: displaySize.height, width: displaySize.width, image: `file://${document.path}`, rectangleCoordinates: getInitialRectangle(), overlayColor: overlayColor, overlayStrokeColor: overlayStrokeColor, handlerColor: handlerColor, enablePanStrict: enablePanStrict, onDragEnd: handleDragEnd })));
+        react_1.default.createElement(react_native_perspective_image_cropper_1.default, { height: displaySize.height, width: displaySize.width, image: `file://${document.path}`, rectangleCoordinates: getInitialRectangle(), overlayColor: overlayColor, overlayStrokeColor: overlayStrokeColor, handlerColor: handlerColor, enablePanStrict: enablePanStrict, onDragEnd: handleDragEnd })));
 };
 exports.CropEditor = CropEditor;
 const styles = react_native_1.StyleSheet.create({

package/dist/FullDocScanner.d.ts ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/src/CropEditor.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import { View, StyleSheet, Image, Dimensions } from 'react-native';
-import { CustomImageCropper } from 'react-native-perspective-image-cropper';
+import CustomImageCropper from 'react-native-perspective-image-cropper';
 import type { Rectangle as CropperRectangle } from 'react-native-perspective-image-cropper';
 import type { Point, Rectangle, CapturedDocument } from './types';
 import { quadToRectangle, scaleRectangle } from './utils/coordinate';

package/src/FullDocScanner.tsx ADDED Viewed

@@ -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/external.d.ts CHANGED Viewed

@@ -131,4 +131,6 @@ declare module 'react-native-perspective-image-cropper' {
   };
   export const CustomImageCropper: ComponentType<CustomImageCropperProps>;
+  const CustomImageCropperDefault: ComponentType<CustomImageCropperProps>;
+  export default CustomImageCropperDefault;
 }

package/src/index.ts CHANGED Viewed

@@ -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';