react-native-rectangle-doc-scanner 0.49.0 → 0.51.0

package/dist/CropEditor.js

@@ -32,11 +32,14 @@ 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.CropEditor = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const react_native_perspective_image_cropper_1 = require("react-native-perspective-image-cropper");
+const react_native_perspective_image_cropper_1 = __importDefault(require("react-native-perspective-image-cropper"));
 const coordinate_1 = require("./utils/coordinate");
 /**
  * CropEditor Component
@@ -57,6 +60,7 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
         width: react_native_1.Dimensions.get('window').width,
         height: react_native_1.Dimensions.get('window').height,
     });
+    const [isImageLoading, setIsImageLoading] = (0, react_1.useState)(true);
     // Get initial rectangle from detected quad or use default
     const getInitialRectangle = (0, react_1.useCallback)(() => {
         if (!document.quad || !imageSize) {
@@ -72,7 +76,9 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
     }, [document.quad, document.width, document.height, imageSize]);
     const handleImageLoad = (0, react_1.useCallback)((event) => {
         const { width, height } = event.nativeEvent.source;
+        console.log('Image loaded with size:', { width, height });
         setImageSize({ width, height });
+        setIsImageLoading(false);
     }, []);
     const handleLayout = (0, react_1.useCallback)((event) => {
         const { width, height } = event.nativeEvent.layout;
@@ -92,12 +98,16 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
         onCropChange?.(rect);
     }, [imageSize, onCropChange]);
     // Wait for image to load to get dimensions
-    if (!imageSize) {
-        return (react_1.default.createElement(react_native_1.View, { style: styles.container, onLayout: handleLayout },
-            react_1.default.createElement(react_native_1.Image, { source: { uri: `file://${document.path}` }, style: styles.hiddenImage, onLoad: handleImageLoad, resizeMode: "contain" })));
+    if (!imageSize || isImageLoading) {
+        return (react_1.default.createElement(react_native_1.View, { style: [styles.container, styles.loadingContainer], onLayout: handleLayout },
+            react_1.default.createElement(react_native_1.Image, { source: { uri: `file://${document.path}` }, style: styles.hiddenImage, onLoad: handleImageLoad, onError: (error) => {
+                    console.error('Image load error:', error);
+                    setIsImageLoading(false);
+                }, resizeMode: "contain" }),
+            react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: handlerColor })));
     }
     return (react_1.default.createElement(react_native_1.View, { style: styles.container, onLayout: handleLayout },
-        react_1.default.createElement(react_native_perspective_image_cropper_1.CustomImageCropper, { height: displaySize.height, width: displaySize.width, image: `file://${document.path}`, rectangleCoordinates: getInitialRectangle(), overlayColor: overlayColor, overlayStrokeColor: overlayStrokeColor, handlerColor: handlerColor, enablePanStrict: enablePanStrict, onDragEnd: handleDragEnd })));
+        react_1.default.createElement(react_native_perspective_image_cropper_1.default, { height: displaySize.height, width: displaySize.width, image: `file://${document.path}`, rectangleCoordinates: getInitialRectangle(), overlayColor: overlayColor, overlayStrokeColor: overlayStrokeColor, handlerColor: handlerColor, enablePanStrict: enablePanStrict, onDragEnd: handleDragEnd })));
 };
 exports.CropEditor = CropEditor;
 const styles = react_native_1.StyleSheet.create({
@@ -105,9 +115,14 @@ const styles = react_native_1.StyleSheet.create({
         flex: 1,
         backgroundColor: '#000',
     },
+    loadingContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
     hiddenImage: {
         width: 1,
         height: 1,
         opacity: 0,
+        position: 'absolute',
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "0.49.0",
+  "version": "0.51.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {

package/src/CropEditor.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react';
-import { View, StyleSheet, Image, Dimensions } from 'react-native';
-import { CustomImageCropper } from 'react-native-perspective-image-cropper';
+import { View, StyleSheet, Image, Dimensions, ActivityIndicator } from 'react-native';
+import CustomImageCropper from 'react-native-perspective-image-cropper';
 import type { Rectangle as CropperRectangle } from 'react-native-perspective-image-cropper';
 import type { Point, Rectangle, CapturedDocument } from './types';
 import { quadToRectangle, scaleRectangle } from './utils/coordinate';
@@ -40,6 +40,7 @@ export const CropEditor: React.FC<CropEditorProps> = ({
     width: Dimensions.get('window').width,
     height: Dimensions.get('window').height,
   });
+  const [isImageLoading, setIsImageLoading] = useState(true);
 
   // Get initial rectangle from detected quad or use default
   const getInitialRectangle = useCallback((): CropperRectangle | undefined => {
@@ -66,7 +67,9 @@ export const CropEditor: React.FC<CropEditorProps> = ({
 
   const handleImageLoad = useCallback((event: any) => {
     const { width, height } = event.nativeEvent.source;
+    console.log('Image loaded with size:', { width, height });
     setImageSize({ width, height });
+    setIsImageLoading(false);
   }, []);
 
   const handleLayout = useCallback((event: any) => {
@@ -91,15 +94,20 @@ export const CropEditor: React.FC<CropEditorProps> = ({
   }, [imageSize, onCropChange]);
 
   // Wait for image to load to get dimensions
-  if (!imageSize) {
+  if (!imageSize || isImageLoading) {
     return (
-      <View style={styles.container} onLayout={handleLayout}>
+      <View style={[styles.container, styles.loadingContainer]} onLayout={handleLayout}>
         <Image
           source={{ uri: `file://${document.path}` }}
           style={styles.hiddenImage}
           onLoad={handleImageLoad}
+          onError={(error) => {
+            console.error('Image load error:', error);
+            setIsImageLoading(false);
+          }}
           resizeMode="contain"
         />
+        <ActivityIndicator size="large" color={handlerColor} />
       </View>
     );
   }
@@ -126,9 +134,14 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#000',
   },
+  loadingContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   hiddenImage: {
     width: 1,
     height: 1,
     opacity: 0,
+    position: 'absolute',
   },
 });

package/src/external.d.ts

@@ -131,4 +131,6 @@ declare module 'react-native-perspective-image-cropper' {
   };
 
   export const CustomImageCropper: ComponentType<CustomImageCropperProps>;
+  const CustomImageCropperDefault: ComponentType<CustomImageCropperProps>;
+  export default CustomImageCropperDefault;
 }