react-native-rectangle-doc-scanner 0.50.0 → 0.52.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/CropEditor.js +14 -6
  2. package/package.json +1 -1
  3. package/src/CropEditor.tsx +38 -25
package/dist/CropEditor.js CHANGED
@@ -60,6 +60,7 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
60
60
  width: react_native_1.Dimensions.get('window').width,
61
61
  height: react_native_1.Dimensions.get('window').height,
62
62
  });
63
+ const [isImageLoading, setIsImageLoading] = (0, react_1.useState)(true);
63
64
  // Get initial rectangle from detected quad or use default
64
65
  const getInitialRectangle = (0, react_1.useCallback)(() => {
65
66
  if (!document.quad || !imageSize) {
@@ -75,7 +76,9 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
75
76
  }, [document.quad, document.width, document.height, imageSize]);
76
77
  const handleImageLoad = (0, react_1.useCallback)((event) => {
77
78
  const { width, height } = event.nativeEvent.source;
79
+ console.log('Image loaded with size:', { width, height });
78
80
  setImageSize({ width, height });
81
+ setIsImageLoading(false);
79
82
  }, []);
80
83
  const handleLayout = (0, react_1.useCallback)((event) => {
81
84
  const { width, height } = event.nativeEvent.layout;
@@ -94,13 +97,13 @@ const CropEditor = ({ document, overlayColor = 'rgba(0,0,0,0.5)', overlayStrokeC
94
97
  };
95
98
  onCropChange?.(rect);
96
99
  }, [imageSize, onCropChange]);
97
- // Wait for image to load to get dimensions
98
- if (!imageSize) {
99
- return (react_1.default.createElement(react_native_1.View, { style: styles.container, onLayout: handleLayout },
100
- react_1.default.createElement(react_native_1.Image, { source: { uri: `file://${document.path}` }, style: styles.hiddenImage, onLoad: handleImageLoad, resizeMode: "contain" })));
101
- }
102
100
  return (react_1.default.createElement(react_native_1.View, { style: styles.container, onLayout: handleLayout },
103
- 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 })));
101
+ react_1.default.createElement(react_native_1.Image, { source: { uri: `file://${document.path}` }, style: styles.hiddenImage, onLoad: handleImageLoad, onError: (error) => {
102
+ console.error('Image load error:', error);
103
+ setIsImageLoading(false);
104
+ }, resizeMode: "contain" }),
105
+ !imageSize || isImageLoading ? (react_1.default.createElement(react_native_1.View, { style: styles.loadingContainer },
106
+ react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: handlerColor }))) : (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 }))));
104
107
  };
105
108
  exports.CropEditor = CropEditor;
106
109
  const styles = react_native_1.StyleSheet.create({
@@ -108,9 +111,14 @@ const styles = react_native_1.StyleSheet.create({
108
111
  flex: 1,
109
112
  backgroundColor: '#000',
110
113
  },
114
+ loadingContainer: {
115
+ justifyContent: 'center',
116
+ alignItems: 'center',
117
+ },
111
118
  hiddenImage: {
112
119
  width: 1,
113
120
  height: 1,
114
121
  opacity: 0,
122
+ position: 'absolute',
115
123
  },
116
124
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-rectangle-doc-scanner",
3
- "version": "0.50.0",
3
+ "version": "0.52.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "repository": {
package/src/CropEditor.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useState, useCallback } from 'react';
2
- import { View, StyleSheet, Image, Dimensions } from 'react-native';
2
+ import { View, StyleSheet, Image, Dimensions, ActivityIndicator } from 'react-native';
3
3
  import CustomImageCropper from 'react-native-perspective-image-cropper';
4
4
  import type { Rectangle as CropperRectangle } from 'react-native-perspective-image-cropper';
5
5
  import type { Point, Rectangle, CapturedDocument } from './types';
@@ -40,6 +40,7 @@ export const CropEditor: React.FC<CropEditorProps> = ({
40
40
  width: Dimensions.get('window').width,
41
41
  height: Dimensions.get('window').height,
42
42
  });
43
+ const [isImageLoading, setIsImageLoading] = useState(true);
43
44
 
44
45
  // Get initial rectangle from detected quad or use default
45
46
  const getInitialRectangle = useCallback((): CropperRectangle | undefined => {
@@ -66,7 +67,9 @@ export const CropEditor: React.FC<CropEditorProps> = ({
66
67
 
67
68
  const handleImageLoad = useCallback((event: any) => {
68
69
  const { width, height } = event.nativeEvent.source;
70
+ console.log('Image loaded with size:', { width, height });
69
71
  setImageSize({ width, height });
72
+ setIsImageLoading(false);
70
73
  }, []);
71
74
 
72
75
  const handleLayout = useCallback((event: any) => {
@@ -90,33 +93,38 @@ export const CropEditor: React.FC<CropEditorProps> = ({
90
93
  onCropChange?.(rect);
91
94
  }, [imageSize, onCropChange]);
92
95
 
93
- // Wait for image to load to get dimensions
94
- if (!imageSize) {
95
- return (
96
- <View style={styles.container} onLayout={handleLayout}>
97
- <Image
98
- source={{ uri: `file://${document.path}` }}
99
- style={styles.hiddenImage}
100
- onLoad={handleImageLoad}
101
- resizeMode="contain"
102
- />
103
- </View>
104
- );
105
- }
106
-
107
96
  return (
108
97
  <View style={styles.container} onLayout={handleLayout}>
109
- <CustomImageCropper
110
- height={displaySize.height}
111
- width={displaySize.width}
112
- image={`file://${document.path}`}
113
- rectangleCoordinates={getInitialRectangle()}
114
- overlayColor={overlayColor}
115
- overlayStrokeColor={overlayStrokeColor}
116
- handlerColor={handlerColor}
117
- enablePanStrict={enablePanStrict}
118
- onDragEnd={handleDragEnd}
98
+ {/* Always load the hidden image to get dimensions */}
99
+ <Image
100
+ source={{ uri: `file://${document.path}` }}
101
+ style={styles.hiddenImage}
102
+ onLoad={handleImageLoad}
103
+ onError={(error) => {
104
+ console.error('Image load error:', error);
105
+ setIsImageLoading(false);
106
+ }}
107
+ resizeMode="contain"
119
108
  />
109
+
110
+ {/* Show loading or cropper */}
111
+ {!imageSize || isImageLoading ? (
112
+ <View style={styles.loadingContainer}>
113
+ <ActivityIndicator size="large" color={handlerColor} />
114
+ </View>
115
+ ) : (
116
+ <CustomImageCropper
117
+ height={displaySize.height}
118
+ width={displaySize.width}
119
+ image={`file://${document.path}`}
120
+ rectangleCoordinates={getInitialRectangle()}
121
+ overlayColor={overlayColor}
122
+ overlayStrokeColor={overlayStrokeColor}
123
+ handlerColor={handlerColor}
124
+ enablePanStrict={enablePanStrict}
125
+ onDragEnd={handleDragEnd}
126
+ />
127
+ )}
120
128
  </View>
121
129
  );
122
130
  };
@@ -126,9 +134,14 @@ const styles = StyleSheet.create({
126
134
  flex: 1,
127
135
  backgroundColor: '#000',
128
136
  },
137
+ loadingContainer: {
138
+ justifyContent: 'center',
139
+ alignItems: 'center',
140
+ },
129
141
  hiddenImage: {
130
142
  width: 1,
131
143
  height: 1,
132
144
  opacity: 0,
145
+ position: 'absolute',
133
146
  },
134
147
  });