react-native-rectangle-doc-scanner 3.44.0 → 3.44.1

package/dist/FullDocScanner.d.ts

@@ -15,6 +15,8 @@ export interface FullDocScannerStrings {
     cancel?: string;
     processing?: string;
     galleryButton?: string;
+    retake?: string;
+    confirm?: string;
 }
 export interface FullDocScannerProps {
     onResult: (result: FullDocScannerResult) => void;

package/dist/FullDocScanner.js

@@ -55,6 +55,8 @@ const normalizeCapturedDocument = (document) => {
 };
 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 [croppedImageData, setCroppedImageData] = (0, react_1.useState)(null);
+    const [isGalleryOpen, setIsGalleryOpen] = (0, react_1.useState)(false);
     const resolvedGridColor = gridColor ?? overlayColor;
     const docScannerRef = (0, react_1.useRef)(null);
     const manualCapturePending = (0, react_1.useRef)(false);
@@ -64,6 +66,8 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         cancel: strings?.cancel,
         processing: strings?.processing,
         galleryButton: strings?.galleryButton,
+        retake: strings?.retake ?? 'Retake',
+        confirm: strings?.confirm ?? 'Confirm',
     }), [strings]);
     const emitError = (0, react_1.useCallback)((error, fallbackMessage) => {
         console.error('[FullDocScanner] error', error);
@@ -87,7 +91,8 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 compressImageQuality: 0.9,
             });
             setProcessing(false);
-            onResult({
+            // Show check_DP confirmation screen
+            setCroppedImageData({
                 path: croppedImage.path,
                 base64: croppedImage.data ?? undefined,
             });
@@ -98,7 +103,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 emitError(error instanceof Error ? error : new Error(String(error)), 'Failed to crop image.');
             }
         }
-    }, [cropWidth, cropHeight, emitError, onResult]);
+    }, [cropWidth, cropHeight, emitError]);
     const handleCapture = (0, react_1.useCallback)(async (document) => {
         console.log('[FullDocScanner] handleCapture called:', {
             origin: document.origin,
@@ -141,15 +146,17 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     }, [processing]);
     const handleGalleryPick = (0, react_1.useCallback)(async () => {
         console.log('[FullDocScanner] handleGalleryPick called');
-        if (processing) {
+        if (processing || isGalleryOpen) {
             return;
         }
         try {
+            setIsGalleryOpen(true);
             const result = await (0, react_native_image_picker_1.launchImageLibrary)({
                 mediaType: 'photo',
                 quality: 1,
                 selectionLimit: 1,
             });
+            setIsGalleryOpen(false);
             if (result.didCancel || !result.assets?.[0]?.uri) {
                 console.log('[FullDocScanner] User cancelled gallery picker');
                 return;
@@ -160,15 +167,35 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             await openCropper(imageUri);
         }
         catch (error) {
+            setIsGalleryOpen(false);
             emitError(error instanceof Error ? error : new Error(String(error)), 'Failed to pick image from gallery.');
         }
-    }, [processing, openCropper, emitError]);
+    }, [processing, isGalleryOpen, openCropper, emitError]);
     const handleClose = (0, react_1.useCallback)(() => {
         onClose?.();
     }, [onClose]);
+    const handleConfirm = (0, react_1.useCallback)(() => {
+        if (croppedImageData) {
+            onResult({
+                path: croppedImageData.path,
+                base64: croppedImageData.base64,
+            });
+        }
+    }, [croppedImageData, onResult]);
+    const handleRetake = (0, react_1.useCallback)(() => {
+        setCroppedImageData(null);
+    }, []);
     return (react_1.default.createElement(react_native_1.View, { style: styles.container },
-        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 },
+        croppedImageData ? (
+        // check_DP: Show confirmation screen
+        react_1.default.createElement(react_native_1.View, { style: styles.confirmationContainer },
+            react_1.default.createElement(react_native_1.Image, { source: { uri: croppedImageData.path }, style: styles.previewImage, resizeMode: "contain" }),
+            react_1.default.createElement(react_native_1.View, { style: styles.confirmationButtons },
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.retakeButton], onPress: handleRetake, accessibilityLabel: mergedStrings.retake, accessibilityRole: "button" },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.retake)),
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.confirmButtonPrimary], onPress: handleConfirm, accessibilityLabel: mergedStrings.confirm, accessibilityRole: "button" },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.confirm))))) : (react_1.default.createElement(react_native_1.View, { style: styles.flex },
+            react_1.default.createElement(DocScanner_1.DocScanner, { ref: docScannerRef, autoCapture: !manualCapture && !isGalleryOpen, 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" },
                         react_1.default.createElement(react_native_1.Text, { style: styles.closeButtonLabel }, "\u00D7"))),
@@ -180,7 +207,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                     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 }))))),
+                        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: overlayColor }),
             mergedStrings.processing && (react_1.default.createElement(react_native_1.Text, { style: styles.processingText }, mergedStrings.processing))))));
