react-native-expo-cropper 1.2.45 → 1.2.46

package/dist/CustomCamera.js

@@ -25,11 +25,14 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var _Dimensions$get = _reactNative.Dimensions.get('window'),
-  width = _Dimensions$get.width;
+// Max width for camera preview on large screens (tablets) so it doesn't stretch full width
+var CAMERA_PREVIEW_MAX_WIDTH = 500;
 function CustomCamera(_ref) {
   var onPhotoCaptured = _ref.onPhotoCaptured,
     onFrameCalculated = _ref.onFrameCalculated;
+  var _useWindowDimensions = (0, _reactNative.useWindowDimensions)(),
+    windowWidth = _useWindowDimensions.width;
+  var cameraPreviewWidth = Math.min(windowWidth, CAMERA_PREVIEW_MAX_WIDTH);
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isReady = _useState2[0],
@@ -249,7 +252,9 @@ function CustomCamera(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_reactNative.SafeAreaView, {
     style: styles.outerContainer
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
-    style: styles.cameraWrapper,
+    style: [styles.cameraWrapper, {
+      width: cameraPreviewWidth
+    }],
     ref: cameraWrapperRef,
     onLayout: function onLayout(e) {
       var layout = e.nativeEvent.layout;
@@ -310,7 +315,6 @@ var styles = _reactNative.StyleSheet.create({
     alignItems: 'center'
   },
   cameraWrapper: {
-    width: width,
     aspectRatio: 9 / 16,
     borderRadius: 30,
     overflow: 'hidden',

package/dist/ImageCropper.js

@@ -36,6 +36,9 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var PRIMARY_GREEN = '#198754';
+
+// Max width for crop preview on large screens (tablets) - must match CustomCamera.js
+var CAMERA_PREVIEW_MAX_WIDTH = 500;
 var ImageCropper = function ImageCropper(_ref) {
   var _cameraFrameData$curr3;
   var onConfirm = _ref.onConfirm,
@@ -43,6 +46,9 @@ var ImageCropper = function ImageCropper(_ref) {
     initialImage = _ref.initialImage,
     addheight = _ref.addheight,
     rotationLabel = _ref.rotationLabel;
+  var _useWindowDimensions = (0, _reactNative.useWindowDimensions)(),
+    windowWidth = _useWindowDimensions.width;
+  var cameraPreviewWidth = Math.min(windowWidth, CAMERA_PREVIEW_MAX_WIDTH);
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     image = _useState2[0],
@@ -1299,6 +1305,31 @@ var ImageCropper = function ImageCropper(_ref) {
     style: _ImageCropperStyles["default"].container
   }, showCustomCamera ? /*#__PURE__*/_react["default"].createElement(_CustomCamera["default"], {
     onPhotoCaptured: function onPhotoCaptured(uri, frameData) {
+      // ✅ Reset refs for new image so second (and later) photos don't use first image's layout (fixes white screen on some devices)
+      originalImageDimensions.current = {
+        width: 0,
+        height: 0
+      };
+      imageDisplayRect.current = {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      };
+      displayedImageLayout.current = {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      };
+      imageMeasure.current = {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      };
+      sourceImageUri.current = uri;
+
       // ✅ CRITICAL FIX: Store green frame coordinates for coordinate conversion
       if (frameData && frameData.greenFrame) {
         cameraFrameData.current = {
@@ -1322,17 +1353,9 @@ var ImageCropper = function ImageCropper(_ref) {
       return setShowCustomCamera(false);
     }
   }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
-    style: {
-      width: _reactNative.Dimensions.get('window').width,
-      aspectRatio: 9 / 16,
-      borderRadius: 30,
-      overflow: 'hidden',
-      alignItems: 'center',
-      justifyContent: 'center',
-      position: 'relative',
-      backgroundColor: 'black',
-      marginBottom: 0 // ✅ Les boutons sont maintenant en position absolue en bas
-    },
+    style: [_ImageCropperStyles["default"].commonWrapper, {
+      width: cameraPreviewWidth
+    }],
     ref: commonWrapperRef,
     onLayout: onCommonWrapperLayout
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
@@ -1402,6 +1425,7 @@ var ImageCropper = function ImageCropper(_ref) {
       return hasMovement;
     }
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Image, {
+    key: image,
     source: {
       uri: image
     },
@@ -1413,8 +1437,8 @@ var ImageCropper = function ImageCropper(_ref) {
     pointerEvents: "none"
   }, function () {
     // ✅ Use wrapper dimensions for SVG path (wrapper coordinates)
-    var wrapperWidth = commonWrapperLayout.current.width || _reactNative.Dimensions.get('window').width;
-    var wrapperHeight = commonWrapperLayout.current.height || _reactNative.Dimensions.get('window').width * 16 / 9;
+    var wrapperWidth = commonWrapperLayout.current.width || cameraPreviewWidth;
+    var wrapperHeight = commonWrapperLayout.current.height || cameraPreviewWidth * 16 / 9;
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Path, {
       d: "M 0 0 H ".concat(wrapperWidth, " V ").concat(wrapperHeight, " H 0 Z ").concat(createPath()),
       fill: showResult ? 'white' : 'rgba(0, 0, 0, 0.8)',

package/dist/ImageCropperStyles.js

@@ -21,6 +21,17 @@ var styles = _reactNative.StyleSheet.create({
     // ✅ Start from top, allow content to flow down
     backgroundColor: DEEP_BLACK
   },
+  // Wrapper for crop preview (9/16, same as CustomCamera); width set dynamically for tablet
+  commonWrapper: {
+    aspectRatio: 9 / 16,
+    borderRadius: 30,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    backgroundColor: 'black',
+    marginBottom: 0
+  },
   buttonContainer: {
     position: 'absolute',
     bottom: 50,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-expo-cropper",
-  "version": "1.2.45",
+  "version": "1.2.46",
   "description": "Recadrage polygonal d'images.",
   "main": "index.js",
   "author": "PCS AGRI",

package/src/ImageCropper.js

@@ -1100,6 +1100,13 @@ const rotatePreviewImage = async (degrees) => {
       {showCustomCamera ? (
         <CustomCamera
           onPhotoCaptured={(uri, frameData) => { 
+            // ✅ Reset refs for new image so second (and later) photos don't use first image's layout (fixes white screen on some devices)
+            originalImageDimensions.current = { width: 0, height: 0 };
+            imageDisplayRect.current = { x: 0, y: 0, width: 0, height: 0 };
+            displayedImageLayout.current = { x: 0, y: 0, width: 0, height: 0 };
+            imageMeasure.current = { x: 0, y: 0, width: 0, height: 0 };
+            sourceImageUri.current = uri;
+
             // ✅ CRITICAL FIX: Store green frame coordinates for coordinate conversion
             if (frameData && frameData.greenFrame) {
               cameraFrameData.current = {
@@ -1197,6 +1204,7 @@ const rotatePreviewImage = async (degrees) => {
                 }}
               >
                 <Image
+                  key={image}
                   source={{ uri: image }}
                   style={styles.image}
                   resizeMode={cameraFrameData.current?.greenFrame ? 'cover' : 'contain'}