react-native-rectangle-doc-scanner 3.41.0 → 3.43.1

package/SETUP.md

@@ -0,0 +1,186 @@
+# Setup Instructions
+
+## 업데이트 내용 (v3.41.0)
+
+이제 `FullDocScanner`가 `react-native-image-crop-picker`를 사용해서 크롭합니다!
+
+### 주요 변경사항
+
+1. **수동 촬영 후 자동으로 cropper 실행**
+   - 수동/자동 촬영 후 바로 `react-native-image-crop-picker`의 cropper가 실행됩니다
+   - 사용자가 직접 이미지를 자를 수 있습니다
+
+2. **갤러리 버튼 추가**
+   - 촬영 버튼 옆에 갤러리 버튼이 추가되었습니다 (📁)
+   - 갤러리에서 이미지를 선택하고 바로 크롭할 수 있습니다
+
+3. **간소화된 API**
+   - `CropEditor` 화면 제거
+   - `onResult` 콜백이 이제 `{ path, base64 }` 형태로 결과를 반환합니다
+
+## 빌드 방법
+
+```bash
+# 1. 패키지 디렉토리로 이동
+cd /Users/tt-mac-03/Documents/workspace/react-native-doc-scanner/react-native-rectangle-doc-scanner
+
+# 2. TypeScript 빌드
+npm run build
+# 또는
+yarn build
+```
+
+## tdb 프로젝트에 설치
+
+### 1. 필수 peer dependencies 설치
+
+tdb 프로젝트에서 다음 패키지들을 설치해야 합니다:
+
+```bash
+cd /Users/tt-mac-03/Documents/workspace/tdb
+
+npm install react-native-image-picker react-native-image-crop-picker
+# 또는
+yarn add react-native-image-picker react-native-image-crop-picker
+```
+
+### 2. iOS 설정 (react-native-image-picker)
+
+`tdb/ios/Podfile`에 다음 권한 추가:
+
+```ruby
+post_install do |installer|
+  installer.pods_project.targets.each do |target|
+    target.build_configurations.each do |config|
+      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)']
+    end
+  end
+end
+```
+
+`tdb/ios/tdb/Info.plist`에 권한 추가:
+
+```xml
+<key>NSPhotoLibraryUsageDescription</key>
+<string>문서를 선택하기 위해 갤러리 접근이 필요합니다</string>
+<key>NSCameraUsageDescription</key>
+<string>문서를 촬영하기 위해 카메라 접근이 필요합니다</string>
+```
+
+### 3. iOS pod install
+
+```bash
+cd /Users/tt-mac-03/Documents/workspace/tdb/ios
+pod install
+```
+
+### 4. 패키지 재설치
+
+```bash
+cd /Users/tt-mac-03/Documents/workspace/tdb
+
+# 기존 설치 제거
+rm -rf node_modules/react-native-rectangle-doc-scanner
+
+# 재설치
+npm install
+# 또는
+yarn install
+```
+
+## 사용 방법
+
+```typescript
+import { FullDocScanner } from 'react-native-rectangle-doc-scanner';
+import type { FullDocScannerResult } from 'react-native-rectangle-doc-scanner';
+
+function MyComponent() {
+  const handleResult = (result: FullDocScannerResult) => {
+    console.log('Cropped image path:', result.path);
+    console.log('Base64:', result.base64);
+  };
+
+  return (
+    <FullDocScanner
+      onResult={handleResult}
+      onClose={() => console.log('Closed')}
+      enableGallery={true}
+      strings={{
+        captureHint: '문서를 프레임 안에 맞춰주세요',
+        manualHint: '아래 버튼을 눌러 촬영하세요',
+        cancel: '취소',
+        processing: '처리 중...',
+        galleryButton: '갤러리',
+      }}
+    />
+  );
+}
+```
+
+## API 변경사항
+
+### FullDocScannerResult (변경됨)
+
+**이전:**
+```typescript
+{
+  original: CapturedDocument;
+  rectangle: Rectangle | null;
+  base64: string;
+}
+```
+
+**현재:**
+```typescript
+{
+  path: string;              // 크롭된 이미지 파일 경로
+  base64?: string;           // Base64 인코딩된 이미지
+  original?: CapturedDocument; // 원본 문서 정보 (옵션)
+}
+```
+
+### FullDocScannerStrings (변경됨)
+
+**제거된 필드:**
+- `confirm` (cropper에서 사용)
+- `retake` (cropper에서 사용)
+- `cropTitle` (cropper에서 사용)
+
+**추가된 필드:**
+- `galleryButton` (갤러리 버튼 레이블)
+
+### Props (추가됨)
+
+- `enableGallery?: boolean` - 갤러리 버튼 표시 여부 (기본값: `true`)
+- `cropWidth?: number` - 크롭 너비 (기본값: `1200`)
+- `cropHeight?: number` - 크롭 높이 (기본값: `1600`)
+
+## 문제 해결
+
+### "Cannot find module 'react-native-image-picker'"
+
+peer dependency를 설치하지 않았습니다:
+```bash
+npm install react-native-image-picker react-native-image-crop-picker
+```
+
+### iOS 빌드 에러
+
+1. pod install 실행:
+```bash
+cd ios && pod install
+```
+
+2. Info.plist에 권한 추가 확인
+
+### TypeScript 타입 에러
+
+패키지를 다시 빌드하고 재설치:
+```bash
+cd /Users/tt-mac-03/Documents/workspace/react-native-doc-scanner/react-native-rectangle-doc-scanner
+npm run build
+
+cd /Users/tt-mac-03/Documents/workspace/tdb
+rm -rf node_modules/react-native-rectangle-doc-scanner
+npm install
+```

