react-native-expo-cropper 1.2.40 → 1.2.41

package/dist/CustomCamera.js

@@ -8,7 +8,7 @@ exports["default"] = CustomCamera;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-var _reactNativeVisionCamera = require("react-native-vision-camera");
+var _expoCamera = require("expo-camera");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -38,31 +38,44 @@ function CustomCamera(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     loadingBeforeCapture = _useState4[0],
     setLoadingBeforeCapture = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasPermission = _useState6[0],
+    setHasPermission = _useState6[1];
   var cameraRef = (0, _react.useRef)(null);
   var cameraWrapperRef = (0, _react.useRef)(null);
   var insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  var _useState5 = (0, _react.useState)({
+  var _useState7 = (0, _react.useState)({
       width: 0,
       height: 0,
       x: 0,
       y: 0
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    cameraWrapperLayout = _useState6[0],
-    setCameraWrapperLayout = _useState6[1];
-  var _useState7 = (0, _react.useState)(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    greenFrame = _useState8[0],
-    setGreenFrame = _useState8[1];
-  var _useCameraPermission = (0, _reactNativeVisionCamera.useCameraPermission)(),
-    hasPermission = _useCameraPermission.hasPermission,
-    requestPermission = _useCameraPermission.requestPermission;
-  var device = (0, _reactNativeVisionCamera.useCameraDevice)('back');
+    cameraWrapperLayout = _useState8[0],
+    setCameraWrapperLayout = _useState8[1];
+  var _useState9 = (0, _react.useState)(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    greenFrame = _useState0[0],
+    setGreenFrame = _useState0[1];
   (0, _react.useEffect)(function () {
-    if (!hasPermission) {
-      requestPermission();
-    }
-  }, [hasPermission, requestPermission]);
+    _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var _yield$Camera$request, status;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            _context.n = 1;
+            return _expoCamera.Camera.requestCameraPermissionsAsync();
+          case 1:
+            _yield$Camera$request = _context.v;
+            status = _yield$Camera$request.status;
+            setHasPermission(status === 'granted');
+          case 2:
+            return _context.a(2);
+        }
+      }, _callee);
+    }))();
+  }, []);
 
   // Helper function to wait for multiple render cycles (works on iOS)
   var waitForRender = function waitForRender() {
@@ -81,19 +94,26 @@ function CustomCamera(_ref) {
     });
   };
 