@@ -288,4 +315,42 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 16,
         fontWeight: '600',
     },
+    confirmationContainer: {
+        flex: 1,
+        backgroundColor: '#000',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    previewImage: {
+        width: '100%',
+        height: '80%',
+    },
+    confirmationButtons: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 24,
+        paddingVertical: 32,
+    },
+    confirmButton: {
+        paddingHorizontal: 40,
+        paddingVertical: 16,
+        borderRadius: 12,
+        minWidth: 140,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    retakeButton: {
+        backgroundColor: 'rgba(255,255,255,0.2)',
+        borderWidth: 2,
+        borderColor: '#fff',
+    },
+    confirmButtonPrimary: {
+        backgroundColor: '#3170f3',
+    },
+    confirmButtonText: {
+        color: '#fff',
+        fontSize: 18,
+        fontWeight: '600',
+    },
 });

package/package.json

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

package/src/FullDocScanner.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
   ActivityIndicator,
   Alert,
+  Image,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -41,6 +42,8 @@ export interface FullDocScannerStrings {
   cancel?: string;
   processing?: string;
   galleryButton?: string;
+  retake?: string;
+  confirm?: string;
 }
 
 export interface FullDocScannerProps {
@@ -77,6 +80,8 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   cropHeight = 1600,
 }) => {
   const [processing, setProcessing] = useState(false);
+  const [croppedImageData, setCroppedImageData] = useState<{path: string; base64?: string} | null>(null);
+  const [isGalleryOpen, setIsGalleryOpen] = useState(false);
   const resolvedGridColor = gridColor ?? overlayColor;
   const docScannerRef = useRef<DocScannerHandle | null>(null);
   const manualCapturePending = useRef(false);
@@ -88,6 +93,8 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       cancel: strings?.cancel,
       processing: strings?.processing,
       galleryButton: strings?.galleryButton,
+      retake: strings?.retake ?? 'Retake',
+      confirm: strings?.confirm ?? 'Confirm',
     }),
     [strings],
   );
@@ -121,7 +128,8 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
 
         setProcessing(false);
 
-        onResult({
+        // Show check_DP confirmation screen
+        setCroppedImageData({
           path: croppedImage.path,
           base64: croppedImage.data ?? undefined,
         });
@@ -135,7 +143,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
         }
       }
     },
