react-native-expo-cropper 1.2.44 → 1.2.46

package/.babelrc

@@ -1,7 +1,7 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
-  ]
-}
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}
   

package/App.js

@@ -1,27 +1,27 @@
-import React from 'react';
-import { SafeAreaView, StatusBar, StyleSheet } from 'react-native';
-import ImageCropper from './src/ImageCropper';
-
-const App = () => {
-  const handleCrop = (uri) => {
-    console.log('Cropped Image URI:', uri);
-  };
-
-  return (
-    <>
-      <StatusBar backgroundColor="black" barStyle="light-content" />
-      <SafeAreaView style={styles.container}>
-        <ImageCropper onCrop={handleCrop} />
-      </SafeAreaView>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'black', 
-  },
-});
-
-export default App;
+import React from 'react';
+import { SafeAreaView, StatusBar, StyleSheet } from 'react-native';
+import ImageCropper from './src/ImageCropper';
+
+const App = () => {
+  const handleCrop = (uri) => {
+    console.log('Cropped Image URI:', uri);
+  };
+
+  return (
+    <>
+      <StatusBar backgroundColor="black" barStyle="light-content" />
+      <SafeAreaView style={styles.container}>
+        <ImageCropper onCrop={handleCrop} />
+      </SafeAreaView>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'black', 
+  },
+});
+
+export default App;

package/app.json

@@ -1,3 +1,3 @@
-{
-  "expo": {}
+{
+  "expo": {}
 }

package/babel.config.js

@@ -1,6 +1,6 @@
-module.exports = {
-  presets: [
-    '@babel/preset-env',
-    '@babel/preset-react'
-  ]
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react'
+  ]
 };

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/dist/ImageMaskProcessor.js

@@ -14,18 +14,18 @@ function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present,
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
-/**
- * ImageMaskProcessor - Module pour appliquer un masque alpha à une image
- * 
- * NOTE: Ce module est actuellement désactivé par défaut (enableMask = false)
- * car captureRef peut se bloquer sur certaines configurations.
- * 
- * Pour activer le masque, mettre enableMask = true dans ImageCropper.js
- * ATTENTION: Peut causer des blocages sur certaines configurations
+/**
+ * ImageMaskProcessor - Module pour appliquer un masque alpha à une image
+ * 
+ * NOTE: Ce module est actuellement désactivé par défaut (enableMask = false)
+ * car captureRef peut se bloquer sur certaines configurations.
+ * 
+ * Pour activer le masque, mettre enableMask = true dans ImageCropper.js
+ * ATTENTION: Peut causer des blocages sur certaines configurations
  */
 