-  // Green frame coordinates relative to camera preview wrapper.
-  // Preview matches sensor output (VisionCamera) so framing matches capture.
+  // ✅ CRITICAL FIX: Calculate green frame coordinates relative to camera preview
+  // The green frame should be calculated on the wrapper (as it's visually drawn there)
+  // But we store it with wrapper dimensions so ImageCropper can map it correctly
+  //
+  // NOTE: Camera capture aspect ratio (typically 4:3) may differ from wrapper aspect ratio (9:16)
+  // This is handled in ImageCropper by using "cover" mode to match preview content
   var calculateGreenFrameCoordinates = function calculateGreenFrameCoordinates() {
     var wrapperWidth = cameraWrapperLayout.width;
     var wrapperHeight = cameraWrapperLayout.height;
     if (wrapperWidth === 0 || wrapperHeight === 0) {
-      console.warn('Camera wrapper layout not ready, cannot calculate green frame');
+      console.warn("Camera wrapper layout not ready, cannot calculate green frame");
       return null;
     }
-    var frameWidth = wrapperWidth * 0.85;
-    var frameHeight = wrapperHeight * 0.7;
-    var frameX = (wrapperWidth - frameWidth) / 2;
-    var frameY = (wrapperHeight - frameHeight) / 2;
+
+    // ✅ Calculate green frame as percentage of WRAPPER
+    var frameWidth = wrapperWidth * 0.85; // 85% of wrapper width
+    var frameHeight = wrapperHeight * 0.70; // 70% of wrapper height
+    var frameX = (wrapperWidth - frameWidth) / 2; // Centered horizontally
+    var frameY = (wrapperHeight - frameHeight) / 2; // Centered vertically
+
     var frameCoords = {
       x: frameX,
       y: frameY,
@@ -101,14 +121,19 @@ function CustomCamera(_ref) {
       height: frameHeight,
       wrapperWidth: wrapperWidth,
       wrapperHeight: wrapperHeight,
+      // ✅ Store percentages for easier mapping later
       percentX: frameX / wrapperWidth * 100,
       percentY: frameY / wrapperHeight * 100,
       percentWidth: 85,
-      percentHeight: 70
+      // 85% of wrapper width
+      percentHeight: 70 // 70% of wrapper height
     };
-    console.log('Green frame coordinates calculated:', frameCoords);
+    console.log("✅ Green frame coordinates calculated:", frameCoords);
     return frameCoords;
   };
+
+  // 🔁 Keep green frame state in sync with wrapper layout so we can both render it
+  // and send the exact same coordinates along with the captured photo.
   (0, _react.useEffect)(function () {
     var coords = calculateGreenFrameCoordinates();
     if (coords) {
@@ -116,53 +141,86 @@ function CustomCamera(_ref) {
     }
   }, [cameraWrapperLayout]);
   var takePicture = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-      var photo, uri, capturedAspectRatio, greenFrameCoords, _t;
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.p = _context.n) {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+      var captureOptions, photo, capturedAspectRatio, greenFrameCoords, _t;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
           case 0:
-            if (!(!cameraRef.current || !device)) {
-              _context.n = 1;
+            if (!cameraRef.current) {
+              _context2.n = 7;
               break;
             }
-            return _context.a(2);
-          case 1:
-            _context.p = 1;
+            _context2.p = 1;
+            // Show loading after a delay (using setImmediate for iOS compatibility)
             waitForRender(5).then(function () {
               setLoadingBeforeCapture(true);
             });
-            _context.n = 2;
+
+            // Wait a bit before taking picture (works on iOS)
+            _context2.n = 2;
             return waitForRender(2);
           case 2:
-            _context.n = 3;
-            return cameraRef.current.takePhoto({
-              enableShutterSound: false,
-              flash: 'off'
+            // ✅ OPTIMIZED: Capture with maximum quality and native camera ratio
+            // Platform-specific optimizations for best quality
+            captureOptions = _objectSpread(_objectSpread({
+              // Maximum quality (0-1, 1 = best quality, no compression)
+              quality: 1,
+              // Disable shutter sound for better UX
+              shutterSound: false,
+              // ✅ CRITICAL: skipProcessing preserves original resolution and avoids interpolation
+              // This ensures pixel-perfect quality and prevents premature resizing
+              skipProcessing: true,
+              // Include EXIF metadata (orientation, camera settings, etc.)
+              exif: true
+            }, _reactNative.Platform.OS === 'ios' && {
+              // iOS: Use native capture format (typically 4:3 or 16:9 depending on device)
+              // No additional processing to preserve quality
+            }), _reactNative.Platform.OS === 'android' && {
+              // Android: Ensure maximum resolution capture
+              // skipProcessing already handles this, but we can add Android-specific options if needed
+            });
+            console.log("📸 Capturing photo with maximum quality settings:", {
+              platform: _reactNative.Platform.OS,
+              options: captureOptions,
+              wrapperSize: {
+                width: cameraWrapperLayout.width,
+                height: cameraWrapperLayout.height
+              }
             });
+            _context2.n = 3;
+            return cameraRef.current.takePictureAsync(captureOptions);
           case 3:
-            photo = _context.v;
-            if (!(!photo.path || !photo.width || !photo.height)) {
-              _context.n = 4;
+            photo = _context2.v;
+            if (!(!photo.width || !photo.height || photo.width === 0 || photo.height === 0)) {
+              _context2.n = 4;
               break;
             }
-            throw new Error('Invalid photo received from camera');
+            throw new Error("Invalid photo dimensions received from camera");
           case 4:
-            uri = photo.path.startsWith('file://') ? photo.path : "file://".concat(photo.path);
             capturedAspectRatio = photo.width / photo.height;
-            console.log('Photo captured (VisionCamera):', {
-              uri: uri,
+            console.log("✅ Photo captured with maximum quality:", {
+              uri: photo.uri,
               width: photo.width,
               height: photo.height,
-              aspectRatio: capturedAspectRatio.toFixed(3)
+              aspectRatio: capturedAspectRatio.toFixed(3),
+              expectedRatio: "~1.33 (4:3) or ~1.78 (16:9)",
+              exif: photo.exif ? "present" : "missing",
+              fileSize: photo.uri ? "available" : "unknown"
             });
+
+            // ✅ CRITICAL FIX: Use the same green frame coordinates that are used for rendering
+            // Fallback to recalculation if, for some reason, state is not yet set
             greenFrameCoords = greenFrame || calculateGreenFrameCoordinates();
             if (greenFrameCoords) {
-              _context.n = 5;
+              _context2.n = 5;
               break;
             }
-            throw new Error('Green frame coordinates not available');
+            throw new Error("Green frame coordinates not available");
           case 5:
-            onPhotoCaptured(uri, {
+            // ✅ Send photo URI and frame data to ImageCropper
+            // The photo maintains its native resolution and aspect ratio
+            // ImageCropper will handle display and cropping while preserving quality
+            onPhotoCaptured(photo.uri, {
               greenFrame: greenFrameCoords,
               capturedImageSize: {
                 width: photo.width,
@@ -171,46 +229,23 @@ function CustomCamera(_ref) {
               }
             });
             setLoadingBeforeCapture(false);
-            _context.n = 7;
+            _context2.n = 7;
             break;
           case 6:
-            _context.p = 6;
-            _t = _context.v;
-            console.error('Error capturing photo:', _t);
+            _context2.p = 6;
+            _t = _context2.v;
+            console.error("❌ Error capturing photo:", _t);
             setLoadingBeforeCapture(false);
-            _reactNative.Alert.alert('Erreur', "Impossible de capturer la photo: ".concat(_t.message || 'Erreur inconnue', ". Veuillez r\xE9essayer."));
+            _reactNative.Alert.alert("Erreur", "Impossible de capturer la photo: ".concat(_t.message || "Erreur inconnue", ". Veuillez r\xE9essayer."));
           case 7:
-            return _context.a(2);
+            return _context2.a(2);
         }
-      }, _callee, null, [[1, 6]]);
+      }, _callee2, null, [[1, 6]]);
     }));
     return function takePicture() {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
-  if (!hasPermission) {
-    return /*#__PURE__*/_react["default"].createElement(_reactNative.SafeAreaView, {
-      style: styles.outerContainer
-    }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
-      style: styles.permissionContainer
-    }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
-      style: styles.text
-    }, "Acc\xE8s \xE0 la cam\xE9ra requis pour prendre des photos."), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
-      style: styles.button,
-      onPress: requestPermission
-    }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
-      style: styles.buttonText
-    }, "Autoriser la cam\xE9ra"))));
-  }
-  if (!device) {
-    return /*#__PURE__*/_react["default"].createElement(_reactNative.SafeAreaView, {
-      style: styles.outerContainer
-    }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
-      style: styles.permissionContainer
-    }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
-      style: styles.text
-    }, "Aucune cam\xE9ra arri\xE8re disponible.")));
-  }
   return /*#__PURE__*/_react["default"].createElement(_reactNative.SafeAreaView, {
     style: styles.outerContainer
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
@@ -224,18 +259,19 @@ function CustomCamera(_ref) {
         x: layout.x,
         y: layout.y
       });
-      console.log('Camera wrapper layout updated:', layout);
+      console.log("Camera wrapper layout updated:", layout);
     }