package/dist/FullDocScanner.d.ts

@@ -1,20 +1,20 @@
 import React from 'react';
-import type { CapturedDocument, Rectangle } from './types';
+import type { CapturedDocument } from './types';
 import type { DetectionConfig } from './DocScanner';
 export interface FullDocScannerResult {
-    original: CapturedDocument;
-    rectangle: Rectangle | null;
-    /** Base64-encoded JPEG string returned by CustomCropManager */
-    base64: string;
+    /** File path to the cropped image */
+    path: string;
+    /** Base64-encoded image string (optional) */
+    base64?: string;
+    /** Original captured document info */
+    original?: CapturedDocument;
 }
 export interface FullDocScannerStrings {
     captureHint?: string;
     manualHint?: string;
     cancel?: string;
-    confirm?: string;
-    retake?: string;
-    cropTitle?: string;
     processing?: string;
+    galleryButton?: string;
 }
 export interface FullDocScannerProps {
     onResult: (result: FullDocScannerResult) => void;
@@ -24,11 +24,12 @@ export interface FullDocScannerProps {
     gridColor?: string;
     gridLineWidth?: number;
     showGrid?: boolean;
-    overlayStrokeColor?: string;
-    handlerColor?: string;
     strings?: FullDocScannerStrings;
     manualCapture?: boolean;
     minStableFrames?: number;
     onError?: (error: Error) => void;
+    enableGallery?: boolean;
+    cropWidth?: number;
+    cropHeight?: number;
 }
 export declare const FullDocScanner: React.FC<FullDocScannerProps>;

package/dist/FullDocScanner.js

@@ -32,21 +32,17 @@ 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.FullDocScanner = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const react_native_image_picker_1 = require("react-native-image-picker");
+const react_native_image_crop_picker_1 = __importDefault(require("react-native-image-crop-picker"));
 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 resolveImageSize = (path, fallbackWidth, fallbackHeight) => new Promise((resolve) => {
-    react_native_1.Image.getSize(ensureFileUri(path), (width, height) => resolve({ width, height }), () => resolve({
-        width: fallbackWidth > 0 ? fallbackWidth : 0,
-        height: fallbackHeight > 0 ? fallbackHeight : 0,
-    }));
-});
 const normalizeCapturedDocument = (document) => {
     const { origin: _origin, ...rest } = document;
     const normalizedPath = stripFileUri(document.initialPath ?? document.path);
@@ -57,61 +53,18 @@ const normalizeCapturedDocument = (document) => {
         croppedPath: document.croppedPath ? stripFileUri(document.croppedPath) : null,
     };
 };
-const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3170f3', gridColor, gridLineWidth, showGrid, 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 FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3170f3', gridColor, gridLineWidth, showGrid, strings, manualCapture = false, minStableFrames, onError, enableGallery = true, cropWidth = 1200, cropHeight = 1600, }) => {
     const [processing, setProcessing] = (0, react_1.useState)(false);
     const resolvedGridColor = gridColor ?? overlayColor;
     const docScannerRef = (0, react_1.useRef)(null);
     const manualCapturePending = (0, react_1.useRef)(false);
-    const processingCaptureRef = (0, react_1.useRef)(false);
-    const cropInitializedRef = (0, react_1.useRef)(false);
     const mergedStrings = (0, react_1.useMemo)(() => ({
         captureHint: strings?.captureHint,
         manualHint: strings?.manualHint,
         cancel: strings?.cancel,
-        confirm: strings?.confirm,
-        retake: strings?.retake,
-        cropTitle: strings?.cropTitle,
         processing: strings?.processing,
+        galleryButton: strings?.galleryButton,
     }), [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]);
-    (0, react_1.useEffect)(() => {
-        if (!capturedDoc || !imageSize || cropInitializedRef.current) {
-            return;
-        }
-        const baseWidth = capturedDoc.width > 0 ? capturedDoc.width : imageSize.width;
-        const baseHeight = capturedDoc.height > 0 ? capturedDoc.height : imageSize.height;
-        let initialRectangle = null;
-        if (capturedDoc.rectangle) {
-            initialRectangle = (0, coordinate_1.scaleRectangle)(capturedDoc.rectangle, baseWidth, baseHeight, imageSize.width, imageSize.height);
-        }
-        else if (capturedDoc.quad && capturedDoc.quad.length === 4) {
-            const quadRectangle = (0, coordinate_1.quadToRectangle)(capturedDoc.quad);
-            if (quadRectangle) {
-                initialRectangle = (0, coordinate_1.scaleRectangle)(quadRectangle, baseWidth, baseHeight, imageSize.width, imageSize.height);
-            }
-        }
-        cropInitializedRef.current = true;
-        setCropRectangle(initialRectangle ?? (0, coordinate_1.createFullImageRectangle)(imageSize.width || 1, imageSize.height || 1));
-    }, [capturedDoc, imageSize]);
-    const resetState = (0, react_1.useCallback)(() => {
-        setScreen('scanner');
-        setCapturedDoc(null);
-        setCropRectangle(null);
-        setImageSize(null);
-        setProcessing(false);
-        manualCapturePending.current = false;
-        processingCaptureRef.current = false;
-        cropInitializedRef.current = false;
-    }, []);
     const emitError = (0, react_1.useCallback)((error, fallbackMessage) => {
         console.error('[FullDocScanner] error', error);
         onError?.(error);
@@ -119,108 +72,48 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             react_native_1.Alert.alert('Document Scanner', fallbackMessage);
         }
     }, [onError]);
