react-native-rectangle-doc-scanner 3.114.0 → 3.115.0

package/dist/FullDocScanner.d.ts

@@ -23,6 +23,7 @@ export interface FullDocScannerStrings {
     first?: string;
     second?: string;
     secondBtn?: string;
+    secondPrompt?: string;
 }
 export interface FullDocScannerProps {
     onResult: (results: FullDocScannerResult[]) => void;

package/dist/FullDocScanner.js

@@ -125,14 +125,19 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const [rotationDegrees, setRotationDegrees] = (0, react_1.useState)(0);
     const [capturedPhotos, setCapturedPhotos] = (0, react_1.useState)([]);
     const [currentPhotoIndex, setCurrentPhotoIndex] = (0, react_1.useState)(0);
+    const [previewPhotoIndex, setPreviewPhotoIndex] = (0, react_1.useState)(0);
     const resolvedGridColor = gridColor ?? overlayColor;
     const docScannerRef = (0, react_1.useRef)(null);
     const captureModeRef = (0, react_1.useRef)(null);
     const captureInProgressRef = (0, react_1.useRef)(false);
     const rectangleCaptureTimeoutRef = (0, react_1.useRef)(null);
     const rectangleHintTimeoutRef = (0, react_1.useRef)(null);
+    const currentPhotoIndexRef = (0, react_1.useRef)(currentPhotoIndex);
     const isBusinessMode = type === 'business';
     const maxPhotos = isBusinessMode ? 2 : 1;
+    (0, react_1.useEffect)(() => {
+        currentPhotoIndexRef.current = currentPhotoIndex;
+    }, [currentPhotoIndex]);
     const mergedStrings = (0, react_1.useMemo)(() => ({
         captureHint: strings?.captureHint,
         manualHint: strings?.manualHint,
@@ -145,6 +150,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         first: strings?.first ?? 'Front',
         second: strings?.second ?? 'Back',
         secondBtn: strings?.secondBtn ?? 'Capture Back Side?',
+        secondPrompt: strings?.secondPrompt ?? strings?.secondBtn ?? 'Capture Back Side?',
     }), [strings]);
     const emitError = (0, react_1.useCallback)((error, fallbackMessage) => {
         console.error('[FullDocScanner] error', error);
@@ -184,6 +190,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 hasBase64: !!croppedImage.data,
             });
             setProcessing(false);
+            setPreviewPhotoIndex(currentPhotoIndexRef.current);
             // Show confirmation screen
             setCroppedImageData({
                 path: croppedImage.path,
@@ -230,6 +237,8 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             console.warn('[FullDocScanner] Missing capture mode for capture result, ignoring');
             return;
         }
+        const previewIndex = currentPhotoIndexRef.current;
+        setPreviewPhotoIndex(previewIndex);
         const normalizedDoc = normalizeCapturedDocument(document);
         if (captureMode === 'no-grid') {
             console.log('[FullDocScanner] No grid at capture button press: opening cropper for manual selection');
@@ -433,6 +442,20 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     }, [capturedPhotos, onResult]);
     const handleRetake = (0, react_1.useCallback)(() => {
         console.log('[FullDocScanner] Retake - clearing cropped image and resetting scanner');
+        if (isBusinessMode) {
+            if (currentPhotoIndex === 1 && previewPhotoIndex === 0 && capturedPhotos.length === 1) {
+                console.log('[FullDocScanner] Retake detected on front preview after confirmation - reverting to front capture');
+                setCapturedPhotos([]);
+                setCurrentPhotoIndex(0);
+                setPreviewPhotoIndex(0);
+            }
+            else if (previewPhotoIndex === 1 && capturedPhotos.length === 2) {
+                console.log('[FullDocScanner] Retake detected on back preview after final confirmation - removing back photo');
+                setCapturedPhotos(capturedPhotos.slice(0, 1));
+                setCurrentPhotoIndex(1);
+                setPreviewPhotoIndex(1);
+            }
+        }
         setCroppedImageData(null);
         setRotationDegrees(0);
         setProcessing(false);
@@ -452,7 +475,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         if (docScannerRef.current?.reset) {
             docScannerRef.current.reset();
         }
-    }, []);
+    }, [capturedPhotos, currentPhotoIndex, isBusinessMode, previewPhotoIndex]);
     const handleRectangleDetect = (0, react_1.useCallback)((event) => {
         const stableCounter = event.stableCounter ?? 0;
         const rectangleCoordinates = event.rectangleOnScreen ?? event.rectangleCoordinates;
@@ -506,7 +529,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         // check_DP: Show confirmation screen
         react_1.default.createElement(react_native_1.View, { style: styles.confirmationContainer },
             isBusinessMode && (react_1.default.createElement(react_native_1.View, { style: styles.photoHeader },
-                react_1.default.createElement(react_native_1.Text, { style: styles.photoHeaderText }, currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second))),
+                react_1.default.createElement(react_native_1.Text, { style: styles.photoHeaderText }, previewPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second))),
             isImageRotationSupported() ? (react_1.default.createElement(react_native_1.View, { style: styles.rotateButtonsCenter },
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonTop, onPress: () => handleRotateImage(-90), accessibilityLabel: "\uC67C\uCABD\uC73C\uB85C 90\uB3C4 \uD68C\uC804", accessibilityRole: "button" },
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateIconText }, "\u21BA"),
@@ -518,10 +541,18 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                     styles.previewImage,
                     { transform: [{ rotate: `${rotationDegrees}deg` }] }
                 ], resizeMode: "contain" }),
