react-native-expo-cropper 1.2.48 → 1.2.49

package/dist/ImageCropper.js

@@ -37,8 +37,8 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 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;
+// Base dimension for responsive scaling (e.g. ~375pt design width)
+var RESPONSIVE_BASE = 375;
 var ImageCropper = function ImageCropper(_ref) {
   var _cameraFrameData$curr3;
   var onConfirm = _ref.onConfirm,
@@ -47,8 +47,11 @@ var ImageCropper = function ImageCropper(_ref) {
     addheight = _ref.addheight,
     rotationLabel = _ref.rotationLabel;
   var _useWindowDimensions = (0, _reactNative.useWindowDimensions)(),
-    windowWidth = _useWindowDimensions.width;
-  var cameraPreviewWidth = Math.min(windowWidth, CAMERA_PREVIEW_MAX_WIDTH);
+    windowWidth = _useWindowDimensions.width,
+    windowHeight = _useWindowDimensions.height;
+
+  // Responsive scale: image and UI adapt to small (phone) and large (tablet) screens
+  var responsiveScale = Math.max(0.65, Math.min(2, Math.min(windowWidth, windowHeight) / RESPONSIVE_BASE));
   var guessExtensionFromUri = function guessExtensionFromUri(uri) {
     if (!uri || typeof uri !== 'string') return null;
     var match = uri.match(/\.([a-zA-Z0-9]+)(?:[?#].*)?$/);
@@ -454,92 +457,11 @@ var ImageCropper = function ImageCropper(_ref) {
     }
 
     // ✅ CRITICAL FIX: Calculate crop box as percentage of VISIBLE IMAGE AREA (imageDisplayRect)
-    // NOT the wrapper. This ensures the crop box is truly 80% of the image, not 80% of wrapper then clamped.
-    // Calculate absolute position of imageDisplayRect within wrapper
-    var imageRectX = wrapper.x + imageRect.x;
-    var imageRectY = wrapper.y + imageRect.y;
-
-    // ✅ PRIORITY RULE #3: IF image comes from camera → Use EXACT green frame coordinates
-    // Image is displayed in "cover" mode (full wrapper), so green frame coords = white frame coords.
-    // Store points in WRAPPER-RELATIVE coordinates (greenFrame.x, greenFrame.y) so they match
-    // touch events (locationX/locationY are relative to the wrapper). This keeps display→image
-    // conversion correct in Confirm.
-    if (cameraFrameData.current && cameraFrameData.current.greenFrame && originalImageDimensions.current.width > 0) {
-      var greenFrame = cameraFrameData.current.greenFrame;
-      var _boxX = greenFrame.x;
-      var _boxY = greenFrame.y;
-      var _boxWidth = greenFrame.width;
-      var _boxHeight = greenFrame.height;
-
-      // ✅ SAFETY: Validate calculated coordinates before creating points
-      var _isValidCoordinate = function _isValidCoordinate(val) {
-        return typeof val === 'number' && isFinite(val) && !isNaN(val);
-      };
-      if (!_isValidCoordinate(_boxX) || !_isValidCoordinate(_boxY) || !_isValidCoordinate(_boxWidth) || !_isValidCoordinate(_boxHeight)) {
-        console.warn("⚠️ Invalid coordinates calculated for crop box, skipping initialization");
-        return;
-      }
+    // in WRAPPER-RELATIVE coordinates (same space as points/touches and SVG).
+    var imageRectX = imageRect.x;
+    var imageRectY = imageRect.y;
 
-      // ✅ Points in wrapper-relative coords (same as touch events)
-      var _newPoints = [{
-        x: _boxX,
-        y: _boxY
-      },
-      // Top-left
-      {
-        x: _boxX + _boxWidth,
-        y: _boxY
-      },
-      // Top-right
-      {
-        x: _boxX + _boxWidth,
-        y: _boxY + _boxHeight
-      },
-      // Bottom-right
-      {
-        x: _boxX,
-        y: _boxY + _boxHeight
-      } // Bottom-left
-      ];
-
-      // ✅ SAFETY: Validate all points before setting
-      var _validPoints = _newPoints.filter(function (p) {
-        return _isValidCoordinate(p.x) && _isValidCoordinate(p.y);
-      });
-      if (_validPoints.length !== _newPoints.length) {
-        console.warn("⚠️ Some points have invalid coordinates, skipping initialization");
-        return;
-      }
-      console.log("✅ Initializing crop box for camera image (COVER MODE - exact green frame):", {
-        greenFrame: {
-          x: greenFrame.x,
-          y: greenFrame.y,
-          width: greenFrame.width,
-          height: greenFrame.height
-        },
-        whiteFrame: {
-          x: _boxX.toFixed(2),
-          y: _boxY.toFixed(2),
-          width: _boxWidth.toFixed(2),
-          height: _boxHeight.toFixed(2)
-        },
-        note: "Points in wrapper-relative coords - same as touch events and crop_image_size"
-      });
-      setPoints(_newPoints);
-      hasInitializedCropBox.current = true; // ✅ CRITICAL: Mark as initialized
-      // ✅ CRITICAL: DO NOT nullify cameraFrameData here - keep it for Image.getSize() callback check
-      // It will be cleared when loading a new image
-      return;
-    }
-
-    // ✅ PRIORITY RULE #3: DEFAULT logic ONLY for gallery images (NOT camera)
-    // If we reach here and imageSource is 'camera', something went wrong
-    if (imageSource.current === 'camera') {
-      console.warn("⚠️ Camera image but no greenFrame found - this should not happen");
-      return;
-    }
-
-    // ✅ DEFAULT: Crop box (70% of VISIBLE IMAGE AREA - centered) - ONLY for gallery images
+    // ✅ DEFAULT: Crop box (70% of VISIBLE IMAGE AREA - centered)
     var boxWidth = imageRect.width * 0.70; // 70% of visible image width
     var boxHeight = imageRect.height * 0.70; // 70% of visible image height
     var boxX = imageRectX + (imageRect.width - boxWidth) / 2; // Centered in image area
@@ -581,7 +503,7 @@ var ImageCropper = function ImageCropper(_ref) {
         height: wrapper.height
       },
       imageDisplayRect: imageRect,
-      boxInImage: {
+      boxInWrapperCoords: {
         x: boxX,
         y: boxY,
         width: boxWidth,
@@ -770,12 +692,12 @@ var ImageCropper = function ImageCropper(_ref) {
         updateImageDisplayRect(wrapper.width, wrapper.height);
         imageRect = imageDisplayRect.current;
       }
-      // If still not available, use wrapper as fallback
+      // If still not available, use full wrapper as fallback (wrapper-relative coords)
       if (imageRect.width === 0 || imageRect.height === 0) {
         if (wrapper.width > 0 && wrapper.height > 0) {
           imageRect = {
-            x: wrapper.x,
-            y: wrapper.y,
+            x: 0,
+            y: 0,
             width: wrapper.width,
             height: wrapper.height
           };
@@ -787,12 +709,10 @@ var ImageCropper = function ImageCropper(_ref) {
     }
 
     // ✅ Clamp to real displayed image content (imageDisplayRect dans le wrapper)
-    // Les coordonnées tapX/tapY sont relatives au wrapper commun
-    var imageRectX = wrapper.x + imageRect.x;
-    var imageRectY = wrapper.y + imageRect.y;
+    // Les coordonnées tapX/tapY et imageRect sont RELATIVES au wrapper commun (origine 0,0)
     var _x$y$width$height = {
-        x: imageRectX,
-        y: imageRectY,
+        x: imageRect.x,
+        y: imageRect.y,
         width: imageRect.width,
         height: imageRect.height
       },
@@ -800,8 +720,8 @@ var ImageCropper = function ImageCropper(_ref) {
       cy = _x$y$width$height.y,
       cw = _x$y$width$height.width,
       ch = _x$y$width$height.height;
-    // ✅ Larger select radius for easier point selection (especially on touch screens)
-    var selectRadius = 50; // Increased from 28 to 50 for better UX
+    // ✅ Responsive select radius: scales with screen so touch target matches handle size
+    var selectRadius = Math.max(28, Math.round(50 * responsiveScale));
 
     // ✅ CRITICAL: Check for existing point selection FIRST (using raw tap coordinates)
     // Don't clamp tapX/Y for point selection - points can be anywhere in wrapper now
@@ -935,12 +855,12 @@ var ImageCropper = function ImageCropper(_ref) {
         updateImageDisplayRect(wrapper.width, wrapper.height);
         imageRect = imageDisplayRect.current;
       }
-      // If still not available, use wrapper as fallback
+      // If still not available, use full wrapper as fallback (wrapper-relative coords)
       if (imageRect.width === 0 || imageRect.height === 0) {
         if (wrapper.width > 0 && wrapper.height > 0) {
           imageRect = {
-            x: wrapper.x,
-            y: wrapper.y,
+            x: 0,
+            y: 0,
             width: wrapper.width,
             height: wrapper.height
           };
@@ -951,13 +871,11 @@ var ImageCropper = function ImageCropper(_ref) {
       }
     }
 
-    // ✅ CRITICAL: Calculate absolute bounds of imageDisplayRect within the wrapper
-    // imageRect is relative to wrapper, so we need to add wrapper offset
-    var imageRectX = wrapper.x + imageRect.x;
-    var imageRectY = wrapper.y + imageRect.y;
+    // ✅ Bounds in wrapper-relative coordinates (touch/points use wrapper as origin)
+    // Full picture = entire wrapper; visible image = imageDisplayRect
     var contentRect = {
-      x: imageRectX,
-      y: imageRectY,
+      x: imageRect.x,
+      y: imageRect.y,
       width: imageRect.width,
       height: imageRect.height
     };
@@ -985,28 +903,19 @@ var ImageCropper = function ImageCropper(_ref) {
     var newX = currentX + touchOffset.current.x;
     var newY = currentY + touchOffset.current.y;
 
-    // ✅ SEPARATE DRAG BOUNDS vs CROP BOUNDS
-    var cx = contentRect.x,
-      cy = contentRect.y,
-      cw = contentRect.width,
-      ch = contentRect.height;
-
-    // ✅ STRICT BOUNDS: For final crop safety (imageDisplayRect)
-    var strictMinX = cx;
-    var strictMaxX = cx + cw;
-    var strictMinY = cy;
-    var strictMaxY = cy + ch;
-
-    // ✅ DRAG BOUNDS: Allow movement ANYWHERE in wrapper during drag
-    // Points can move freely across the entire screen for maximum flexibility
-    // They will be clamped to imageDisplayRect only on release for safe cropping
-    var wrapperRect = wrapper;
-    var overshootMinX = wrapperRect.x;
-    var overshootMaxX = wrapperRect.x + wrapperRect.width;
-    var overshootMinY = wrapperRect.y;
-    var overshootMaxY = wrapperRect.y + wrapperRect.height;
-
-    // ✅ DRAG BOUNDS: Clamp ONLY to overshootBounds during drag (NOT strictBounds)
+    // ✅ STRICT BOUNDS: visible image area (wrapper-relative) for lastValidPosition
+    var strictMinX = contentRect.x;
+    var strictMaxX = contentRect.x + contentRect.width;
+    var strictMinY = contentRect.y;
+    var strictMaxY = contentRect.y + contentRect.height;
+
+    // ✅ DRAG BOUNDS: keep points strictly on the visible picture (no going outside image)
+    var overshootMinX = strictMinX;
+    var overshootMaxX = strictMaxX;
+    var overshootMinY = strictMinY;
+    var overshootMaxY = strictMaxY;
+
+    // ✅ Clamp to visible image so points always stay on the picture
     var dragX = Math.max(overshootMinX, Math.min(newX, overshootMaxX));
     var dragY = Math.max(overshootMinY, Math.min(newY, overshootMaxY));
 
@@ -1146,12 +1055,13 @@ var ImageCropper = function ImageCropper(_ref) {
         }
       }
       if (imageRect.width > 0 && imageRect.height > 0) {
-        var imageRectX = wrapper.x + imageRect.x;
-        var imageRectY = wrapper.y + imageRect.y;
-        var imageRectMaxX = imageRectX + imageRect.width;
-        var imageRectMaxY = imageRectY + imageRect.height;
+        // Bounds in wrapper-relative coords (same as point coords)
+        var minX = imageRect.x;
+        var minY = imageRect.y;
+        var maxX = imageRect.x + imageRect.width;
+        var maxY = imageRect.y + imageRect.height;
 
-        // Clamp the dragged point back to strict image bounds
+        // Clamp the dragged point back to visible image area (full picture in wrapper-relative coords)
         setPoints(function (prev) {
           // ✅ SAFETY: Ensure prev is a valid array
           if (!Array.isArray(prev) || prev.length === 0) {
@@ -1168,8 +1078,8 @@ var ImageCropper = function ImageCropper(_ref) {
             return prev;
           }
           var clampedPoint = {
-            x: Math.max(imageRectX, Math.min(point.x, imageRectMaxX)),
-            y: Math.max(imageRectY, Math.min(point.y, imageRectMaxY))
+            x: Math.max(minX, Math.min(point.x, maxX)),
+            y: Math.max(minY, Math.min(point.y, maxY))
           };
 
           // Only update if point was outside bounds
@@ -1184,10 +1094,10 @@ var ImageCropper = function ImageCropper(_ref) {
                 y: clampedPoint.y.toFixed(2)
               },
               bounds: {
-                minX: imageRectX.toFixed(2),
-                maxX: imageRectMaxX.toFixed(2),
-                minY: imageRectY.toFixed(2),
-                maxY: imageRectMaxY.toFixed(2)
+                minX: minX.toFixed(2),
+                maxX: maxX.toFixed(2),
+                minY: minY.toFixed(2),
+                maxY: maxY.toFixed(2)
               }
             });
             return prev.map(function (p, i) {
@@ -1336,9 +1246,13 @@ var ImageCropper = function ImageCropper(_ref) {
     onCancel: function onCancel() {
       return setShowCustomCamera(false);
     }
-  }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+  }) : /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: _ImageCropperStyles["default"].content
+  }, image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: _ImageCropperStyles["default"].imageRegion
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: [_ImageCropperStyles["default"].commonWrapper, {
-      width: cameraPreviewWidth
+      maxHeight: windowHeight * 0.7
     }],
     ref: commonWrapperRef,
     onLayout: onCommonWrapperLayout
@@ -1420,8 +1334,17 @@ var ImageCropper = function ImageCropper(_ref) {
     pointerEvents: "none"
   }, function () {
     // ✅ Use wrapper dimensions for SVG path (wrapper coordinates)
-    var wrapperWidth = commonWrapperLayout.current.width || cameraPreviewWidth;
-    var wrapperHeight = commonWrapperLayout.current.height || cameraPreviewWidth * 16 / 9;
+    var wrapperWidth = commonWrapperLayout.current.width || windowWidth;
+    var wrapperHeight = commonWrapperLayout.current.height || windowHeight;
+
+    // ✅ Size scale: when picture area is smaller, make stroke/points smaller too
+    var base = Math.min(windowWidth, windowHeight) || 1;
+    var pictureDiagonal = Math.sqrt(wrapperWidth * wrapperWidth + wrapperHeight * wrapperHeight);
+    var sizeScaleRaw = pictureDiagonal / base;
+    var sizeScale = Math.max(0.6, Math.min(1.4, sizeScaleRaw)); // clamp
+
+    var stroke = Math.max(0.75, 2 * responsiveScale * sizeScale);
+    var handleRadius = Math.max(4, 10 * responsiveScale * sizeScale);
     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)',
@@ -1430,13 +1353,13 @@ var ImageCropper = function ImageCropper(_ref) {
       d: createPath(),
       fill: "transparent",
       stroke: "white",
-      strokeWidth: 2
+      strokeWidth: stroke
     }), !showResult && points.map(function (point, index) {
       return /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Circle, {
         key: index,
         cx: point.x,
         cy: point.y,
-        r: 10,
+        r: handleRadius,
         fill: "white"
       });
     }));
@@ -1457,15 +1380,22 @@ var ImageCropper = function ImageCropper(_ref) {
   }), /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
     style: {
       color: PRIMARY_GREEN,
-      marginTop: 8,
-      fontSize: 14
+      marginTop: 8 * responsiveScale,
+      fontSize: Math.max(12, Math.round(14 * responsiveScale))
     }
-  }, rotationLabel !== null && rotationLabel !== void 0 ? rotationLabel : 'Rotation...'))), !showResult && image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+  }, 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)
+      paddingBottom: Math.max(insets.bottom, Math.round(16 * responsiveScale)),
+      paddingTop: Math.round(12 * responsiveScale),
+      paddingHorizontal: Math.round(12 * responsiveScale),
+      gap: Math.round(8 * responsiveScale)
     }]
   }, _reactNative.Platform.OS === 'android' && /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