-  }, /*#__PURE__*/_react["default"].createElement(_reactNativeVisionCamera.Camera, {
+  }, /*#__PURE__*/_react["default"].createElement(_expoCamera.CameraView, {
+    style: styles.camera,
+    facing: "back",
     ref: cameraRef,
-    style: _reactNative.StyleSheet.absoluteFill,
-    device: device,
-    isActive: true,
-    photo: true,
-    onInitialized: function onInitialized() {
+    onCameraReady: function onCameraReady() {
       setIsReady(true);
-      console.log('VisionCamera ready - preview matches capture');
+      console.log("✅ Camera ready - Maximum quality capture enabled");
     }
+    // ✅ Ensure camera uses native aspect ratio (typically 4:3 for most devices)
+    // The wrapper constrains the view, but capture uses full sensor resolution
+    // This ensures preview matches what will be captured
   }), loadingBeforeCapture && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: styles.loadingOverlay
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Image, {
@@ -282,6 +318,7 @@ var styles = _reactNative.StyleSheet.create({
     justifyContent: 'center',
     position: 'relative'
   },
+  camera: _objectSpread({}, _reactNative.StyleSheet.absoluteFillObject),
   scanFrame: {
     position: 'absolute',
     borderWidth: 4,
@@ -303,6 +340,14 @@ var styles = _reactNative.StyleSheet.create({
     zIndex: 21,
     backgroundColor: 'transparent'
   }),
+  cancelIcon: {
+    position: 'absolute',
+    top: 20,
+    left: 20,
+    backgroundColor: PRIMARY_GREEN,
+    borderRadius: 5,
+    padding: 8
+  },
   buttonContainer: {
     position: 'absolute',
     bottom: 0,
@@ -324,15 +369,16 @@ var styles = _reactNative.StyleSheet.create({
     fontSize: 18,
     color: GLOW_WHITE
   },
-  permissionContainer: {
+  container: {
     flex: 1,
+    backgroundColor: DEEP_BLACK,
     justifyContent: 'center',
     alignItems: 'center',
     padding: 20
   },
-  buttonText: {
-    fontSize: 16,
-    color: DEEP_BLACK,
+  iconText: {
+    fontSize: 18,
+    color: GLOW_WHITE,
     fontWeight: '600'
   }
 });

package/dist/ImageCropper.js

@@ -35,12 +35,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 PRIMARY_GREEN = '#198754';
 var ImageCropper = function ImageCropper(_ref) {
   var _cameraFrameData$curr3;
   var onConfirm = _ref.onConfirm,
     openCameraFirst = _ref.openCameraFirst,
     initialImage = _ref.initialImage,
-    addheight = _ref.addheight;
+    addheight = _ref.addheight,
+    rotationLabel = _ref.rotationLabel;
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     image = _useState2[0],
@@ -242,6 +244,7 @@ var ImageCropper = function ImageCropper(_ref) {
     _useState20 = _slicedToArray(_useState19, 2),
     isRotating = _useState20[0],
     setIsRotating = _useState20[1];
+  var rotationInProgressRef = (0, _react.useRef)(false); // block duplicate taps immediately
   var lastValidPosition = (0, _react.useRef)(null);
   var insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
 
@@ -249,7 +252,7 @@ var ImageCropper = function ImageCropper(_ref) {
 
   // No view-shot / captureRef / bitmap masking on device.
   var enableMask = false;
-  var enableRotation = false; // rotation would require careful coord transforms; keep off for pixel-perfect pipeline.
+  var enableRotation = true; // rotation resets crop box so it is re-initialized on rotated image.
 
   (0, _react.useEffect)(function () {
     if (openCameraFirst) {
@@ -1212,45 +1215,54 @@ var ImageCropper = function ImageCropper(_ref) {
       return _regenerator().w(function (_context) {
         while (1) switch (_context.p = _context.n) {
           case 0:
-            if (!(!image || isRotating)) {
+            if (image) {
               _context.n = 1;
               break;
             }
             return _context.a(2);
           case 1:
+            if (!rotationInProgressRef.current) {
+              _context.n = 2;
+              break;
+            }
+            return _context.a(2);
+          case 2:
+            // block duplicate taps immediately (no re-render delay)
+            rotationInProgressRef.current = true;
             setIsRotating(true);
-            _context.p = 2;
-            // ✅ CORRECTION : appliquer la rotation de façon incrémentale sur le fichier (pas cumulée sur un fichier déjà roté).
-            // L'ancienne version rotait l'image déjà rotée par l'angle total, ce qui donnait des rotations incorrectes (90 + 180 => 270).
+            _context.p = 3;
             rotationAngle.current = (rotationAngle.current + degrees) % 360;
-            _context.n = 3;
+
+            // Use JPEG for preview rotation (faster than PNG for large images; quality 0.92 is fine for preview)
+            _context.n = 4;
             return ImageManipulator.manipulateAsync(image, [{
               rotate: degrees
             }], {
-              compress: 1,
-              // Qualité maximale (pas de compression)
-              format: ImageManipulator.SaveFormat.PNG // Format sans perte
+              compress: 0.92,
+              format: ImageManipulator.SaveFormat.JPEG
             });
-          case 3:
+          case 4:
             rotated = _context.v;
-            // Update image pour l'aperçu - onImageLayout will call initializeCropBox automatically
+            setPoints([]);
+            hasInitializedCropBox.current = false;
             setImage(rotated.uri);
-            console.log("Rotation applied (preview increment):", degrees, "degrees; accumulated:", rotationAngle.current);
-            _context.n = 5;
+            console.log("Rotation applied:", degrees, "degrees; accumulated:", rotationAngle.current);
+            _context.n = 6;
             break;
-          case 4:
-            _context.p = 4;
+          case 5:
+            _context.p = 5;
             _t = _context.v;
             console.error("Error rotating image:", _t);
             alert("Error rotating image");
-          case 5:
-            _context.p = 5;
-            setIsRotating(false);
-            return _context.f(5);
           case 6:
+            _context.p = 6;
+            rotationInProgressRef.current = false;
+            setIsRotating(false);
+            return _context.f(6);
+          case 7:
             return _context.a(2);
         }
-      }, _callee, null, [[2, 4, 5, 6]]);
+      }, _callee, null, [[3, 5, 6, 7]]);
     }));
     return function rotatePreviewImage(_x) {
       return _ref2.apply(this, arguments);
@@ -1411,17 +1423,42 @@ var ImageCropper = function ImageCropper(_ref) {
         fill: "white"
       });
     }));
-  }()))), !showResult && image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+  }())), isRotating && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(0,0,0,0.6)',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.ActivityIndicator, {
+    size: "large",
+    color: PRIMARY_GREEN
+  }), /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: {
+      color: PRIMARY_GREEN,
+      marginTop: 8,
+      fontSize: 14
+    }
+  }, rotationLabel !== null && rotationLabel !== void 0 ? rotationLabel : 'Rotation...'))), !showResult && image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: [_ImageCropperStyles["default"].buttonContainerBelow, {
       paddingBottom: Math.max(insets.bottom, 16)
     }]
   }, _reactNative.Platform.OS === 'android' && /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