-/**
- * Crée un chemin SVG à partir de points
+/**
+ * Crée un chemin SVG à partir de points
  */
 var createPathFromPoints = function createPathFromPoints(points) {
   if (points.length < 3) return '';
@@ -36,9 +36,9 @@ var createPathFromPoints = function createPathFromPoints(points) {
   return path + 'Z';
 };
 
-/**
- * Composant MaskView - Vue avec image et masque SVG
- * Utilisé pour capturer l'image avec le masque appliqué
+/**
+ * Composant MaskView - Vue avec image et masque SVG
+ * Utilisé pour capturer l'image avec le masque appliqué
  */
 var MaskView = exports.MaskView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var imageUri = _ref.imageUri,
@@ -78,18 +78,18 @@ var MaskView = exports.MaskView = /*#__PURE__*/(0, _react.forwardRef)(function (
 });
 MaskView.displayName = 'MaskView';
 
-/**
- * Applique un masque alpha à une image en utilisant captureRef
- * 
- * @param {string} imageUri - URI de l'image à masquer
- * @param {Array} points - Points définissant le masque (coordonnées normalisées)
- * @param {number} width - Largeur de l'image
- * @param {number} height - Hauteur de l'image
- * @param {React.Ref} maskViewRef - Référence à la vue MaskView
- * @returns {Promise<string>} URI de l'image masquée
- * 
- * NOTE: Cette fonction utilise captureRef qui peut se bloquer.
- * Utiliser uniquement si enableMask = true dans ImageCropper.js
+/**
+ * Applique un masque alpha à une image en utilisant captureRef
+ * 
+ * @param {string} imageUri - URI de l'image à masquer
+ * @param {Array} points - Points définissant le masque (coordonnées normalisées)
+ * @param {number} width - Largeur de l'image
+ * @param {number} height - Hauteur de l'image
+ * @param {React.Ref} maskViewRef - Référence à la vue MaskView
+ * @returns {Promise<string>} URI de l'image masquée
+ * 
+ * NOTE: Cette fonction utilise captureRef qui peut se bloquer.
+ * Utiliser uniquement si enableMask = true dans ImageCropper.js
  */
 // width/height = dimensions de sortie souhaitées EN PIXELS (pas dp)
 var applyMaskToImage = exports.applyMaskToImage = /*#__PURE__*/function () {

package/dist/ImageProcessor.js

@@ -11,13 +11,13 @@ function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present,
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
-/**
- * Retourne l'image originale sans redimensionnement pour préserver la qualité maximale.
- * Le redimensionnement destructif a été supprimé pour éviter la perte de résolution.
- * 
- * @param {string} uri - URI de l'image originale
- * @param {number} addheight - Paramètre conservé pour compatibilité (non utilisé)
- * @returns {Promise<string>} URI de l'image originale (sans modification)
+/**
+ * Retourne l'image originale sans redimensionnement pour préserver la qualité maximale.
+ * Le redimensionnement destructif a été supprimé pour éviter la perte de résolution.
+ * 
+ * @param {string} uri - URI de l'image originale
+ * @param {number} addheight - Paramètre conservé pour compatibilité (non utilisé)
+ * @returns {Promise<string>} URI de l'image originale (sans modification)
  */
 var enhanceImage = exports.enhanceImage = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(uri, addheight) {

package/index.js

@@ -1,6 +1,6 @@
-import { registerRootComponent } from 'expo';
-import App from './App';
-
-registerRootComponent(App);
-
-
+import { registerRootComponent } from 'expo';
+import App from './App';
+
+registerRootComponent(App);
+
+

package/package.json

@@ -1,59 +1,59 @@
-{
-  "name": "react-native-expo-cropper",
-  "version": "1.2.44",
-  "description": "Recadrage polygonal d'images.",
-  "main": "index.js",
-  "author": "PCS AGRI",
-  "license": "MIT",
-  "keywords": [
-    "react-native",
-    "expo",
-    "image-cropper",
-    "camera",
-    "polygonal",
-    "image",
-    "react-native-component"
-  ],
-  "peerDependencies": {
-    "expo": "54.0.0",
-    "react": "19.1.0",
-    "react-native": "0.81.4"
-  },
-  "dependencies": {
-    "@expo/vector-icons": "^15.0.2",
-    "expo": "54.0.0",
-    "expo-camera": "~17.0.8",
-    "expo-image-manipulator": "~14.0.7",
-    "expo-image-picker": "~17.0.8",
-    "expo-media-library": "~18.2.0",
-    "expo-screen-orientation": "~9.0.7",
-    "react-native-svg": "15.12.1",
-    "react-native-view-shot": "4.0.3",
-    "@react-native-masked-view/masked-view": "^0.3.1"
-  },
-  "overrides": {
-    "glob": "^10.5.0"
-  },
-  "engines": {
-    "node": ">=14"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/pcsagri/react-native-expo-cropper.git"
-  },
-  "bugs": {
-    "url": "https://github.com/pcsagri/react-native-expo-cropper/issues"
-  },
-  "homepage": "https://github.com/pcsagri/react-native-expo-cropper#readme",
- "scripts": {
-  "test": "echo \"Error: no test specified\" && exit 1",
-  "build": "npx --package=@babel/cli babel src --out-dir dist"
-},
-  "devDependencies": {
-    "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
-    "@babel/preset-react": "^7.28.5",
-    "baseline-browser-mapping": "^2.9.6"
-  }
-}
+{
+  "name": "react-native-expo-cropper",
+  "version": "1.2.46",
+  "description": "Recadrage polygonal d'images.",
+  "main": "index.js",
+  "author": "PCS AGRI",
+  "license": "MIT",
+  "keywords": [
+    "react-native",
+    "expo",
+    "image-cropper",
+    "camera",
+    "polygonal",
+    "image",
+    "react-native-component"
+  ],
+  "peerDependencies": {
+    "expo": "54.0.0",
+    "react": "19.1.0",
+    "react-native": "0.81.4"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.2",
+    "expo": "54.0.0",
+    "expo-camera": "~17.0.8",
+    "expo-image-manipulator": "~14.0.7",
+    "expo-image-picker": "~17.0.8",
+    "expo-media-library": "~18.2.0",
+    "expo-screen-orientation": "~9.0.7",
+    "react-native-svg": "15.12.1",
+    "react-native-view-shot": "4.0.3",
+    "@react-native-masked-view/masked-view": "^0.3.1"
+  },
+  "overrides": {
+    "glob": "^10.5.0"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pcsagri/react-native-expo-cropper.git"
+  },
+  "bugs": {
+    "url": "https://github.com/pcsagri/react-native-expo-cropper/issues"
+  },
+  "homepage": "https://github.com/pcsagri/react-native-expo-cropper#readme",
+ "scripts": {
+  "test": "echo \"Error: no test specified\" && exit 1",
+  "build": "npx --package=@babel/cli babel src --out-dir dist"
+},
+  "devDependencies": {
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "baseline-browser-mapping": "^2.9.6"
+  }
+}