-    style: [_ImageCropperStyles["default"].rotationButton, isRotating && {
+    style: [_ImageCropperStyles["default"].rotationButton, {
+      width: Math.round(56 * responsiveScale),
+      height: Math.round(48 * responsiveScale),
+      borderRadius: Math.round(28 * responsiveScale)
+    }, isRotating && {
       opacity: 0.7
     }],
     onPress: function onPress() {
@@ -1477,15 +1407,20 @@ var ImageCropper = function ImageCropper(_ref) {
     color: "white"
   }) : /*#__PURE__*/_react["default"].createElement(_vectorIcons.Ionicons, {
     name: "sync",
-    size: 24,
+    size: Math.round(24 * responsiveScale),
     color: "white"
   })), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
-    style: _ImageCropperStyles["default"].button,
+    style: [_ImageCropperStyles["default"].button, {
+      minHeight: Math.round(48 * responsiveScale),
+      paddingVertical: Math.round(12 * responsiveScale),
+      paddingHorizontal: Math.round(10 * responsiveScale)
+    }],
     onPress: handleReset
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
-    style: _ImageCropperStyles["default"].buttonText
+    style: [_ImageCropperStyles["default"].buttonText, {
+      fontSize: Math.max(14, Math.round(18 * responsiveScale))
+    }]
   }, "Reset")), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