-    [cropWidth, cropHeight, emitError, onResult],
+    [cropWidth, cropHeight, emitError],
   );
 
   const handleCapture = useCallback(
@@ -189,17 +197,20 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
 
   const handleGalleryPick = useCallback(async () => {
     console.log('[FullDocScanner] handleGalleryPick called');
-    if (processing) {
+    if (processing || isGalleryOpen) {
       return;
     }
 
     try {
+      setIsGalleryOpen(true);
       const result = await launchImageLibrary({
         mediaType: 'photo',
         quality: 1,
         selectionLimit: 1,
       });
 
+      setIsGalleryOpen(false);
+
       if (result.didCancel || !result.assets?.[0]?.uri) {
         console.log('[FullDocScanner] User cancelled gallery picker');
         return;
@@ -211,32 +222,74 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       // Open cropper with the selected image
       await openCropper(imageUri);
     } catch (error) {
+      setIsGalleryOpen(false);
       emitError(
         error instanceof Error ? error : new Error(String(error)),
         'Failed to pick image from gallery.',
       );
     }
-  }, [processing, openCropper, emitError]);
+  }, [processing, isGalleryOpen, openCropper, emitError]);
 
   const handleClose = useCallback(() => {
     onClose?.();
   }, [onClose]);
 
+  const handleConfirm = useCallback(() => {
+    if (croppedImageData) {
+      onResult({
+        path: croppedImageData.path,
+        base64: croppedImageData.base64,
+      });
+    }
+  }, [croppedImageData, onResult]);
+
+  const handleRetake = useCallback(() => {
+    setCroppedImageData(null);
+  }, []);
+
   return (
     <View style={styles.container}>
-      <View style={styles.flex}>
-        <DocScanner
-          ref={docScannerRef}
-          autoCapture={!manualCapture}
-          overlayColor={overlayColor}
-          showGrid={showGrid}
-          gridColor={resolvedGridColor}
-          gridLineWidth={gridLineWidth}
-          minStableFrames={minStableFrames ?? 6}
-          detectionConfig={detectionConfig}
-          onCapture={handleCapture}
-          showManualCaptureButton={false}
-        >
+      {croppedImageData ? (
+        // check_DP: Show confirmation screen
+        <View style={styles.confirmationContainer}>
+          <Image
+            source={{ uri: croppedImageData.path }}
+            style={styles.previewImage}
+            resizeMode="contain"
+          />
+          <View style={styles.confirmationButtons}>
+            <TouchableOpacity
+              style={[styles.confirmButton, styles.retakeButton]}
+              onPress={handleRetake}
+              accessibilityLabel={mergedStrings.retake}
+              accessibilityRole="button"
+            >
+              <Text style={styles.confirmButtonText}>{mergedStrings.retake}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.confirmButton, styles.confirmButtonPrimary]}
+              onPress={handleConfirm}
+              accessibilityLabel={mergedStrings.confirm}
+              accessibilityRole="button"
+            >
+              <Text style={styles.confirmButtonText}>{mergedStrings.confirm}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      ) : (
+        <View style={styles.flex}>
+          <DocScanner
+            ref={docScannerRef}
+            autoCapture={!manualCapture && !isGalleryOpen}
+            overlayColor={overlayColor}
+            showGrid={showGrid}
+            gridColor={resolvedGridColor}
+            gridLineWidth={gridLineWidth}
+            minStableFrames={minStableFrames ?? 6}
+            detectionConfig={detectionConfig}
+            onCapture={handleCapture}
+            showManualCaptureButton={false}
+          >
           <View style={styles.overlayTop} pointerEvents="box-none">
             <TouchableOpacity
               style={styles.closeButton}
@@ -282,7 +335,8 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
             </TouchableOpacity>
           </View>
         </DocScanner>
-      </View>
+        </View>
+      )}
 
       {processing && (
         <View style={styles.processingOverlay}>
@@ -398,4 +452,42 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '600',
   },
+  confirmationContainer: {
+    flex: 1,
+    backgroundColor: '#000',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  previewImage: {
+    width: '100%',
+    height: '80%',
+  },
+  confirmationButtons: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 24,
+    paddingVertical: 32,
+  },
+  confirmButton: {
+    paddingHorizontal: 40,
+    paddingVertical: 16,
+    borderRadius: 12,
+    minWidth: 140,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  retakeButton: {
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    borderWidth: 2,
+    borderColor: '#fff',
+  },
+  confirmButtonPrimary: {
+    backgroundColor: '#3170f3',
+  },
+  confirmButtonText: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: '600',
+  },
 });