-    const processAutoCapture = (0, react_1.useCallback)(async (document) => {
-        console.log('[FullDocScanner] processAutoCapture started');
-        manualCapturePending.current = false;
-        const normalizedDoc = normalizeCapturedDocument(document);
-        const cropManager = react_native_1.NativeModules.CustomCropManager;
-        if (!cropManager?.crop) {
-            console.error('[FullDocScanner] CustomCropManager.crop is not available');
-            emitError(new Error('CustomCropManager.crop is not available'));
-            return;
-        }
-        console.log('[FullDocScanner] Setting processing to true');
-        setProcessing(true);
+    const openCropper = (0, react_1.useCallback)(async (imagePath) => {
         try {
-            const size = await resolveImageSize(normalizedDoc.path, normalizedDoc.width, normalizedDoc.height);
-            const targetWidthRaw = size.width > 0 ? size.width : normalizedDoc.width;
-            const targetHeightRaw = size.height > 0 ? size.height : normalizedDoc.height;
-            const baseWidth = normalizedDoc.width > 0 ? normalizedDoc.width : targetWidthRaw;
-            const baseHeight = normalizedDoc.height > 0 ? normalizedDoc.height : targetHeightRaw;
-            const targetWidth = targetWidthRaw > 0 ? targetWidthRaw : baseWidth || 1;
-            const targetHeight = targetHeightRaw > 0 ? targetHeightRaw : baseHeight || 1;
-            let rectangleBase = normalizedDoc.rectangle ?? null;
-            if (!rectangleBase && normalizedDoc.quad && normalizedDoc.quad.length === 4) {
-                rectangleBase = (0, coordinate_1.quadToRectangle)(normalizedDoc.quad);
-            }
-            const scaledRectangle = rectangleBase
-                ? (0, coordinate_1.scaleRectangle)(rectangleBase, baseWidth || targetWidth, baseHeight || targetHeight, targetWidth, targetHeight)
-                : null;
-            const rectangleToUse = scaledRectangle ?? (0, coordinate_1.createFullImageRectangle)(targetWidth, targetHeight);
-            console.log('[FullDocScanner] Calling CustomCropManager.crop with:', {
-                rectangle: rectangleToUse,
-                imageUri: ensureFileUri(normalizedDoc.path),
-                targetSize: { width: targetWidth, height: targetHeight },
-            });
-            const base64 = await new Promise((resolve, reject) => {
-                cropManager.crop({
-                    topLeft: rectangleToUse.topLeft,
-                    topRight: rectangleToUse.topRight,
-                    bottomRight: rectangleToUse.bottomRight,
-                    bottomLeft: rectangleToUse.bottomLeft,
-                    width: targetWidth,
-                    height: targetHeight,
-                }, ensureFileUri(normalizedDoc.path), (error, result) => {
-                    if (error) {
-                        console.error('[FullDocScanner] CustomCropManager.crop error:', error);
-                        reject(error instanceof Error ? error : new Error('Crop failed'));
-                        return;
-                    }
-                    console.log('[FullDocScanner] CustomCropManager.crop success, base64 length:', result.image?.length);
-                    resolve(result.image);
-                });
+            setProcessing(true);
+            const croppedImage = await react_native_image_crop_picker_1.default.openCropper({
+                path: imagePath,
+                mediaType: 'photo',
+                width: cropWidth,
+                height: cropHeight,
+                cropping: true,
+                cropperToolbarTitle: 'Crop Document',
+                freeStyleCropEnabled: true,
+                includeBase64: true,
+                compressImageQuality: 0.9,
             });
-            const finalDoc = {
-                ...normalizedDoc,
-                rectangle: rectangleToUse,
-            };
-            console.log('[FullDocScanner] Calling onResult with base64 length:', base64?.length);
+            setProcessing(false);
             onResult({
-                original: finalDoc,
-                rectangle: rectangleToUse,
-                base64,
+                path: croppedImage.path,
+                base64: croppedImage.data ?? undefined,
             });
-            console.log('[FullDocScanner] Resetting state');
-            resetState();
         }
         catch (error) {
             setProcessing(false);
-            emitError(error instanceof Error ? error : new Error(String(error)), 'Failed to process document.');
-        }
-        finally {
-            processingCaptureRef.current = false;
+            if (error?.message !== 'User cancelled image selection') {
+                emitError(error instanceof Error ? error : new Error(String(error)), 'Failed to crop image.');
+            }
         }
-    }, [emitError, onResult, resetState]);
-    const handleCapture = (0, react_1.useCallback)((document) => {
+    }, [cropWidth, cropHeight, emitError, onResult]);
+    const handleCapture = (0, react_1.useCallback)(async (document) => {
         console.log('[FullDocScanner] handleCapture called:', {
             origin: document.origin,
             path: document.path,
-            width: document.width,
-            height: document.height,
-            hasQuad: !!document.quad,
-            hasRectangle: !!document.rectangle,
         });
-        if (processingCaptureRef.current) {
-            console.log('[FullDocScanner] Already processing, skipping');
-            return;
+        if (manualCapturePending.current) {
+            manualCapturePending.current = false;
         }
         const normalizedDoc = normalizeCapturedDocument(document);
-        // 자동 촬영이든 수동 촬영이든 모두 crop 화면으로 이동
-        console.log('[FullDocScanner] Moving to crop/preview screen');
-        manualCapturePending.current = false;
-        processingCaptureRef.current = false;
-        cropInitializedRef.current = false;
-        setCapturedDoc(normalizedDoc);
-        setImageSize(null);
-        setCropRectangle(null);
-        setScreen('crop');
-    }, []);
-    const handleCropChange = (0, react_1.useCallback)((rectangle) => {
-        setCropRectangle(rectangle);
-    }, []);
+        // Open cropper with the captured image
+        await openCropper(normalizedDoc.path);
+    }, [openCropper]);
     const triggerManualCapture = (0, react_1.useCallback)(() => {
         console.log('[FullDocScanner] triggerManualCapture called');
-        if (processingCaptureRef.current) {
+        if (processing) {
             console.log('[FullDocScanner] Already processing, skipping manual capture');
             return;
         }
@@ -231,7 +124,6 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         console.log('[FullDocScanner] Setting manualCapturePending to true');
         manualCapturePending.current = true;
         const capturePromise = docScannerRef.current?.capture();
-        console.log('[FullDocScanner] capturePromise:', !!capturePromise);
         if (capturePromise && typeof capturePromise.then === 'function') {
             capturePromise
                 .then(() => {
@@ -246,82 +138,36 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             console.warn('[FullDocScanner] No capture promise returned');
             manualCapturePending.current = false;
         }
-    }, []);
-    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 baseWidth = capturedDoc.width > 0 ? capturedDoc.width : size.width;
-        const baseHeight = capturedDoc.height > 0 ? capturedDoc.height : size.height;
-        const targetWidth = size.width > 0 ? size.width : baseWidth || 1;
-        const targetHeight = size.height > 0 ? size.height : baseHeight || 1;
-        let fallbackRectangle = null;
-        if (capturedDoc.rectangle) {
-            fallbackRectangle = (0, coordinate_1.scaleRectangle)(capturedDoc.rectangle, baseWidth || targetWidth, baseHeight || targetHeight, targetWidth, targetHeight);
-        }
-        else if (capturedDoc.quad && capturedDoc.quad.length === 4) {
-            const quadRectangle = (0, coordinate_1.quadToRectangle)(capturedDoc.quad);
-            if (quadRectangle) {
-                fallbackRectangle = (0, coordinate_1.scaleRectangle)(quadRectangle, baseWidth || targetWidth, baseHeight || targetHeight, targetWidth, targetHeight);
-            }
-        }
-        const rectangleToUse = cropRectangle ?? fallbackRectangle ?? (0, coordinate_1.createFullImageRectangle)(targetWidth, targetHeight);
-        const base64 = await new Promise((resolve, reject) => {
-            cropManager.crop({
-                topLeft: rectangleToUse.topLeft,
-                topRight: rectangleToUse.topRight,
-                bottomRight: rectangleToUse.bottomRight,
-                bottomLeft: rectangleToUse.bottomLeft,
-                width: targetWidth,
-                height: targetHeight,
-            }, ensureFileUri(capturedDoc.path), (error, result) => {
-                if (error) {
-                    reject(error instanceof Error ? error : new Error('Crop failed'));
-                    return;
-                }
-                resolve(result.image);
-            });
-        });
-        return { base64, rectangle: rectangleToUse };
-    }, [capturedDoc, cropRectangle, imageSize]);
-    const handleConfirm = (0, react_1.useCallback)(async () => {
-        if (!capturedDoc) {
+    }, [processing]);
+    const handleGalleryPick = (0, react_1.useCallback)(async () => {
+        console.log('[FullDocScanner] handleGalleryPick called');
+        if (processing) {
             return;
         }
         try {
-            setProcessing(true);
-            const { base64, rectangle } = await performCrop();
-            setProcessing(false);
-            const finalDoc = {
-                ...capturedDoc,
-                rectangle,
-            };
-            onResult({
-                original: finalDoc,
-                rectangle,
-                base64,
+            const result = await (0, react_native_image_picker_1.launchImageLibrary)({
+                mediaType: 'photo',
+                quality: 1,
+                selectionLimit: 1,
             });
-            resetState();
+            if (result.didCancel || !result.assets?.[0]?.uri) {
+                console.log('[FullDocScanner] User cancelled gallery picker');
+                return;
+            }
+            const imageUri = result.assets[0].uri;
+            console.log('[FullDocScanner] Gallery image selected:', imageUri);
+            // Open cropper with the selected image
+            await openCropper(imageUri);
         }
         catch (error) {
-            setProcessing(false);
-            emitError(error instanceof Error ? error : new Error(String(error)), 'Failed to process document.');
+            emitError(error instanceof Error ? error : new Error(String(error)), 'Failed to pick image from gallery.');
         }
-    }, [capturedDoc, emitError, onResult, performCrop, resetState]);
-    const handleRetake = (0, react_1.useCallback)(() => {
-        resetState();
-    }, [resetState]);
+    }, [processing, openCropper, emitError]);
     const handleClose = (0, react_1.useCallback)(() => {
-        resetState();
         onClose?.();
-    }, [onClose, resetState]);
+    }, [onClose]);
     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(react_native_1.View, { style: styles.flex },
             react_1.default.createElement(DocScanner_1.DocScanner, { ref: docScannerRef, autoCapture: !manualCapture, overlayColor: overlayColor, showGrid: showGrid, gridColor: resolvedGridColor, gridLineWidth: gridLineWidth, minStableFrames: minStableFrames ?? 6, detectionConfig: detectionConfig, onCapture: handleCapture, showManualCaptureButton: false },
                 react_1.default.createElement(react_native_1.View, { style: styles.overlayTop, pointerEvents: "box-none" },
                     react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.closeButton, onPress: handleClose, accessibilityLabel: mergedStrings.cancel, accessibilityRole: "button" },
@@ -331,15 +177,12 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                         mergedStrings.captureHint && (react_1.default.createElement(react_native_1.Text, { style: styles.captureText }, mergedStrings.captureHint)),
                         mergedStrings.manualHint && (react_1.default.createElement(react_native_1.Text, { style: styles.captureText }, mergedStrings.manualHint))))),
                 react_1.default.createElement(react_native_1.View, { style: styles.shutterContainer, pointerEvents: "box-none" },
-                    react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.shutterButton, processing && styles.shutterButtonDisabled], onPress: triggerManualCapture, disabled: processing, accessibilityLabel: mergedStrings.manualHint, accessibilityRole: "button" },
-                        react_1.default.createElement(react_native_1.View, { style: styles.shutterInner })))))),
-        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 }, mergedStrings.retake && 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 }, mergedStrings.confirm && react_1.default.createElement(react_native_1.Text, { style: styles.buttonText }, mergedStrings.confirm))))),
+                    enableGallery && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.galleryButton, processing && styles.buttonDisabled], onPress: handleGalleryPick, disabled: processing, accessibilityLabel: mergedStrings.galleryButton, accessibilityRole: "button" },
+                        react_1.default.createElement(react_native_1.Text, { style: styles.galleryButtonText }, "\uD83D\uDCC1"))),
+                    react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.shutterButton, processing && styles.buttonDisabled], onPress: triggerManualCapture, disabled: processing, accessibilityLabel: mergedStrings.manualHint, accessibilityRole: "button" },
+                        react_1.default.createElement(react_native_1.View, { style: styles.shutterInner }))))),
         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.ActivityIndicator, { size: "large", color: overlayColor }),
             mergedStrings.processing && (react_1.default.createElement(react_native_1.Text, { style: styles.processingText }, mergedStrings.processing))))));
 };
 exports.FullDocScanner = FullDocScanner;
@@ -370,7 +213,10 @@ const styles = react_native_1.StyleSheet.create({
         bottom: 64,
         left: 0,
         right: 0,
+        flexDirection: 'row',
+        justifyContent: 'center',
         alignItems: 'center',
+        gap: 24,
         zIndex: 10,
     },
     closeButton: {
@@ -398,6 +244,19 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 15,
         textAlign: 'center',
     },
+    galleryButton: {
+        width: 60,
+        height: 60,
+        borderRadius: 30,
+        borderWidth: 3,
+        borderColor: '#fff',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(255,255,255,0.1)',
+    },
+    galleryButtonText: {
+        fontSize: 28,
+    },
     shutterButton: {
         width: 80,
         height: 80,
@@ -408,7 +267,7 @@ const styles = react_native_1.StyleSheet.create({
         alignItems: 'center',
         backgroundColor: 'rgba(255,255,255,0.1)',
     },
-    shutterButtonDisabled: {
+    buttonDisabled: {
         opacity: 0.4,
     },
     shutterInner: {
@@ -417,34 +276,6 @@ const styles = react_native_1.StyleSheet.create({
         borderRadius: 30,
         backgroundColor: '#fff',
     },
-    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)',