-    style: _ImageCropperStyles["default"].button,
     onPress: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
       var _cameraFrameData$curr4, actualImageWidth, actualImageHeight, isCoverMode, captured, layout, contentRect, displayedWidth, displayedHeight, scale, coverOffsetX, coverOffsetY, scaledWidth, scaledHeight, originalUri, cropMeta, imagePoints, minX, minY, maxX, maxY, cropX, cropY, cropEndX, cropEndY, cropWidth, cropHeight, bbox, polygon, ext, safeExt, name, _t2;
       return _regenerator().w(function (_context2) {
@@ -1651,9 +1586,16 @@ var ImageCropper = function ImageCropper(_ref) {
             return _context2.a(2);
         }
       }, _callee2, null, [[1, 5, 6, 7]]);
-    }))
+    })),
+    style: [_ImageCropperStyles["default"].button, {
+      minHeight: Math.round(48 * responsiveScale),
+      paddingVertical: Math.round(12 * responsiveScale),
+      paddingHorizontal: Math.round(10 * responsiveScale)
+    }]
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
-    style: _ImageCropperStyles["default"].buttonText
+    style: [_ImageCropperStyles["default"].buttonText, {
+      fontSize: Math.max(14, Math.round(18 * responsiveScale))
+    }]
   }, "Confirm"))), !showResult && !image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: _ImageCropperStyles["default"].centerButtonsContainer
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {

package/dist/ImageCropperStyles.js

@@ -16,21 +16,35 @@ var GLOW_WHITE = 'rgba(255, 255, 255, 0.85)';
 var styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+    alignItems: 'stretch',
     justifyContent: 'flex-start',
-    // ✅ 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
+  // Main content area: full screen; image centered, buttons below
+  content: {
+    flex: 1,
+    width: '100%',
+    alignSelf: 'stretch',
+    flexDirection: 'column',
+    minHeight: 0
+  },
+  // Wrapper that centers the crop box vertically and horizontally on screen
+  imageRegion: {
+    flex: 1,
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  // Crop preview: responsive box, centered inside imageRegion
   commonWrapper: {
+    width: '100%',
     aspectRatio: 9 / 16,
-    borderRadius: 30,
     overflow: 'hidden',
     alignItems: 'center',
     justifyContent: 'center',
-    position: 'relative',
-    backgroundColor: 'black',
-    marginBottom: 0
+    backgroundColor: 'black'
   },
   buttonContainer: {
     position: 'absolute',
@@ -46,18 +60,14 @@ var styles = _reactNative.StyleSheet.create({
     gap: 10
   },
   buttonContainerBelow: {
-    // ✅ Buttons positioned BELOW image, not overlapping, above Android navigation bar
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
     flexDirection: 'row',
-    justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: 10,
-    paddingTop: 16,
+    justifyContent: 'space-between',
+    width: '100%',
+    paddingHorizontal: 12,
+    paddingTop: 12,
     gap: 8,
-    backgroundColor: DEEP_BLACK // Fond noir pour séparer visuellement
+    backgroundColor: DEEP_BLACK
   },
   iconButton: {
     backgroundColor: PRIMARY_GREEN,

package/package.json

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

package/src/ImageCropper.js

@@ -10,12 +10,14 @@ import { applyMaskToImage, MaskView } from './ImageMaskProcessor';
 
 const PRIMARY_GREEN = '#198754';
 
-// Max width for crop preview on large screens (tablets) - must match CustomCamera.js
-const CAMERA_PREVIEW_MAX_WIDTH = 500;
+// Base dimension for responsive scaling (e.g. ~375pt design width)
+const RESPONSIVE_BASE = 375;
 
 const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rotationLabel }) => {
-  const { width: windowWidth } = useWindowDimensions();
-  const cameraPreviewWidth = Math.min(windowWidth, CAMERA_PREVIEW_MAX_WIDTH);
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+
+  // Responsive scale: image and UI adapt to small (phone) and large (tablet) screens
+  const responsiveScale = Math.max(0.65, Math.min(2, Math.min(windowWidth, windowHeight) / RESPONSIVE_BASE));
 
   const guessExtensionFromUri = (uri) => {
     if (!uri || typeof uri !== 'string') return null;
@@ -343,69 +345,11 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
     }
 
     // ✅ CRITICAL FIX: Calculate crop box as percentage of VISIBLE IMAGE AREA (imageDisplayRect)
-    // NOT the wrapper. This ensures the crop box is truly 80% of the image, not 80% of wrapper then clamped.
-    // Calculate absolute position of imageDisplayRect within wrapper
-    const imageRectX = wrapper.x + imageRect.x;
-    const imageRectY = wrapper.y + imageRect.y;
-    
-    // ✅ PRIORITY RULE #3: IF image comes from camera → Use EXACT green frame coordinates
-    // Image is displayed in "cover" mode (full wrapper), so green frame coords = white frame coords.
-    // Store points in WRAPPER-RELATIVE coordinates (greenFrame.x, greenFrame.y) so they match
-    // touch events (locationX/locationY are relative to the wrapper). This keeps display→image
-    // conversion correct in Confirm.
-    if (cameraFrameData.current && cameraFrameData.current.greenFrame && originalImageDimensions.current.width > 0) {
-      const greenFrame = cameraFrameData.current.greenFrame;
-      
-      const boxX = greenFrame.x;
-      const boxY = greenFrame.y;
-      const boxWidth = greenFrame.width;
-      const boxHeight = greenFrame.height;
-
-      // ✅ SAFETY: Validate calculated coordinates before creating points
-      const isValidCoordinate = (val) => typeof val === 'number' && isFinite(val) && !isNaN(val);
-      
-      if (!isValidCoordinate(boxX) || !isValidCoordinate(boxY) || 
-          !isValidCoordinate(boxWidth) || !isValidCoordinate(boxHeight)) {
-        console.warn("⚠️ Invalid coordinates calculated for crop box, skipping initialization");
-        return;
-      }
-      
-      // ✅ Points in wrapper-relative coords (same as touch events)
-      const newPoints = [
-        { x: boxX, y: boxY },                           // Top-left
-        { x: boxX + boxWidth, y: boxY },                // Top-right
-        { x: boxX + boxWidth, y: boxY + boxHeight },    // Bottom-right
-        { x: boxX, y: boxY + boxHeight },               // Bottom-left
-      ];
-      
-      // ✅ SAFETY: Validate all points before setting
-      const validPoints = newPoints.filter(p => isValidCoordinate(p.x) && isValidCoordinate(p.y));
-      if (validPoints.length !== newPoints.length) {
-        console.warn("⚠️ Some points have invalid coordinates, skipping initialization");
-        return;
-      }
-
-      console.log("✅ Initializing crop box for camera image (COVER MODE - exact green frame):", {
-        greenFrame: { x: greenFrame.x, y: greenFrame.y, width: greenFrame.width, height: greenFrame.height },
-        whiteFrame: { x: boxX.toFixed(2), y: boxY.toFixed(2), width: boxWidth.toFixed(2), height: boxHeight.toFixed(2) },
-        note: "Points in wrapper-relative coords - same as touch events and crop_image_size",
-      });
-
-      setPoints(newPoints);
-      hasInitializedCropBox.current = true; // ✅ CRITICAL: Mark as initialized
-      // ✅ CRITICAL: DO NOT nullify cameraFrameData here - keep it for Image.getSize() callback check
-      // It will be cleared when loading a new image
-      return;
-    }
-    
-    // ✅ PRIORITY RULE #3: DEFAULT logic ONLY for gallery images (NOT camera)
-    // If we reach here and imageSource is 'camera', something went wrong
-    if (imageSource.current === 'camera') {
-      console.warn("⚠️ Camera image but no greenFrame found - this should not happen");
-      return;
-    }
+    // in WRAPPER-RELATIVE coordinates (same space as points/touches and SVG).
+    const imageRectX = imageRect.x;
+    const imageRectY = imageRect.y;
     
-    // ✅ DEFAULT: Crop box (70% of VISIBLE IMAGE AREA - centered) - ONLY for gallery images
+    // ✅ DEFAULT: Crop box (70% of VISIBLE IMAGE AREA - centered)
     const boxWidth = imageRect.width * 0.70;  // 70% of visible image width
     const boxHeight = imageRect.height * 0.70; // 70% of visible image height
     const boxX = imageRectX + (imageRect.width - boxWidth) / 2; // Centered in image area
@@ -437,8 +381,8 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
     console.log("✅ Initializing crop box (default - 70% of visible image area, gallery only):", {
       wrapper: { width: wrapper.width, height: wrapper.height },
       imageDisplayRect: imageRect,
-      boxInImage: { x: boxX, y: boxY, width: boxWidth, height: boxHeight },
-      points: newPoints
+      boxInWrapperCoords: { x: boxX, y: boxY, width: boxWidth, height: boxHeight },
+      points: newPoints,
     });
     
     setPoints(newPoints);
@@ -620,14 +564,14 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
         updateImageDisplayRect(wrapper.width, wrapper.height);
         imageRect = imageDisplayRect.current;
       }
-      // If still not available, use wrapper as fallback
+      // If still not available, use full wrapper as fallback (wrapper-relative coords)
       if (imageRect.width === 0 || imageRect.height === 0) {
         if (wrapper.width > 0 && wrapper.height > 0) {
           imageRect = {
-            x: wrapper.x,
-            y: wrapper.y,
+            x: 0,
+            y: 0,
             width: wrapper.width,
-            height: wrapper.height
+            height: wrapper.height,
           };
         } else {
           console.warn("⚠️ Cannot handle tap: wrapper or imageDisplayRect not available");
@@ -637,17 +581,15 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
     }
     
     // ✅ Clamp to real displayed image content (imageDisplayRect dans le wrapper)
-    // Les coordonnées tapX/tapY sont relatives au wrapper commun
-    const imageRectX = wrapper.x + imageRect.x;
-    const imageRectY = wrapper.y + imageRect.y;
+    // Les coordonnées tapX/tapY et imageRect sont RELATIVES au wrapper commun (origine 0,0)
     const { x: cx, y: cy, width: cw, height: ch } = {
-      x: imageRectX,
-      y: imageRectY,
+      x: imageRect.x,
+      y: imageRect.y,
       width: imageRect.width,
-      height: imageRect.height
+      height: imageRect.height,
     };
-    // ✅ Larger select radius for easier point selection (especially on touch screens)
-    const selectRadius = 50; // Increased from 28 to 50 for better UX
+    // ✅ Responsive select radius: scales with screen so touch target matches handle size
+    const selectRadius = Math.max(28, Math.round(50 * responsiveScale));
     
     // ✅ CRITICAL: Check for existing point selection FIRST (using raw tap coordinates)
     // Don't clamp tapX/Y for point selection - points can be anywhere in wrapper now
@@ -770,14 +712,14 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
         updateImageDisplayRect(wrapper.width, wrapper.height);
         imageRect = imageDisplayRect.current;
       }
-      // If still not available, use wrapper as fallback
+      // If still not available, use full wrapper as fallback (wrapper-relative coords)
       if (imageRect.width === 0 || imageRect.height === 0) {
         if (wrapper.width > 0 && wrapper.height > 0) {
           imageRect = {
-            x: wrapper.x,
-            y: wrapper.y,
+            x: 0,
+            y: 0,
             width: wrapper.width,
-            height: wrapper.height
+            height: wrapper.height,
           };
         } else {
           console.warn("⚠️ Cannot move point: wrapper or imageDisplayRect not available");
@@ -786,13 +728,11 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
       }
     }
     
-    // ✅ CRITICAL: Calculate absolute bounds of imageDisplayRect within the wrapper
-    // imageRect is relative to wrapper, so we need to add wrapper offset
-    const imageRectX = wrapper.x + imageRect.x;
-    const imageRectY = wrapper.y + imageRect.y;
+    // ✅ Bounds in wrapper-relative coordinates (touch/points use wrapper as origin)
+    // Full picture = entire wrapper; visible image = imageDisplayRect
     const contentRect = {
-      x: imageRectX,
-      y: imageRectY,
+      x: imageRect.x,
+      y: imageRect.y,
       width: imageRect.width,
       height: imageRect.height
     };
@@ -820,25 +760,19 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
     const newX = currentX + touchOffset.current.x;
     const newY = currentY + touchOffset.current.y;
     
-    // ✅ SEPARATE DRAG BOUNDS vs CROP BOUNDS
-    const { x: cx, y: cy, width: cw, height: ch } = contentRect;
+    // ✅ STRICT BOUNDS: visible image area (wrapper-relative) for lastValidPosition
+    const strictMinX = contentRect.x;
+    const strictMaxX = contentRect.x + contentRect.width;
+    const strictMinY = contentRect.y;
+    const strictMaxY = contentRect.y + contentRect.height;
     
-    // ✅ STRICT BOUNDS: For final crop safety (imageDisplayRect)
-    const strictMinX = cx;
-    const strictMaxX = cx + cw;
-    const strictMinY = cy;
-    const strictMaxY = cy + ch;
+    // ✅ DRAG BOUNDS: keep points strictly on the visible picture (no going outside image)
+    const overshootMinX = strictMinX;
+    const overshootMaxX = strictMaxX;
+    const overshootMinY = strictMinY;
+    const overshootMaxY = strictMaxY;
     
-    // ✅ DRAG BOUNDS: Allow movement ANYWHERE in wrapper during drag
-    // Points can move freely across the entire screen for maximum flexibility
-    // They will be clamped to imageDisplayRect only on release for safe cropping
-    const wrapperRect = wrapper;
-    const overshootMinX = wrapperRect.x;
-    const overshootMaxX = wrapperRect.x + wrapperRect.width;
-    const overshootMinY = wrapperRect.y;
-    const overshootMaxY = wrapperRect.y + wrapperRect.height;
-    
-    // ✅ DRAG BOUNDS: Clamp ONLY to overshootBounds during drag (NOT strictBounds)
+    // ✅ Clamp to visible image so points always stay on the picture
     const dragX = Math.max(overshootMinX, Math.min(newX, overshootMaxX));
     const dragY = Math.max(overshootMinY, Math.min(newY, overshootMaxY));
   
@@ -974,12 +908,13 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
       }
       
       if (imageRect.width > 0 && imageRect.height > 0) {
-        const imageRectX = wrapper.x + imageRect.x;
-        const imageRectY = wrapper.y + imageRect.y;
-        const imageRectMaxX = imageRectX + imageRect.width;
-        const imageRectMaxY = imageRectY + imageRect.height;
+        // Bounds in wrapper-relative coords (same as point coords)
+        const minX = imageRect.x;
+        const minY = imageRect.y;
+        const maxX = imageRect.x + imageRect.width;
+        const maxY = imageRect.y + imageRect.height;
         
-        // Clamp the dragged point back to strict image bounds
+        // Clamp the dragged point back to visible image area (full picture in wrapper-relative coords)
         setPoints(prev => {
           // ✅ SAFETY: Ensure prev is a valid array
           if (!Array.isArray(prev) || prev.length === 0) {
@@ -999,8 +934,8 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
           }
           
           const clampedPoint = {
-            x: Math.max(imageRectX, Math.min(point.x, imageRectMaxX)),
-            y: Math.max(imageRectY, Math.min(point.y, imageRectMaxY))
+            x: Math.max(minX, Math.min(point.x, maxX)),
+            y: Math.max(minY, Math.min(point.y, maxY))
           };
           
           // Only update if point was outside bounds
@@ -1008,7 +943,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
             console.log("🔒 Clamping point back to image bounds on release:", {
               before: { x: point.x.toFixed(2), y: point.y.toFixed(2) },
               after: { x: clampedPoint.x.toFixed(2), y: clampedPoint.y.toFixed(2) },
-              bounds: { minX: imageRectX.toFixed(2), maxX: imageRectMaxX.toFixed(2), minY: imageRectY.toFixed(2), maxY: imageRectMaxY.toFixed(2) }
+              bounds: { minX: minX.toFixed(2), maxX: maxX.toFixed(2), minY: minY.toFixed(2), maxY: maxY.toFixed(2) }
             });
             
             return prev.map((p, i) => i === pointIndex ? clampedPoint : p);
@@ -1132,16 +1067,19 @@ const rotatePreviewImage = async (degrees) => {
           onCancel={() => setShowCustomCamera(false)}
         />
       ) : (
-        <>
+        <View style={styles.content}>
           {image && (
-            <View
-              style={[
-                styles.commonWrapper,
-                { width: cameraPreviewWidth },
-              ]}
-              ref={commonWrapperRef}
-              onLayout={onCommonWrapperLayout}
-            >
+            <View style={styles.imageRegion}>
+              <View
+                style={[
+                  styles.commonWrapper,
+                  {
+                    maxHeight: windowHeight * 0.7,
+                  },
+                ]}
+                ref={commonWrapperRef}
+                onLayout={onCommonWrapperLayout}
+              >
               <View
                 ref={viewRef}
                 collapsable={false}
@@ -1217,8 +1155,18 @@ const rotatePreviewImage = async (degrees) => {
                 <Svg style={styles.overlay} pointerEvents="none">
                   {(() => {
                     // ✅ Use wrapper dimensions for SVG path (wrapper coordinates)
-                    const wrapperWidth = commonWrapperLayout.current.width || cameraPreviewWidth;
-                    const wrapperHeight = commonWrapperLayout.current.height || (cameraPreviewWidth * 16 / 9);
+                    const wrapperWidth = commonWrapperLayout.current.width || windowWidth;
+                    const wrapperHeight = commonWrapperLayout.current.height || windowHeight;
+
+                    // ✅ Size scale: when picture area is smaller, make stroke/points smaller too
+                    const base = Math.min(windowWidth, windowHeight) || 1;
+                    const pictureDiagonal = Math.sqrt(wrapperWidth * wrapperWidth + wrapperHeight * wrapperHeight);
+                    const sizeScaleRaw = pictureDiagonal / base;
+                    const sizeScale = Math.max(0.6, Math.min(1.4, sizeScaleRaw)); // clamp
+
+                    const stroke = Math.max(0.75, 2 * responsiveScale * sizeScale);
+                    const handleRadius = Math.max(4, 10 * responsiveScale * sizeScale);
+
                     return (
                       <>
                         <Path
@@ -1227,10 +1175,10 @@ const rotatePreviewImage = async (degrees) => {
                           fillRule="evenodd"
                         />
                         {!showResult && points.length > 0 && (
-                          <Path d={createPath()} fill="transparent" stroke="white" strokeWidth={2} />
+                          <Path d={createPath()} fill="transparent" stroke="white" strokeWidth={stroke} />
                         )}
                         {!showResult && points.map((point, index) => (
-                          <Circle key={index} cx={point.x} cy={point.y} r={10} fill="white" />
+                          <Circle key={index} cx={point.x} cy={point.y} r={handleRadius} fill="white" />
                         ))}
                       </>
                     );
@@ -1240,35 +1188,61 @@ const rotatePreviewImage = async (degrees) => {
               {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>
+                  <Text style={{ color: PRIMARY_GREEN, marginTop: 8 * responsiveScale, fontSize: Math.max(12, Math.round(14 * responsiveScale)) }}>{rotationLabel ?? 'Rotation...'}</Text>
                 </View>
               )}
             </View>
+            </View>
           )}
 
-          {/* ✅ Buttons positioned BELOW the image, not overlapping */}
+          {/* ✅ Buttons positioned as a responsive bottom bar (scale with screen size) */}
           {!showResult && image && (
-            <View style={[styles.buttonContainerBelow, { paddingBottom: Math.max(insets.bottom, 16) }]}>
+            <View style={[
+              styles.buttonContainerBelow,
+              {
+                paddingBottom: Math.max(insets.bottom, Math.round(16 * responsiveScale)),
+                paddingTop: Math.round(12 * responsiveScale),
+                paddingHorizontal: Math.round(12 * responsiveScale),
+                gap: Math.round(8 * responsiveScale),
+              },
+            ]}>
               {Platform.OS === 'android' && (
                 <TouchableOpacity 
-                  style={[styles.rotationButton, isRotating && { opacity: 0.7 }]} 
+                  style={[
+                    styles.rotationButton,
+                    {
+                      width: Math.round(56 * responsiveScale),
+                      height: Math.round(48 * responsiveScale),
+                      borderRadius: Math.round(28 * responsiveScale),
+                    },
+                    isRotating && { opacity: 0.7 },
+                  ]} 
                   onPress={() => enableRotation && rotatePreviewImage(90)}
                   disabled={isRotating}
                 >
                   {isRotating ? (
                     <ActivityIndicator size="small" color="white" />
                   ) : (
-                    <Ionicons name="sync" size={24} color="white" />
+                    <Ionicons name="sync" size={Math.round(24 * responsiveScale)} color="white" />
                   )}
                 </TouchableOpacity>
               )}
               
-              <TouchableOpacity style={styles.button} onPress={handleReset}>
-                <Text style={styles.buttonText}>Reset</Text>
+              <TouchableOpacity
+                style={[
+                  styles.button,
+                  {
+                    minHeight: Math.round(48 * responsiveScale),
+                    paddingVertical: Math.round(12 * responsiveScale),
+                    paddingHorizontal: Math.round(10 * responsiveScale),
+                  },
+                ]}
+                onPress={handleReset}
+              >
+                <Text style={[styles.buttonText, { fontSize: Math.max(14, Math.round(18 * responsiveScale)) }]}>Reset</Text>
               </TouchableOpacity>
               
               <TouchableOpacity
-                style={styles.button}
                 onPress={async () => {
                         setIsLoading(true);
                         try {
@@ -1399,8 +1373,16 @@ const rotatePreviewImage = async (degrees) => {
                           setShowFullScreenCapture(false);
                         }
                       }}
+                style={[
+                  styles.button,
+                  {
+                    minHeight: Math.round(48 * responsiveScale),
+                    paddingVertical: Math.round(12 * responsiveScale),
+                    paddingHorizontal: Math.round(10 * responsiveScale),
+                  },
+                ]}
               >
-                <Text style={styles.buttonText}>Confirm</Text>
+                <Text style={[styles.buttonText, { fontSize: Math.max(14, Math.round(18 * responsiveScale)) }]}>Confirm</Text>
               </TouchableOpacity>
             </View>
           )}
@@ -1411,7 +1393,7 @@ const rotatePreviewImage = async (degrees) => {
               <Text style={styles.welcomeText}>Sélectionnez une image</Text>
             </View>
           )}
-        </>
+        </View>
       )}
 
             {/* ✅ CORRECTION : Vue de masque temporaire pour la capture

package/src/ImageCropperStyles.js

@@ -11,20 +11,35 @@ const GLOW_WHITE = 'rgba(255, 255, 255, 0.85)';
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'flex-start', // ✅ Start from top, allow content to flow down
+    width: '100%',
+    height: '100%',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start',
     backgroundColor: DEEP_BLACK,
   },
-  // Wrapper for crop preview (9/16, same as CustomCamera); width set dynamically for tablet
+  // Main content area: full screen; image centered, buttons below
+  content: {
+    flex: 1,
+    width: '100%',
+    alignSelf: 'stretch',
+    flexDirection: 'column',
+    minHeight: 0,
+  },
+  // Wrapper that centers the crop box vertically and horizontally on screen
+  imageRegion: {
+    flex: 1,
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  // Crop preview: responsive box, centered inside imageRegion
   commonWrapper: {
+    width: '100%',
     aspectRatio: 9 / 16,
-    borderRadius: 30,
     overflow: 'hidden',
     alignItems: 'center',
     justifyContent: 'center',
-    position: 'relative',
     backgroundColor: 'black',
-    marginBottom: 0,
   },
   buttonContainer: {
     position: 'absolute',
@@ -40,18 +55,14 @@ const styles = StyleSheet.create({
     gap: 10,
   },
   buttonContainerBelow: {
-    // ✅ Buttons positioned BELOW image, not overlapping, above Android navigation bar
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
     flexDirection: 'row',
-    justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: 10,
-    paddingTop: 16,
+    justifyContent: 'space-between',
+    width: '100%',
+    paddingHorizontal: 12,
+    paddingTop: 12,
     gap: 8,
-    backgroundColor: DEEP_BLACK, // Fond noir pour séparer visuellement
+    backgroundColor: DEEP_BLACK,
   },
   iconButton: {
     backgroundColor: PRIMARY_GREEN,
@@ -103,10 +114,10 @@ const styles = StyleSheet.create({
 },
 
   image: {
-  width: '100%',
-  height: '100%',
-  resizeMode: 'contain',
-},
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
 
   overlay: {
   position: 'absolute',