-    style: _ImageCropperStyles["default"].rotationButton,
+    style: [_ImageCropperStyles["default"].rotationButton, isRotating && {
+      opacity: 0.7
+    }],
     onPress: function onPress() {
       return enableRotation && rotatePreviewImage(90);
     },
     disabled: isRotating
-  }, /*#__PURE__*/_react["default"].createElement(_vectorIcons.Ionicons, {
+  }, isRotating ? /*#__PURE__*/_react["default"].createElement(_reactNative.ActivityIndicator, {
+    size: "small",
+    color: "white"
+  }) : /*#__PURE__*/_react["default"].createElement(_vectorIcons.Ionicons, {
     name: "sync",
     size: 24,
     color: "white"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-expo-cropper",
-  "version": "1.2.40",
+  "version": "1.2.41",
   "description": "Recadrage polygonal d'images.",
   "main": "index.js",
   "author": "PCS AGRI",
@@ -21,7 +21,6 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.2",
-    "@react-native-masked-view/masked-view": "^0.3.1",
     "expo": "54.0.0",
     "expo-camera": "~17.0.8",
     "expo-image-manipulator": "~14.0.7",
@@ -30,7 +29,7 @@
     "expo-screen-orientation": "~9.0.7",
     "react-native-svg": "15.12.1",
     "react-native-view-shot": "4.0.3",
-    "react-native-vision-camera": "^4.7.3"
+    "@react-native-masked-view/masked-view": "^0.3.1"
   },
   "overrides": {
     "glob": "^10.5.0"
@@ -46,10 +45,10 @@
     "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"
-  },
+ "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",

package/src/CustomCamera.js

@@ -11,36 +11,25 @@ import {
   Platform,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import {
-  Camera,
-  useCameraDevice,
-  useCameraPermission,
-} from 'react-native-vision-camera';
-
+import { Camera, CameraView } from 'expo-camera';
 const { width } = Dimensions.get('window');
 
 export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
   const [isReady, setIsReady] = useState(false);
   const [loadingBeforeCapture, setLoadingBeforeCapture] = useState(false);
+  const [hasPermission, setHasPermission] = useState(null);
   const cameraRef = useRef(null);
   const cameraWrapperRef = useRef(null);
   const insets = useSafeAreaInsets();
-  const [cameraWrapperLayout, setCameraWrapperLayout] = useState({
-    width: 0,
-    height: 0,
-    x: 0,
-    y: 0,
-  });
+  const [cameraWrapperLayout, setCameraWrapperLayout] = useState({ width: 0, height: 0, x: 0, y: 0 });
   const [greenFrame, setGreenFrame] = useState(null);
 
-  const { hasPermission, requestPermission } = useCameraPermission();
-  const device = useCameraDevice('back');
-
   useEffect(() => {
-    if (!hasPermission) {
-      requestPermission();
-    }
-  }, [hasPermission, requestPermission]);
+    (async () => {
+      const { status } = await Camera.requestCameraPermissionsAsync();
+      setHasPermission(status === 'granted');
+    })();
+  }, []);
 
   // Helper function to wait for multiple render cycles (works on iOS)
   const waitForRender = (cycles = 5) => {
@@ -58,23 +47,28 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
     });
   };
 
