react-native-rectangle-doc-scanner 3.88.0 → 3.90.0

package/dist/FullDocScanner.js

@@ -301,14 +301,19 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 hasAssets: !!result.assets,
                 assetsLength: result.assets?.length,
             });
-            setIsGalleryOpen(false);
             if (result.didCancel || !result.assets?.[0]?.uri) {
                 console.log('[FullDocScanner] User cancelled gallery picker or no image selected');
+                setIsGalleryOpen(false);
                 return;
             }
             const imageUri = result.assets[0].uri;
             console.log('[FullDocScanner] Gallery image selected:', imageUri);
-            await openCropper(imageUri);
+            // Set gallery closed state immediately but wait for modal to dismiss
+            setIsGalleryOpen(false);
+            // Wait for the image picker modal to fully dismiss before opening cropper
+            await new Promise(resolve => setTimeout(resolve, 500));
+            // Now open cropper after picker is dismissed
+            await openCropper(imageUri, { waitForPickerDismissal: false });
         }
         catch (error) {
             console.error('[FullDocScanner] Gallery pick error:', error);
@@ -423,18 +428,24 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                     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: false, overlayColor: overlayColor, showGrid: showGrid, gridColor: resolvedGridColor, gridLineWidth: gridLineWidth, minStableFrames: minStableFrames ?? 6, detectionConfig: detectionConfig, onCapture: handleCapture, onRectangleDetect: handleRectangleDetect, showManualCaptureButton: false, enableTorch: flashEnabled },
                 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"))),
+                    react_1.default.createElement(react_native_1.TouchableOpacity, { style: [
+                            styles.iconButton,
+                            processing && styles.buttonDisabled,
+                            flashEnabled && styles.flashButtonActive
+                        ], onPress: handleFlashToggle, disabled: processing, accessibilityLabel: "Toggle flash", accessibilityRole: "button" },
+                        react_1.default.createElement(react_native_1.View, { style: styles.iconContainer },
+                            react_1.default.createElement(react_native_1.Text, { style: styles.iconText }, "\u26A1\uFE0F"))),
+                    react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.iconButton, onPress: handleClose, accessibilityLabel: mergedStrings.cancel, accessibilityRole: "button" },
+                        react_1.default.createElement(react_native_1.View, { style: styles.iconContainer },
+                            react_1.default.createElement(react_native_1.Text, { style: styles.closeIconText }, "\u00D7")))),
                 (mergedStrings.captureHint || mergedStrings.manualHint) && (react_1.default.createElement(react_native_1.View, { style: styles.instructionsContainer, pointerEvents: "none" },
                     react_1.default.createElement(react_native_1.View, { style: styles.instructions },
                         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.View, { style: styles.leftButtonsContainer },
-                        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.flashButton, processing && styles.buttonDisabled], onPress: handleFlashToggle, disabled: processing, accessibilityLabel: "Toggle flash", accessibilityRole: "button" },
-                            react_1.default.createElement(react_native_1.Text, { style: styles.flashButtonText }, flashEnabled ? '⚡' : '⚡️'))),
+                    enableGallery && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.iconButton, processing && styles.buttonDisabled], onPress: handleGalleryPick, disabled: processing, accessibilityLabel: mergedStrings.galleryButton, accessibilityRole: "button" },
+                        react_1.default.createElement(react_native_1.View, { style: styles.iconContainer },
+                            react_1.default.createElement(react_native_1.Text, { style: styles.iconText }, "\uD83D\uDDBC\uFE0F")))),
                     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,
