react-native-rectangle-doc-scanner 3.36.0 → 3.37.0

package/dist/CropEditor.js

@@ -117,12 +117,26 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
         };
         onCropChange?.(rect);
     }, [imageSize, onCropChange]);
-    const imageUri = `file://${document.path}`;
+    // Ensure proper file URI format
+    const imageUri = document.path.startsWith('file://')
+        ? document.path
+        : `file://${document.path}`;
+    const initialRect = getInitialRectangle();
+    console.log('[CropEditor] Rendering with:', {
+        imageUri,
+        imageSize,
+        displaySize,
+        initialRect,
+        isLoading: isImageLoading,
+        hasError: !!loadError,
+    });
     return (react_1.default.createElement(react_native_1.View, { style: styles.container, onLayout: handleLayout }, loadError ? (react_1.default.createElement(react_native_1.View, { style: styles.errorContainer },
         react_1.default.createElement(react_native_1.Text, { style: styles.errorText }, "Failed to load image"),
         react_1.default.createElement(react_native_1.Text, { style: styles.errorPath }, imageUri))) : !imageSize || isImageLoading ? (react_1.default.createElement(react_native_1.View, { style: styles.loadingContainer },
         react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: handlerColor }),
-        react_1.default.createElement(react_native_1.Text, { style: styles.loadingText }, "Loading image..."))) : (react_1.default.createElement(react_native_perspective_image_cropper_1.default, { height: displaySize.height, width: displaySize.width, image: imageUri, rectangleCoordinates: getInitialRectangle(), overlayColor: overlayColor, overlayStrokeColor: overlayStrokeColor, handlerColor: handlerColor, enablePanStrict: enablePanStrict, onDragEnd: handleDragEnd }))));
+        react_1.default.createElement(react_native_1.Text, { style: styles.loadingText }, "Loading image..."))) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_native_perspective_image_cropper_1.default, { height: displaySize.height, width: displaySize.width, image: imageUri, rectangleCoordinates: initialRect, overlayColor: overlayColor, overlayStrokeColor: overlayStrokeColor, handlerColor: handlerColor, enablePanStrict: enablePanStrict, onDragEnd: handleDragEnd }),
+        react_1.default.createElement(react_native_1.Image, { source: { uri: imageUri }, style: styles.debugImage, onLoad: () => console.log('[CropEditor] Debug image loaded'), onError: (e) => console.error('[CropEditor] Debug image error:', e.nativeEvent.error) })))));
 };
 exports.CropEditor = CropEditor;
 const styles = react_native_1.StyleSheet.create({
@@ -157,10 +171,14 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 12,
         textAlign: 'center',
     },
-    hiddenImage: {
-        width: 1,
-        height: 1,
-        opacity: 0,
+    debugImage: {
         position: 'absolute',
+        width: 100,
+        height: 100,
+        top: 10,
+        right: 10,
+        opacity: 0.5,
+        borderWidth: 2,
+        borderColor: 'red',
     },
 });

package/dist/FullDocScanner.js

@@ -69,13 +69,13 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const processingCaptureRef = (0, react_1.useRef)(false);
     const cropInitializedRef = (0, react_1.useRef)(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…',
+        captureHint: strings?.captureHint ?? '',
+        manualHint: strings?.manualHint ?? '',
+        cancel: strings?.cancel ?? '',
+        confirm: strings?.confirm ?? '',
+        retake: strings?.retake ?? '',
+        cropTitle: strings?.cropTitle ?? '',
+        processing: strings?.processing ?? '',
     }), [strings]);
     (0, react_1.useEffect)(() => {
         if (!capturedDoc) {
@@ -315,24 +315,24 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     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, { 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.overlay, pointerEvents: "box-none" },
+                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.View, { style: styles.instructions, pointerEvents: "none" },
-                        react_1.default.createElement(react_native_1.Text, { style: styles.captureText }, mergedStrings.captureHint),
-                        react_1.default.createElement(react_native_1.Text, { style: styles.captureText }, mergedStrings.manualHint)),
+                        react_1.default.createElement(react_native_1.Text, { style: styles.closeButtonLabel }, "\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.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 },
-                    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))))),
+                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))))),
         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)))));