-  // Green frame coordinates relative to camera preview wrapper.
-  // Preview matches sensor output (VisionCamera) so framing matches capture.
+
+
+  // ✅ CRITICAL FIX: Calculate green frame coordinates relative to camera preview
+  // The green frame should be calculated on the wrapper (as it's visually drawn there)
+  // But we store it with wrapper dimensions so ImageCropper can map it correctly
+  //
+  // NOTE: Camera capture aspect ratio (typically 4:3) may differ from wrapper aspect ratio (9:16)
+  // This is handled in ImageCropper by using "cover" mode to match preview content
   const calculateGreenFrameCoordinates = () => {
     const wrapperWidth = cameraWrapperLayout.width;
     const wrapperHeight = cameraWrapperLayout.height;
 
     if (wrapperWidth === 0 || wrapperHeight === 0) {
-      console.warn(
-        'Camera wrapper layout not ready, cannot calculate green frame'
-      );
+      console.warn("Camera wrapper layout not ready, cannot calculate green frame");
       return null;
     }
 
-    const frameWidth = wrapperWidth * 0.85;
-    const frameHeight = wrapperHeight * 0.7;
-    const frameX = (wrapperWidth - frameWidth) / 2;
-    const frameY = (wrapperHeight - frameHeight) / 2;
+    // ✅ Calculate green frame as percentage of WRAPPER
+    const frameWidth = wrapperWidth * 0.85;   // 85% of wrapper width
+    const frameHeight = wrapperHeight * 0.70; // 70% of wrapper height
+    const frameX = (wrapperWidth - frameWidth) / 2;  // Centered horizontally
+    const frameY = (wrapperHeight - frameHeight) / 2; // Centered vertically
 
     const frameCoords = {
       x: frameX,
@@ -83,16 +77,19 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
       height: frameHeight,
       wrapperWidth,
       wrapperHeight,
+      // ✅ Store percentages for easier mapping later
       percentX: (frameX / wrapperWidth) * 100,
       percentY: (frameY / wrapperHeight) * 100,
-      percentWidth: 85,
-      percentHeight: 70,
+      percentWidth: 85,  // 85% of wrapper width
+      percentHeight: 70  // 70% of wrapper height
     };
 
-    console.log('Green frame coordinates calculated:', frameCoords);
+    console.log("✅ Green frame coordinates calculated:", frameCoords);
     return frameCoords;
   };
 