@@ -457,7 +468,11 @@ const styles = react_native_1.StyleSheet.create({
     overlayTop: {
         position: 'absolute',
         top: 48,
+        left: 24,
         right: 24,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
         zIndex: 10,
     },
     instructionsContainer: {
@@ -479,28 +494,34 @@ const styles = react_native_1.StyleSheet.create({
         paddingHorizontal: 40,
         zIndex: 10,
     },
-    leftButtonsContainer: {
-        flexDirection: 'row',
-        gap: 12,
-        alignItems: 'center',
-        flex: 1,
-    },
     rightButtonsPlaceholder: {
-        flex: 1,
+        width: 56,
     },
-    closeButton: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: 'rgba(0,0,0,0.5)',
+    iconButton: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: 'rgba(50,50,50,0.8)',
         justifyContent: 'center',
         alignItems: 'center',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.3)',
+    },
+    iconContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    iconText: {
+        fontSize: 22,
     },
-    closeButtonLabel: {
+    closeIconText: {
+        fontSize: 32,
+        fontWeight: '300',
         color: '#fff',
-        fontSize: 28,
-        lineHeight: 32,
-        marginTop: -3,
+    },
+    flashButtonActive: {
+        backgroundColor: 'rgba(255,215,0,0.5)',
+        borderColor: '#FFD700',
     },
     instructions: {
         backgroundColor: 'rgba(0,0,0,0.55)',
@@ -513,32 +534,6 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 15,
         textAlign: 'center',
     },
-    galleryButton: {
-        width: 56,
-        height: 56,
-        borderRadius: 28,
-        borderWidth: 3,
-        borderColor: '#fff',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: 'rgba(255,255,255,0.1)',
-    },
-    galleryButtonText: {
-        fontSize: 24,
-    },
-    flashButton: {
-        width: 56,
-        height: 56,
-        borderRadius: 28,
-        borderWidth: 3,
-        borderColor: '#fff',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: 'rgba(255,255,255,0.1)',
-    },
-    flashButtonText: {
-        fontSize: 24,
-    },
     shutterButton: {
         width: 80,
         height: 80,

package/package.json

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

package/src/FullDocScanner.tsx

@@ -402,17 +402,23 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
         assetsLength: result.assets?.length,
       });
 
-      setIsGalleryOpen(false);
-
       if (result.didCancel || !result.assets?.[0]?.uri) {
         console.log('[FullDocScanner] User cancelled gallery picker or no image selected');
+        setIsGalleryOpen(false);
         return;
       }
 
       const imageUri = result.assets[0].uri;
       console.log('[FullDocScanner] Gallery image selected:', imageUri);
 
-      await openCropper(imageUri);
+      // Set gallery closed state immediately but wait for modal to dismiss
+      setIsGalleryOpen(false);
+
+      // Wait for the image picker modal to fully dismiss before opening cropper
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      // Now open cropper after picker is dismissed
+      await openCropper(imageUri, { waitForPickerDismissal: false });
     } catch (error) {
       console.error('[FullDocScanner] Gallery pick error:', error);
       setIsGalleryOpen(false);
@@ -578,12 +584,29 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
           >
           <View style={styles.overlayTop} pointerEvents="box-none">
             <TouchableOpacity
-              style={styles.closeButton}
+              style={[
+                styles.iconButton,
+                processing && styles.buttonDisabled,
+                flashEnabled && styles.flashButtonActive
+              ]}
+              onPress={handleFlashToggle}
+              disabled={processing}
+              accessibilityLabel="Toggle flash"
+              accessibilityRole="button"
+            >
+              <View style={styles.iconContainer}>
+                <Text style={styles.iconText}>⚡️</Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={styles.iconButton}
               onPress={handleClose}
               accessibilityLabel={mergedStrings.cancel}
               accessibilityRole="button"
             >
-              <Text style={styles.closeButtonLabel}>×</Text>
+              <View style={styles.iconContainer}>
+                <Text style={styles.closeIconText}>×</Text>
+              </View>
             </TouchableOpacity>
           </View>
           {(mergedStrings.captureHint || mergedStrings.manualHint) && (
@@ -599,28 +622,19 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
             </View>
           )}
           <View style={styles.shutterContainer} pointerEvents="box-none">
-            <View style={styles.leftButtonsContainer}>
-              {enableGallery && (
-                <TouchableOpacity
-                  style={[styles.galleryButton, processing && styles.buttonDisabled]}
-                  onPress={handleGalleryPick}
-                  disabled={processing}
-                  accessibilityLabel={mergedStrings.galleryButton}
-                  accessibilityRole="button"
-                >
-                  <Text style={styles.galleryButtonText}>📁</Text>
-                </TouchableOpacity>
-              )}
+            {enableGallery && (
               <TouchableOpacity
-                style={[styles.flashButton, processing && styles.buttonDisabled]}
-                onPress={handleFlashToggle}
+                style={[styles.iconButton, processing && styles.buttonDisabled]}
+                onPress={handleGalleryPick}
                 disabled={processing}
-                accessibilityLabel="Toggle flash"
+                accessibilityLabel={mergedStrings.galleryButton}
                 accessibilityRole="button"
               >
-                <Text style={styles.flashButtonText}>{flashEnabled ? '⚡' : '⚡️'}</Text>
+                <View style={styles.iconContainer}>
+                  <Text style={styles.iconText}>🖼️</Text>
+                </View>
               </TouchableOpacity>
-            </View>
+            )}
             <TouchableOpacity
               style={[styles.shutterButton, processing && styles.buttonDisabled]}
               onPress={triggerManualCapture}
@@ -662,7 +676,11 @@ const styles = StyleSheet.create({
   overlayTop: {
     position: 'absolute',
     top: 48,
+    left: 24,
     right: 24,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     zIndex: 10,
   },
   instructionsContainer: {
@@ -684,28 +702,34 @@ const styles = StyleSheet.create({
     paddingHorizontal: 40,
     zIndex: 10,
   },
-  leftButtonsContainer: {
-    flexDirection: 'row',
-    gap: 12,
-    alignItems: 'center',
-    flex: 1,
-  },
   rightButtonsPlaceholder: {
-    flex: 1,
+    width: 56,
   },
-  closeButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: 'rgba(0,0,0,0.5)',
+  iconButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(50,50,50,0.8)',
     justifyContent: 'center',
     alignItems: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.3)',
+  },
+  iconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconText: {
+    fontSize: 22,
   },
-  closeButtonLabel: {
+  closeIconText: {
+    fontSize: 32,
+    fontWeight: '300',
     color: '#fff',
-    fontSize: 28,
-    lineHeight: 32,
-    marginTop: -3,
+  },
+  flashButtonActive: {
+    backgroundColor: 'rgba(255,215,0,0.5)',
+    borderColor: '#FFD700',
   },
   instructions: {
     backgroundColor: 'rgba(0,0,0,0.55)',
@@ -718,32 +742,6 @@ const styles = StyleSheet.create({
     fontSize: 15,
     textAlign: 'center',
   },
-  galleryButton: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    borderWidth: 3,
-    borderColor: '#fff',
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(255,255,255,0.1)',
-  },
-  galleryButtonText: {
-    fontSize: 24,
-  },
-  flashButton: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    borderWidth: 3,
-    borderColor: '#fff',
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(255,255,255,0.1)',
-  },
-  flashButtonText: {
-    fontSize: 24,
-  },
   shutterButton: {
     width: 80,
     height: 80,

package/vendor/react-native-document-scanner/ios/DocumentScannerView.m

@@ -3,6 +3,7 @@
 
 @implementation DocumentScannerView {
     BOOL _hasSetupCamera;
+    BOOL _cameraStarted;
     IPDFRectangeType _lastDetectionType;
 }
 
@@ -12,6 +13,7 @@
         [self setEnableBorderDetection:YES];
         [self setDelegate: self];
         _hasSetupCamera = NO;
+        _cameraStarted = NO;
         self.manualOnly = NO;  // Changed from YES to NO - allow manual capture to work
         self.detectionCountBeforeCapture = 99999;  // High threshold to prevent auto-capture
     }
@@ -28,25 +30,24 @@
         [self setupCameraView];
         [self start];
         _hasSetupCamera = YES;
-    } else if (_hasSetupCamera && self.window && !CGRectIsEmpty(self.bounds)) {
-        // Restart camera if needed (defensive check)
-        NSLog(@"[DocumentScanner] Layout update, ensuring camera is running");
-        [self start];
+        _cameraStarted = YES;
     }
 }
 
 - (void)didMoveToWindow {
     [super didMoveToWindow];
-    if (self.window && _hasSetupCamera) {
-        // Restart camera when view is added back to window
+    if (self.window && _hasSetupCamera && !_cameraStarted) {
+        // Restart camera when view is added back to window (only if it was stopped)
         NSLog(@"[DocumentScanner] View added to window, restarting camera...");
         dispatch_async(dispatch_get_main_queue(), ^{
             [self start];
+            self->_cameraStarted = YES;
         });
-    } else if (!self.window && _hasSetupCamera) {
+    } else if (!self.window && _hasSetupCamera && _cameraStarted) {
         // Stop camera when view is removed from window
         NSLog(@"[DocumentScanner] View removed from window, stopping camera");
         [self stop];
+        _cameraStarted = NO;
     }
 }