react-native-expo-cropper 1.2.45 → 1.2.47

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],
@@ -42,22 +45,28 @@ function CustomCamera(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     hasPermission = _useState6[0],
     setHasPermission = _useState6[1];
+  // Force a fresh native CameraView instance per "open" to avoid stale/cached preview.
+  var _useState7 = (0, _react.useState)(function () {
+      return "".concat(Date.now(), "-").concat(Math.random().toString(16).slice(2));
+    }),
+    _useState8 = _slicedToArray(_useState7, 1),
+    cameraViewMountKey = _useState8[0];
   var cameraRef = (0, _react.useRef)(null);
   var cameraWrapperRef = (0, _react.useRef)(null);
   var insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  var _useState7 = (0, _react.useState)({
+  var _useState9 = (0, _react.useState)({
       width: 0,
       height: 0,
       x: 0,
       y: 0
     }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    cameraWrapperLayout = _useState8[0],
-    setCameraWrapperLayout = _useState8[1];
-  var _useState9 = (0, _react.useState)(null),
     _useState0 = _slicedToArray(_useState9, 2),
-    greenFrame = _useState0[0],
-    setGreenFrame = _useState0[1];
+    cameraWrapperLayout = _useState0[0],
+    setCameraWrapperLayout = _useState0[1];
+  var _useState1 = (0, _react.useState)(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    greenFrame = _useState10[0],
+    setGreenFrame = _useState10[1];
   (0, _react.useEffect)(function () {
     _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var _yield$Camera$request, status;
@@ -249,7 +258,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;
@@ -262,6 +273,7 @@ function CustomCamera(_ref) {
       console.log("Camera wrapper layout updated:", layout);
     }
   }, /*#__PURE__*/_react["default"].createElement(_expoCamera.CameraView, {
+    key: cameraViewMountKey,
     style: styles.camera,
     facing: "back",
     ref: cameraRef,
@@ -310,7 +322,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],
@@ -247,6 +253,7 @@ var ImageCropper = function ImageCropper(_ref) {
   var rotationInProgressRef = (0, _react.useRef)(false); // block duplicate taps immediately
   var lastValidPosition = (0, _react.useRef)(null);
   var insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  var openCameraTimeoutRef = (0, _react.useRef)(null);
 
   // ✅ NEW ARCH: mobile does NOT export the final crop.
 
@@ -255,8 +262,17 @@ var ImageCropper = function ImageCropper(_ref) {
   var enableRotation = true; // rotation resets crop box so it is re-initialized on rotated image.
 
   (0, _react.useEffect)(function () {
+    // If a previous open was scheduled, cancel it.
+    if (openCameraTimeoutRef.current) {
+      clearTimeout(openCameraTimeoutRef.current);
+      openCameraTimeoutRef.current = null;
+    }
     if (openCameraFirst) {
-      setShowCustomCamera(true);
+      // Delay opening the camera so the prior session can fully release.
+      openCameraTimeoutRef.current = setTimeout(function () {
+        setShowCustomCamera(true);
+        openCameraTimeoutRef.current = null;
+      }, 800);
     } else if (initialImage) {
       setImage(initialImage);
       sourceImageUri.current = initialImage;
@@ -270,6 +286,12 @@ var ImageCropper = function ImageCropper(_ref) {
       hasInitializedCropBox.current = false;
       imageSource.current = null;
     }
+    return function () {
+      if (openCameraTimeoutRef.current) {
+        clearTimeout(openCameraTimeoutRef.current);
+        openCameraTimeoutRef.current = null;
+      }
+    };
   }, [openCameraFirst, initialImage]);
 
   // ✅ REFACTORISATION : Stocker uniquement les dimensions originales (pas de calcul théorique)
@@ -1322,17 +1344,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, {
@@ -1413,8 +1427,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.47",
   "description": "Recadrage polygonal d'images.",
   "main": "index.js",
   "author": "PCS AGRI",

package/src/CustomCamera.js

@@ -22,6 +22,8 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
   const [isReady, setIsReady] = useState(false);
   const [loadingBeforeCapture, setLoadingBeforeCapture] = useState(false);
   const [hasPermission, setHasPermission] = useState(null);
+  // Force a fresh native CameraView instance per "open" to avoid stale/cached preview.
+  const [cameraViewMountKey] = useState(() => `${Date.now()}-${Math.random().toString(16).slice(2)}`);
   const cameraRef = useRef(null);
   const cameraWrapperRef = useRef(null);
   const insets = useSafeAreaInsets();
@@ -213,6 +215,7 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
         }}
       >
         <CameraView
+          key={cameraViewMountKey}
           style={styles.camera}
           facing="back"
           ref={cameraRef}

package/src/ImageCropper.js

@@ -141,6 +141,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
   const rotationInProgressRef = useRef(false); // block duplicate taps immediately
   const lastValidPosition = useRef(null);
   const insets = useSafeAreaInsets();
+  const openCameraTimeoutRef = useRef(null);
   
   // ✅ NEW ARCH: mobile does NOT export the final crop.
 
@@ -153,22 +154,39 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
 
 
   useEffect(() => {
-  if (openCameraFirst) {
-  setShowCustomCamera(true);
-} else if (initialImage) {
-  setImage(initialImage);
-  sourceImageUri.current = initialImage;
-  // ✅ CRITICAL: Reset points when loading a new image from gallery
-  // This ensures the crop box will be automatically initialized
-  setPoints([]);
-  rotationAngle.current = 0;
-  // Clear camera frame data for gallery images
-  cameraFrameData.current = null;
-  // ✅ CRITICAL: Reset initialization guard for new image
-  hasInitializedCropBox.current = false;
-  imageSource.current = null;
-}
-}, [openCameraFirst, initialImage]);
+    // If a previous open was scheduled, cancel it.
+    if (openCameraTimeoutRef.current) {
+      clearTimeout(openCameraTimeoutRef.current);
+      openCameraTimeoutRef.current = null;
+    }
+
+    if (openCameraFirst) {
+      // Delay opening the camera so the prior session can fully release.
+      openCameraTimeoutRef.current = setTimeout(() => {
+        setShowCustomCamera(true);
+        openCameraTimeoutRef.current = null;
+      }, 800);
+    } else if (initialImage) {
+      setImage(initialImage);
+      sourceImageUri.current = initialImage;
+      // ✅ CRITICAL: Reset points when loading a new image from gallery
+      // This ensures the crop box will be automatically initialized
+      setPoints([]);
+      rotationAngle.current = 0;
+      // Clear camera frame data for gallery images
+      cameraFrameData.current = null;
+      // ✅ CRITICAL: Reset initialization guard for new image
+      hasInitializedCropBox.current = false;
+      imageSource.current = null;
+    }
+
+    return () => {
+      if (openCameraTimeoutRef.current) {
+        clearTimeout(openCameraTimeoutRef.current);
+        openCameraTimeoutRef.current = null;
+      }
+    };
+  }, [openCameraFirst, initialImage]);
 
 
   // ✅ REFACTORISATION : Stocker uniquement les dimensions originales (pas de calcul théorique)