+  // 🔁 Keep green frame state in sync with wrapper layout so we can both render it
+  // and send the exact same coordinates along with the captured photo.
   useEffect(() => {
     const coords = calculateGreenFrameCoordinates();
     if (coords) {
@@ -101,82 +98,99 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
   }, [cameraWrapperLayout]);
 
   const takePicture = async () => {
-    if (!cameraRef.current || !device) return;
-    try {
-      waitForRender(5).then(() => {
-        setLoadingBeforeCapture(true);
-      });
-      await waitForRender(2);
-
-      const photo = await cameraRef.current.takePhoto({
-        enableShutterSound: false,
-        flash: 'off',
-      });
-
-      if (!photo.path || !photo.width || !photo.height) {
-        throw new Error('Invalid photo received from camera');
-      }
+    if (cameraRef.current) {
+      try {
+          // Show loading after a delay (using setImmediate for iOS compatibility)
+          waitForRender(5).then(() => {
+            setLoadingBeforeCapture(true);
+          });
 
-      const uri =
-        photo.path.startsWith('file://') ? photo.path : `file://${photo.path}`;
-      const capturedAspectRatio = photo.width / photo.height;
+        // Wait a bit before taking picture (works on iOS)
+        await waitForRender(2);
 
-      console.log('Photo captured (VisionCamera):', {
-        uri,
-        width: photo.width,
-        height: photo.height,
-        aspectRatio: capturedAspectRatio.toFixed(3),
-      });
+          // ✅ OPTIMIZED: Capture with maximum quality and native camera ratio
+          // Platform-specific optimizations for best quality
+          const captureOptions = {
+            // Maximum quality (0-1, 1 = best quality, no compression)
+            quality: 1,
 
-      const greenFrameCoords = greenFrame || calculateGreenFrameCoordinates();
-      if (!greenFrameCoords) {
-        throw new Error('Green frame coordinates not available');
-      }
+            // Disable shutter sound for better UX
+            shutterSound: false,
 
-      onPhotoCaptured(uri, {
-        greenFrame: greenFrameCoords,
-        capturedImageSize: {
-          width: photo.width,
-          height: photo.height,
-          aspectRatio: capturedAspectRatio,
-        },
-      });
-
-      setLoadingBeforeCapture(false);
-    } catch (error) {
-      console.error('Error capturing photo:', error);
-      setLoadingBeforeCapture(false);
-      Alert.alert(
-        'Erreur',
-        `Impossible de capturer la photo: ${error.message || 'Erreur inconnue'}. Veuillez réessayer.`
-      );
+            // ✅ CRITICAL: skipProcessing preserves original resolution and avoids interpolation
+            // This ensures pixel-perfect quality and prevents premature resizing
+            skipProcessing: true,
+
+            // Include EXIF metadata (orientation, camera settings, etc.)
+            exif: true,
+
+            // ✅ Platform-specific optimizations
+            ...(Platform.OS === 'ios' && {
+              // iOS: Use native capture format (typically 4:3 or 16:9 depending on device)
+              // No additional processing to preserve quality
+            }),
+            ...(Platform.OS === 'android' && {
+              // Android: Ensure maximum resolution capture
+              // skipProcessing already handles this, but we can add Android-specific options if needed
+            }),
+          };
+
+          console.log("📸 Capturing photo with maximum quality settings:", {
+            platform: Platform.OS,
+            options: captureOptions,
+            wrapperSize: { width: cameraWrapperLayout.width, height: cameraWrapperLayout.height }
+          });
+
+          const photo = await cameraRef.current.takePictureAsync(captureOptions);
+
+          // ✅ Validate captured photo dimensions
+          if (!photo.width || !photo.height || photo.width === 0 || photo.height === 0) {
+            throw new Error("Invalid photo dimensions received from camera");
+          }
+
+          const capturedAspectRatio = photo.width / photo.height;
+          console.log("✅ Photo captured with maximum quality:", {
+            uri: photo.uri,
+            width: photo.width,
+            height: photo.height,
+            aspectRatio: capturedAspectRatio.toFixed(3),
+            expectedRatio: "~1.33 (4:3) or ~1.78 (16:9)",
+            exif: photo.exif ? "present" : "missing",
+            fileSize: photo.uri ? "available" : "unknown"
+          });
+
+          // ✅ CRITICAL FIX: Use the same green frame coordinates that are used for rendering
+          // Fallback to recalculation if, for some reason, state is not yet set
+          const greenFrameCoords = greenFrame || calculateGreenFrameCoordinates();
+
+          if (!greenFrameCoords) {
+            throw new Error("Green frame coordinates not available");
+          }
+
+          // ✅ Send photo URI and frame data to ImageCropper
+          // The photo maintains its native resolution and aspect ratio
+          // ImageCropper will handle display and cropping while preserving quality
+          onPhotoCaptured(photo.uri, {
+            greenFrame: greenFrameCoords,
+            capturedImageSize: {
+              width: photo.width,
+              height: photo.height,
+              aspectRatio: capturedAspectRatio
+            }
+          });
+
+          setLoadingBeforeCapture(false);
+      } catch (error) {
+        console.error("❌ Error capturing photo:", error);
+        setLoadingBeforeCapture(false);
+        Alert.alert(
+          "Erreur",
+          `Impossible de capturer la photo: ${error.message || "Erreur inconnue"}. Veuillez réessayer.`
+        );
+      }
     }
   };
 
-  if (!hasPermission) {
-    return (
-      <SafeAreaView style={styles.outerContainer}>
-        <View style={styles.permissionContainer}>
-          <Text style={styles.text}>
-            Accès à la caméra requis pour prendre des photos.
-          </Text>
-          <TouchableOpacity style={styles.button} onPress={requestPermission}>
-            <Text style={styles.buttonText}>Autoriser la caméra</Text>
-          </TouchableOpacity>
-        </View>
-      </SafeAreaView>
-    );
-  }
-
-  if (!device) {
-    return (
-      <SafeAreaView style={styles.outerContainer}>
-        <View style={styles.permissionContainer}>
-          <Text style={styles.text}>Aucune caméra arrière disponible.</Text>
-        </View>
-      </SafeAreaView>
-    );
-  }
 
   return (
     <SafeAreaView style={styles.outerContainer}>
@@ -189,23 +203,25 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
             width: layout.width,
             height: layout.height,
             x: layout.x,
-            y: layout.y,
+            y: layout.y
           });
-          console.log('Camera wrapper layout updated:', layout);
+          console.log("Camera wrapper layout updated:", layout);
         }}
       >