+            mergedStrings.processing && (react_1.default.createElement(react_native_1.Text, { style: styles.processingText }, mergedStrings.processing))))));
 };
 exports.FullDocScanner = FullDocScanner;
 const styles = react_native_1.StyleSheet.create({
@@ -343,12 +343,27 @@ const styles = react_native_1.StyleSheet.create({
     flex: {
         flex: 1,
     },
-    overlay: {
-        ...react_native_1.StyleSheet.absoluteFillObject,
-        justifyContent: 'space-between',
-        paddingTop: 48,
-        paddingBottom: 64,
-        paddingHorizontal: 24,
+    overlayTop: {
+        position: 'absolute',
+        top: 48,
+        right: 24,
+        zIndex: 10,
+    },
+    instructionsContainer: {
+        position: 'absolute',
+        top: '40%',
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        zIndex: 5,
+    },
+    shutterContainer: {
+        position: 'absolute',
+        bottom: 64,
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        zIndex: 10,
     },
     closeButton: {
         width: 40,
@@ -357,7 +372,6 @@ const styles = react_native_1.StyleSheet.create({
         backgroundColor: 'rgba(0,0,0,0.5)',
         justifyContent: 'center',
         alignItems: 'center',
-        alignSelf: 'flex-end',
     },
     closeButtonLabel: {
         color: '#fff',
@@ -366,7 +380,6 @@ const styles = react_native_1.StyleSheet.create({
         marginTop: -3,
     },
     instructions: {
-        alignSelf: 'center',
         backgroundColor: 'rgba(0,0,0,0.55)',
         borderRadius: 16,
         paddingHorizontal: 20,
@@ -378,7 +391,6 @@ const styles = react_native_1.StyleSheet.create({
         textAlign: 'center',
     },
     shutterButton: {
-        alignSelf: 'center',
         width: 80,
         height: 80,
         borderRadius: 40,

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "3.36.0",
+  "version": "3.37.0",
   "description": "Native-backed document scanner for React Native with customizable overlays.",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/danchew90/react-native-rectangle-doc-scanner.git"
+    "url": "git+https://github.com/danchew90/react-native-rectangle-doc-scanner.git"
   },
   "homepage": "https://github.com/danchew90/react-native-rectangle-doc-scanner",
   "bugs": {

package/src/CropEditor.tsx

@@ -120,7 +120,21 @@ export const CropEditor: React.FC<CropEditorProps> = ({
     onCropChange?.(rect);
   }, [imageSize, onCropChange]);
 
-  const imageUri = `file://${document.path}`;
+  // Ensure proper file URI format
+  const imageUri = document.path.startsWith('file://')
+    ? document.path
+    : `file://${document.path}`;
+
+  const initialRect = getInitialRectangle();
+
+  console.log('[CropEditor] Rendering with:', {
+    imageUri,
+    imageSize,
+    displaySize,
+    initialRect,
+    isLoading: isImageLoading,
+    hasError: !!loadError,
+  });
 
   return (
     <View style={styles.container} onLayout={handleLayout}>
@@ -136,17 +150,26 @@ export const CropEditor: React.FC<CropEditorProps> = ({
           <Text style={styles.loadingText}>Loading image...</Text>
         </View>
       ) : (
-        <CustomImageCropper
-          height={displaySize.height}
-          width={displaySize.width}
-          image={imageUri}
-          rectangleCoordinates={getInitialRectangle()}
-          overlayColor={overlayColor}
-          overlayStrokeColor={overlayStrokeColor}
-          handlerColor={handlerColor}
-          enablePanStrict={enablePanStrict}
-          onDragEnd={handleDragEnd}
-        />
+        <>
+          <CustomImageCropper
+            height={displaySize.height}
+            width={displaySize.width}
+            image={imageUri}
+            rectangleCoordinates={initialRect}
+            overlayColor={overlayColor}
+            overlayStrokeColor={overlayStrokeColor}
+            handlerColor={handlerColor}
+            enablePanStrict={enablePanStrict}
+            onDragEnd={handleDragEnd}
+          />
+          {/* Debug: Show image in background to verify it loads */}
+          <Image
+            source={{ uri: imageUri }}
+            style={styles.debugImage}
+            onLoad={() => console.log('[CropEditor] Debug image loaded')}
+            onError={(e) => console.error('[CropEditor] Debug image error:', e.nativeEvent.error)}
+          />
+        </>
       )}
     </View>
   );
@@ -184,10 +207,14 @@ const styles = StyleSheet.create({
     fontSize: 12,
     textAlign: 'center',
   },
-  hiddenImage: {
-    width: 1,
-    height: 1,
-    opacity: 0,
+  debugImage: {
     position: 'absolute',
+    width: 100,
+    height: 100,
+    top: 10,
+    right: 10,
+    opacity: 0.5,
+    borderWidth: 2,
+    borderColor: 'red',
   },
 });

package/src/FullDocScanner.tsx

@@ -122,15 +122,15 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   const processingCaptureRef = useRef(false);
   const cropInitializedRef = useRef(false);
 
-  const mergedStrings = useMemo<Required<FullDocScannerStrings>>(
+  const mergedStrings = 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…',
+      captureHint: strings?.captureHint ?? '',
+      manualHint: strings?.manualHint ?? '',
+      cancel: strings?.cancel ?? '',
+      confirm: strings?.confirm ?? '',
+      retake: strings?.retake ?? '',
+      cropTitle: strings?.cropTitle ?? '',
+      processing: strings?.processing ?? '',
     }),
     [strings],
   );
@@ -479,7 +479,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
             onCapture={handleCapture}
             showManualCaptureButton={false}
           >
-            <View style={styles.overlay} pointerEvents="box-none">
+            <View style={styles.overlayTop} pointerEvents="box-none">
               <TouchableOpacity
                 style={styles.closeButton}
                 onPress={handleClose}
@@ -488,10 +488,20 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
               >
                 <Text style={styles.closeButtonLabel}>×</Text>
               </TouchableOpacity>
-              <View style={styles.instructions} pointerEvents="none">
-                <Text style={styles.captureText}>{mergedStrings.captureHint}</Text>
-                <Text style={styles.captureText}>{mergedStrings.manualHint}</Text>
+            </View>
+            {(mergedStrings.captureHint || mergedStrings.manualHint) && (
+              <View style={styles.instructionsContainer} pointerEvents="none">
+                <View style={styles.instructions}>
+                  {mergedStrings.captureHint && (
+                    <Text style={styles.captureText}>{mergedStrings.captureHint}</Text>
+                  )}
+                  {mergedStrings.manualHint && (
+                    <Text style={styles.captureText}>{mergedStrings.manualHint}</Text>
+                  )}
+                </View>
               </View>
+            )}
+            <View style={styles.shutterContainer} pointerEvents="box-none">
               <TouchableOpacity
                 style={[styles.shutterButton, processing && styles.shutterButtonDisabled]}
                 onPress={triggerManualCapture}
@@ -517,10 +527,10 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
           />
           <View style={styles.cropFooter}>
             <TouchableOpacity style={[styles.actionButton, styles.secondaryButton]} onPress={handleRetake}>
-              <Text style={styles.buttonText}>{mergedStrings.retake}</Text>
+              {mergedStrings.retake && <Text style={styles.buttonText}>{mergedStrings.retake}</Text>}
             </TouchableOpacity>
             <TouchableOpacity style={[styles.actionButton, styles.primaryButton]} onPress={handleConfirm}>
-              <Text style={styles.buttonText}>{mergedStrings.confirm}</Text>
+              {mergedStrings.confirm && <Text style={styles.buttonText}>{mergedStrings.confirm}</Text>}
             </TouchableOpacity>
           </View>
         </View>
@@ -529,7 +539,9 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       {processing && (
         <View style={styles.processingOverlay}>
           <ActivityIndicator size="large" color={overlayStrokeColor} />
-          <Text style={styles.processingText}>{mergedStrings.processing}</Text>
+          {mergedStrings.processing && (
+            <Text style={styles.processingText}>{mergedStrings.processing}</Text>
+          )}
         </View>
       )}
     </View>
@@ -544,12 +556,27 @@ const styles = StyleSheet.create({
   flex: {
     flex: 1,
   },
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'space-between',
-    paddingTop: 48,
-    paddingBottom: 64,
-    paddingHorizontal: 24,
+  overlayTop: {
+    position: 'absolute',
+    top: 48,
+    right: 24,
+    zIndex: 10,
+  },
+  instructionsContainer: {
+    position: 'absolute',
+    top: '40%',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    zIndex: 5,
+  },
+  shutterContainer: {
+    position: 'absolute',
+    bottom: 64,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    zIndex: 10,
   },
   closeButton: {
     width: 40,
@@ -558,7 +585,6 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0,0,0,0.5)',
     justifyContent: 'center',
     alignItems: 'center',
-    alignSelf: 'flex-end',
   },
   closeButtonLabel: {
     color: '#fff',
@@ -567,7 +593,6 @@ const styles = StyleSheet.create({
     marginTop: -3,
   },
   instructions: {
-    alignSelf: 'center',
     backgroundColor: 'rgba(0,0,0,0.55)',
     borderRadius: 16,
     paddingHorizontal: 20,
@@ -579,7 +604,6 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
   shutterButton: {
-    alignSelf: 'center',
     width: 80,
     height: 80,
     borderRadius: 40,