+            isBusinessMode &&
+                capturedPhotos.length === 1 &&
+                currentPhotoIndex === 1 &&
+                previewPhotoIndex === 0 &&
+                mergedStrings.secondPrompt ? (react_1.default.createElement(react_native_1.Text, { style: styles.confirmationPromptText }, mergedStrings.secondPrompt)) : null,
             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)),
-                isBusinessMode && capturedPhotos.length === 1 && currentPhotoIndex === 1 ? (react_1.default.createElement(react_1.default.Fragment, null,
+                isBusinessMode &&
+                    capturedPhotos.length === 1 &&
+                    currentPhotoIndex === 1 &&
+                    previewPhotoIndex === 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.confirmButtonPrimary], onPress: handleCaptureSecondPhoto, accessibilityLabel: mergedStrings.secondBtn, accessibilityRole: "button" },
                         react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.secondBtn)),
                     react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.skipButton], onPress: handleSkipSecondPhoto, accessibilityLabel: mergedStrings.confirm, accessibilityRole: "button" },
@@ -718,6 +749,14 @@ const styles = react_native_1.StyleSheet.create({
         width: '100%',
         height: '80%',
     },
+    confirmationPromptText: {
+        color: '#fff',
+        fontSize: 18,
+        fontWeight: '600',
+        textAlign: 'center',
+        paddingHorizontal: 32,
+        marginTop: 24,
+    },
     confirmationButtons: {
         flexDirection: 'row',
         justifyContent: 'center',

package/package.json

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

package/src/FullDocScanner.tsx

@@ -138,6 +138,7 @@ export interface FullDocScannerStrings {
   first?: string;
   second?: string;
   secondBtn?: string;
+  secondPrompt?: string;
 }
 
 export interface FullDocScannerProps {
@@ -182,16 +183,22 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   const [rotationDegrees, setRotationDegrees] = useState(0);
   const [capturedPhotos, setCapturedPhotos] = useState<FullDocScannerResult[]>([]);
   const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
+  const [previewPhotoIndex, setPreviewPhotoIndex] = useState(0);
   const resolvedGridColor = gridColor ?? overlayColor;
   const docScannerRef = useRef<DocScannerHandle | null>(null);
   const captureModeRef = useRef<'grid' | 'no-grid' | null>(null);
   const captureInProgressRef = useRef(false);
   const rectangleCaptureTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const rectangleHintTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const currentPhotoIndexRef = useRef(currentPhotoIndex);
 
   const isBusinessMode = type === 'business';
   const maxPhotos = isBusinessMode ? 2 : 1;
 
+  useEffect(() => {
+    currentPhotoIndexRef.current = currentPhotoIndex;
+  }, [currentPhotoIndex]);
+
   const mergedStrings = useMemo(
     () => ({
       captureHint: strings?.captureHint,
@@ -205,6 +212,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       first: strings?.first ?? 'Front',
       second: strings?.second ?? 'Back',
       secondBtn: strings?.secondBtn ?? 'Capture Back Side?',
+      secondPrompt: strings?.secondPrompt ?? strings?.secondBtn ?? 'Capture Back Side?',
     }),
     [strings],
   );
@@ -261,6 +269,8 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
 
         setProcessing(false);
 
+        setPreviewPhotoIndex(currentPhotoIndexRef.current);
+
         // Show confirmation screen
         setCroppedImageData({
           path: croppedImage.path,
@@ -323,6 +333,9 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
         return;
       }
 
+      const previewIndex = currentPhotoIndexRef.current;
+      setPreviewPhotoIndex(previewIndex);
+
       const normalizedDoc = normalizeCapturedDocument(document);
 
       if (captureMode === 'no-grid') {
@@ -574,6 +587,21 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
 
   const handleRetake = useCallback(() => {
     console.log('[FullDocScanner] Retake - clearing cropped image and resetting scanner');
+
+    if (isBusinessMode) {
+      if (currentPhotoIndex === 1 && previewPhotoIndex === 0 && capturedPhotos.length === 1) {
+        console.log('[FullDocScanner] Retake detected on front preview after confirmation - reverting to front capture');
+        setCapturedPhotos([]);
+        setCurrentPhotoIndex(0);
+        setPreviewPhotoIndex(0);
+      } else if (previewPhotoIndex === 1 && capturedPhotos.length === 2) {
+        console.log('[FullDocScanner] Retake detected on back preview after final confirmation - removing back photo');
+        setCapturedPhotos(capturedPhotos.slice(0, 1));
+        setCurrentPhotoIndex(1);
+        setPreviewPhotoIndex(1);
+      }
+    }
+
     setCroppedImageData(null);
     setRotationDegrees(0);
     setProcessing(false);
@@ -593,7 +621,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     if (docScannerRef.current?.reset) {
       docScannerRef.current.reset();
     }
-  }, []);
+  }, [capturedPhotos, currentPhotoIndex, isBusinessMode, previewPhotoIndex]);
 
   const handleRectangleDetect = useCallback((event: RectangleDetectEvent) => {
     const stableCounter = event.stableCounter ?? 0;
@@ -661,7 +689,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
           {isBusinessMode && (
             <View style={styles.photoHeader}>
               <Text style={styles.photoHeaderText}>
-                {currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second}
+                {previewPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second}
               </Text>
             </View>
           )}
@@ -697,6 +725,13 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
             ]}
             resizeMode="contain"
           />
+          {isBusinessMode &&
+            capturedPhotos.length === 1 &&
+            currentPhotoIndex === 1 &&
+            previewPhotoIndex === 0 &&
+            mergedStrings.secondPrompt ? (
+            <Text style={styles.confirmationPromptText}>{mergedStrings.secondPrompt}</Text>
+          ) : null}
           <View style={styles.confirmationButtons}>
             <TouchableOpacity
               style={[styles.confirmButton, styles.retakeButton]}
@@ -708,7 +743,10 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
             </TouchableOpacity>
 
             {/* Business 모드이고 첫 번째 사진을 찍은 후: 뒷면 촬영 버튼 또는 확인 버튼 */}
-            {isBusinessMode && capturedPhotos.length === 1 && currentPhotoIndex === 1 ? (
+            {isBusinessMode &&
+              capturedPhotos.length === 1 &&
+              currentPhotoIndex === 1 &&
+              previewPhotoIndex === 0 ? (
               <>
                 <TouchableOpacity
                   style={[styles.confirmButton, styles.confirmButtonPrimary]}
@@ -1008,6 +1046,14 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '80%',
   },
+  confirmationPromptText: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+    paddingHorizontal: 32,
+    marginTop: 24,
+  },
   confirmationButtons: {
     flexDirection: 'row',
     justifyContent: 'center',