-        <Camera
+        <CameraView
+          style={styles.camera}
+          facing="back"
           ref={cameraRef}
-          style={StyleSheet.absoluteFill}
-          device={device}
-          isActive={true}
-          photo={true}
-          onInitialized={() => {
+          onCameraReady={() => {
             setIsReady(true);
-            console.log('VisionCamera ready - preview matches capture');
+            console.log("✅ Camera ready - Maximum quality capture enabled");
           }}
+          // ✅ Ensure camera uses native aspect ratio (typically 4:3 for most devices)
+          // The wrapper constrains the view, but capture uses full sensor resolution
+          // This ensures preview matches what will be captured
         />
 
+        {/* Loading overlay */}
         {loadingBeforeCapture && (
           <>
             <View style={styles.loadingOverlay}>
@@ -219,6 +235,7 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
           </>
         )}
 
+        {/* Cadre de scan - rendered using calculated coordinates (x, y, width, height) */}
         {greenFrame && (
           <View
             style={[
@@ -234,12 +251,7 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
         )}
       </View>
 
-      <View
-        style={[
-          styles.buttonContainer,
-          { bottom: (insets?.bottom || 0) + 16, marginBottom: 0 },
-        ]}
-      >
+      <View style={[styles.buttonContainer, { bottom: (insets?.bottom || 0) + 16, marginBottom: 0 }]}>
         <TouchableOpacity
           style={styles.button}
           onPress={takePicture}
@@ -270,6 +282,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     position: 'relative',
   },
+  camera: {
+    ...StyleSheet.absoluteFillObject,
+  },
   scanFrame: {
     position: 'absolute',
     borderWidth: 4,
@@ -293,6 +308,14 @@ const styles = StyleSheet.create({
     zIndex: 21,
     backgroundColor: 'transparent',
   },
+  cancelIcon: {
+    position: 'absolute',
+    top: 20,
+    left: 20,
+    backgroundColor: PRIMARY_GREEN,
+    borderRadius: 5,
+    padding: 8,
+  },
   buttonContainer: {
     position: 'absolute',
     bottom: 0,
@@ -314,15 +337,16 @@ const styles = StyleSheet.create({
     fontSize: 18,
     color: GLOW_WHITE,
   },
-  permissionContainer: {
+  container: {
     flex: 1,
+    backgroundColor: DEEP_BLACK,
     justifyContent: 'center',
     alignItems: 'center',
     padding: 20,
   },
-  buttonText: {
-    fontSize: 16,
-    color: DEEP_BLACK,
+  iconText: {
+    fontSize: 18,
+    color: GLOW_WHITE,
     fontWeight: '600',
   },
 });

package/src/ImageCropper.js

@@ -1,6 +1,6 @@
 import styles from './ImageCropperStyles';
 import React, { useState, useRef, useEffect } from 'react';
-import { Modal, View, Image, Dimensions, TouchableOpacity, Animated, Text, Platform, SafeAreaView, PixelRatio, StyleSheet } from 'react-native';
+import { Modal, View, Image, Dimensions, TouchableOpacity, Animated, Text, Platform, SafeAreaView, PixelRatio, StyleSheet, ActivityIndicator } from 'react-native';
 import Svg, { Path, Circle } from 'react-native-svg';
 import CustomCamera from './CustomCamera';
 import * as ImageManipulator from 'expo-image-manipulator';
@@ -8,7 +8,8 @@ import { Ionicons } from '@expo/vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { applyMaskToImage, MaskView } from './ImageMaskProcessor';
 
-const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) => {
+const PRIMARY_GREEN = '#198754';
+const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rotationLabel }) => {
 
 
   const [image, setImage] = useState(null);
@@ -132,6 +133,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
   const [isLoading, setIsLoading] = useState(false);
   const [showFullScreenCapture, setShowFullScreenCapture] = useState(false);
   const [isRotating, setIsRotating] = useState(false);
+  const rotationInProgressRef = useRef(false); // block duplicate taps immediately
   const lastValidPosition = useRef(null);
   const insets = useSafeAreaInsets();
   
@@ -139,7 +141,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
 
   // No view-shot / captureRef / bitmap masking on device.
   const enableMask = false;
-  const enableRotation = false; // rotation would require careful coord transforms; keep off for pixel-perfect pipeline.
+  const enableRotation = true; // rotation resets crop box so it is re-initialized on rotated image.
   
 
 
@@ -1027,32 +1029,34 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
 
   // ✅ REFACTORISATION : Stocker l'angle de rotation au lieu de modifier l'image immédiatement
   // La rotation sera appliquée uniquement lors du crop final pour éviter les interpolations multiples
-  const rotatePreviewImage = async (degrees) => {
-    if (!image || isRotating) return;
+const rotatePreviewImage = async (degrees) => {
+    if (!image) return;
+    if (rotationInProgressRef.current) return; // block duplicate taps immediately (no re-render delay)
+    rotationInProgressRef.current = true;
     setIsRotating(true);
-    
+
     try {
-      // ✅ CORRECTION : appliquer la rotation de façon incrémentale sur le fichier (pas cumulée sur un fichier déjà roté).
-      // L'ancienne version rotait l'image déjà rotée par l'angle total, ce qui donnait des rotations incorrectes (90 + 180 => 270).
       rotationAngle.current = (rotationAngle.current + degrees) % 360;
 
+      // Use JPEG for preview rotation (faster than PNG for large images; quality 0.92 is fine for preview)
       const rotated = await ImageManipulator.manipulateAsync(
         image,
         [{ rotate: degrees }],
-        { 
-          compress: 1, // Qualité maximale (pas de compression)
-          format: ImageManipulator.SaveFormat.PNG // Format sans perte
+        {
+          compress: 0.92,
+          format: ImageManipulator.SaveFormat.JPEG,
         }
       );
-      
-      // Update image pour l'aperçu - onImageLayout will call initializeCropBox automatically
+
+      setPoints([]);
+      hasInitializedCropBox.current = false;
       setImage(rotated.uri);
-      
-      console.log("Rotation applied (preview increment):", degrees, "degrees; accumulated:", rotationAngle.current);
+      console.log("Rotation applied:", degrees, "degrees; accumulated:", rotationAngle.current);
     } catch (error) {
       console.error("Error rotating image:", error);
       alert("Error rotating image");
     } finally {
+      rotationInProgressRef.current = false;
       setIsRotating(false);
     }
   };
@@ -1214,6 +1218,12 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                   })()}
                 </Svg>
               </View>
+              {isRotating && (
+                <View style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center' }}>
+                  <ActivityIndicator size="large" color={PRIMARY_GREEN} />
+                  <Text style={{ color: PRIMARY_GREEN, marginTop: 8, fontSize: 14 }}>{rotationLabel ?? 'Rotation...'}</Text>
+                </View>
+              )}
             </View>
           )}
 
@@ -1222,11 +1232,15 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
             <View style={[styles.buttonContainerBelow, { paddingBottom: Math.max(insets.bottom, 16) }]}>
               {Platform.OS === 'android' && (
                 <TouchableOpacity 
-                  style={styles.rotationButton} 
+                  style={[styles.rotationButton, isRotating && { opacity: 0.7 }]} 
                   onPress={() => enableRotation && rotatePreviewImage(90)}
                   disabled={isRotating}
                 >
-                  <Ionicons name="sync" size={24} color="white" />
+                  {isRotating ? (
+                    <ActivityIndicator size="small" color="white" />
+                  ) : (
+                    <Ionicons name="sync" size={24} color="white" />
+                  )}
                 </TouchableOpacity>
               )}