react-native-expo-cropper 1.2.38 → 1.2.39

package/dist/CustomCamera.js

@@ -97,6 +97,9 @@ function CustomCamera(_ref) {
   // ✅ 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;
@@ -139,12 +142,12 @@ function CustomCamera(_ref) {
   }, [cameraWrapperLayout]);
   var takePicture = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-      var photo, greenFrameCoords, fixedUri, _t;
+      var captureOptions, photo, capturedAspectRatio, greenFrameCoords, _t;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
             if (!cameraRef.current) {
-              _context2.n = 5;
+              _context2.n = 7;
               break;
             }
             _context2.p = 1;
@@ -157,54 +160,87 @@ function CustomCamera(_ref) {
             _context2.n = 2;
             return waitForRender(2);
           case 2:
-            _context2.n = 3;
-            return cameraRef.current.takePictureAsync({
+            // ✅ 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,
-              // Qualité maximale (0-1, 1 = meilleure qualité)
+              // Disable shutter sound for better UX
               shutterSound: false,
-              // skipProcessing: true = Désactiver le traitement automatique pour préserver la qualité pixel-perfect
-              // IMPORTANT : Cela préserve la résolution originale et évite toute interpolation
+              // ✅ CRITICAL: skipProcessing preserves original resolution and avoids interpolation
+              // This ensures pixel-perfect quality and prevents premature resizing
               skipProcessing: true,
-              // exif: true = Inclure les métadonnées EXIF (orientation, etc.)
-              // L'orientation sera gérée dans ImageCropper si nécessaire via la fonction de rotation
+              // 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 = _context2.v;
-            console.log("Photo captured with maximum quality:", {
+            if (!(!photo.width || !photo.height || photo.width === 0 || photo.height === 0)) {
+              _context2.n = 4;
+              break;
+            }
+            throw new Error("Invalid photo dimensions received from camera");
+          case 4:
+            capturedAspectRatio = photo.width / photo.height;
+            console.log("✅ Photo captured with maximum quality:", {
               uri: photo.uri,
               width: photo.width,
               height: photo.height,
-              exif: photo.exif ? "present" : "missing"
+              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(); // ✅ REFACTORISATION : Utiliser directement l'URI de la photo
-            // L'orientation sera gérée dans ImageCropper si l'utilisateur utilise la fonction de rotation
-            // skipProcessing: true préserve la qualité mais peut laisser l'orientation EXIF non appliquée
-            // C'est acceptable car l'utilisateur peut corriger via la rotation dans ImageCropper
-            fixedUri = photo.uri; // Envoyer l'URI et les coordonnées du green frame à ImageCropper
-            onPhotoCaptured(fixedUri, {
+            greenFrameCoords = greenFrame || calculateGreenFrameCoordinates();
+            if (greenFrameCoords) {
+              _context2.n = 5;
+              break;
+            }
+            throw new Error("Green frame coordinates not available");
+          case 5:
+            // ✅ 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
+                height: photo.height,
+                aspectRatio: capturedAspectRatio
               }
             });
             setLoadingBeforeCapture(false);
-            _context2.n = 5;
+            _context2.n = 7;
             break;
-          case 4:
-            _context2.p = 4;
+          case 6:
+            _context2.p = 6;
             _t = _context2.v;
-            console.error("Error capturing photo:", _t);
+            console.error("❌ Error capturing photo:", _t);
             setLoadingBeforeCapture(false);
-            _reactNative.Alert.alert("Erreur", "Impossible de capturer la photo. Veuillez réessayer.");
-          case 5:
+            _reactNative.Alert.alert("Erreur", "Impossible de capturer la photo: ".concat(_t.message || "Erreur inconnue", ". Veuillez r\xE9essayer."));
+          case 7:
             return _context2.a(2);
         }
-      }, _callee2, null, [[1, 4]]);
+      }, _callee2, null, [[1, 6]]);
     }));
     return function takePicture() {
       return _ref3.apply(this, arguments);
@@ -230,8 +266,12 @@ function CustomCamera(_ref) {
     facing: "back",
     ref: cameraRef,
     onCameraReady: function onCameraReady() {
-      return setIsReady(true);
+      setIsReady(true);
+      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, {

package/dist/ImageCropper.js

@@ -1299,10 +1299,124 @@ var ImageCropper = function ImageCropper(_ref) {
     onCancel: function onCancel() {
       return setShowCustomCamera(false);
     }
-  }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !showResult && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
-    style: image ? _ImageCropperStyles["default"].buttonContainer : _ImageCropperStyles["default"].centerButtonsContainer
-  }, image && _reactNative.Platform.OS === 'android' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
-    style: _ImageCropperStyles["default"].iconButton,
+  }) : /*#__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
+    },
+    ref: commonWrapperRef,
+    onLayout: onCommonWrapperLayout
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    ref: viewRef,
+    collapsable: false,
+    style: _reactNative.StyleSheet.absoluteFill,
+    onStartShouldSetResponder: function onStartShouldSetResponder() {
+      return true;
+    },
+    onMoveShouldSetResponder: function onMoveShouldSetResponder(evt, gestureState) {
+      // ✅ CRITICAL: Always capture movement when a point is selected
+      // This ensures vertical movement is captured correctly
+      if (selectedPointIndex.current !== null) {
+        return true;
+      }
+      // ✅ CRITICAL: Capture ANY movement immediately (even 0px) to prevent ScrollView interception
+      // This is especially important for vertical movement which ScrollView tries to intercept
+      // We return true for ANY movement to ensure we capture it before ScrollView
+      var hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
+      if (hasMovement && Math.abs(gestureState.dy) > 5) {
+        console.log("🔄 Vertical movement detected in responder:", {
+          dx: gestureState.dx.toFixed(2),
+          dy: gestureState.dy.toFixed(2),
+          selectedPoint: selectedPointIndex.current
+        });
+      }
+      return true;
+    },
+    onResponderGrant: function onResponderGrant(e) {
+      // ✅ CRITICAL: Grant responder immediately to prevent ScrollView from intercepting
+      // This ensures we capture all movement, especially vertical
+      // Handle tap to select point if needed
+      if (selectedPointIndex.current === null) {
+        handleTap(e);
+      }
+    },
+    onResponderStart: handleTap,
+    onResponderMove: function onResponderMove(e) {
+      // ✅ CRITICAL: Always handle move events to ensure smooth movement in all directions
+      // This is called for every move event, ensuring vertical movement is captured
+      // handleMove now uses incremental delta calculation which is more reliable
+      handleMove(e);
+    },
+    onResponderRelease: handleRelease,
+    onResponderTerminationRequest: function onResponderTerminationRequest() {
+      // ✅ CRITICAL: Never allow termination when dragging a point
+      // This prevents ScrollView from stealing the responder during vertical movement
+      return selectedPointIndex.current === null;
+    }
+    // ✅ CRITICAL: Prevent parent ScrollView from intercepting touches
+    // Capture responder BEFORE parent ScrollView can intercept
+    ,
+    onStartShouldSetResponderCapture: function onStartShouldSetResponderCapture() {
+      // Always capture start events
+      return true;
+    },
+    onMoveShouldSetResponderCapture: function onMoveShouldSetResponderCapture(evt, gestureState) {
+      // ✅ CRITICAL: Always capture movement events before parent ScrollView
+      // This is essential for vertical movement which ScrollView tries to intercept
+      // Especially important when a point is selected or when there's any movement
+      if (selectedPointIndex.current !== null) {
+        return true;
+      }
+      // ✅ CRITICAL: Capture movement BEFORE ScrollView can intercept
+      // This ensures we get vertical movement even if ScrollView tries to steal it
+      var hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
+      return hasMovement;
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Image, {
+    source: {
+      uri: image
+    },
+    style: _ImageCropperStyles["default"].image,
+    resizeMode: (_cameraFrameData$curr3 = cameraFrameData.current) !== null && _cameraFrameData$curr3 !== void 0 && _cameraFrameData$curr3.greenFrame ? 'cover' : 'contain',
+    onLayout: onImageLayout
+  }), /*#__PURE__*/_react["default"].createElement(_reactNativeSvg["default"], {
+    style: _ImageCropperStyles["default"].overlay,
+    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;
+    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)',
+      fillRule: "evenodd"
+    }), !showResult && points.length > 0 && /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Path, {
+      d: createPath(),
+      fill: "transparent",
+      stroke: "white",
+      strokeWidth: 2
+    }), !showResult && points.map(function (point, index) {
+      return /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Circle, {
+        key: index,
+        cx: point.x,
+        cy: point.y,
+        r: 10,
+        fill: "white"
+      });
+    }));
+  }()))), !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,
     onPress: function onPress() {
       return enableRotation && rotatePreviewImage(90);
     },
@@ -1311,50 +1425,36 @@ var ImageCropper = function ImageCropper(_ref) {
     name: "sync",
     size: 24,
     color: "white"
-  }))), image && /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
+  })), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
     style: _ImageCropperStyles["default"].button,
     onPress: handleReset
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
     style: _ImageCropperStyles["default"].buttonText
-  }, "Reset")), image && /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
+  }, "Reset")), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
     style: _ImageCropperStyles["default"].button,
     onPress: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-      var actualImageWidth, actualImageHeight, layout, contentRect, displayedWidth, displayedHeight, isCoverMode, scale, coverOffsetX, coverOffsetY, scaledWidth, scaledHeight, scaleX, scaleY, originalUri, cropMeta, imagePoints, minX, minY, maxX, maxY, cropX, cropY, cropEndX, cropEndY, cropWidth, cropHeight, bbox, polygon, name, _t2;
+      var actualImageWidth, actualImageHeight, layout, contentRect, displayedWidth, displayedHeight, isCoverMode, scale, coverOffsetX, coverOffsetY, scaledWidth, scaledHeight, originalUri, cropMeta, imagePoints, minX, minY, maxX, maxY, cropX, cropY, cropEndX, cropEndY, cropWidth, cropHeight, bbox, polygon, name, _t2;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
             setIsLoading(true);
             _context2.p = 1;
             console.log("=== Starting pixel-perfect metadata export (no bitmap crop on mobile) ===");
-
-            // ✅ REFACTORISATION : Utiliser les dimensions stockées (plus efficace)
             actualImageWidth = originalImageDimensions.current.width;
-            actualImageHeight = originalImageDimensions.current.height; // Vérifier que les dimensions sont valides
+            actualImageHeight = originalImageDimensions.current.height;
             if (!(actualImageWidth === 0 || actualImageHeight === 0)) {
               _context2.n = 2;
               break;
             }
             throw new Error("Original image dimensions not available. Please wait for image to load.");
           case 2:
-            console.log("Original image dimensions:", {
-              width: actualImageWidth,
-              height: actualImageHeight
-            });
-
-            // ✅ CORRECTION : Utiliser le rectangle de contenu réel (contain)
-            // ✅ CRITICAL: Recalculate displayedContentRect if not available
             layout = displayedImageLayout.current;
-            console.log("🔍 Checking displayedContentRect before crop:", {
-              displayedContentRect: displayedContentRect.current,
-              displayedImageLayout: layout,
-              originalImageDimensions: originalImageDimensions.current
-            });
             if (layout.width > 0 && layout.height > 0) {
               updateDisplayedContentRect(layout.width, layout.height);
             }
             contentRect = displayedContentRect.current;
             displayedWidth = contentRect.width;
-            displayedHeight = contentRect.height; // Vérifier que les dimensions d'affichage sont valides
+            displayedHeight = contentRect.height;
             if (!(displayedWidth === 0 || displayedHeight === 0)) {
               _context2.n = 4;
               break;
@@ -1363,8 +1463,6 @@ var ImageCropper = function ImageCropper(_ref) {
               _context2.n = 3;
               break;
             }
-            console.warn("⚠️ displayedContentRect not available, using displayedImageLayout as fallback");
-            // Use layout dimensions as fallback (assuming no letterboxing)
             contentRect = {
               x: layout.x,
               y: layout.y,
@@ -1373,21 +1471,12 @@ var ImageCropper = function ImageCropper(_ref) {
             };
             displayedWidth = contentRect.width;
             displayedHeight = contentRect.height;
-            // Update the ref for consistency
             displayedContentRect.current = contentRect;
             _context2.n = 4;
             break;
           case 3:
-            throw new Error("Displayed image dimensions not available. Image may not be laid out yet. Please wait a moment and try again.");
+            throw new Error("Displayed image dimensions not available.");
           case 4:
-            console.log("✅ Using contentRect for crop:", contentRect);
-            console.log("Displayed image dimensions:", {
-              width: displayedWidth,
-              height: displayedHeight
-            });
-
-            // ✅ CAMERA (cover mode): scale = max, image fills wrapper, has offset
-            // ✅ GALLERY (contain mode): scale = min, uniform
             isCoverMode = !!(cameraFrameData.current && cameraFrameData.current.greenFrame);
             coverOffsetX = 0, coverOffsetY = 0;
             if (isCoverMode) {
@@ -1396,43 +1485,16 @@ var ImageCropper = function ImageCropper(_ref) {
               scaledHeight = actualImageHeight * scale;
               coverOffsetX = (scaledWidth - displayedWidth) / 2;
               coverOffsetY = (scaledHeight - displayedHeight) / 2;
-              console.log("Scale factor (COVER mode for camera):", {
-                scale: scale,
-                coverOffsetX: coverOffsetX,
-                coverOffsetY: coverOffsetY
-              });
             } else {
-              scaleX = actualImageWidth / displayedWidth;
-              scaleY = actualImageHeight / displayedHeight;
-              if (Math.abs(scaleX - scaleY) > 0.01) {
-                console.warn("Scale mismatch detected! This may cause incorrect crop coordinates.", {
-                  scaleX: scaleX,
-                  scaleY: scaleY,
-                  actualImageWidth: actualImageWidth,
-                  actualImageHeight: actualImageHeight,
-                  displayedWidth: displayedWidth,
-                  displayedHeight: displayedHeight
-                });
-              }
-              scale = scaleX;
-              console.log("Scale factor (contain, uniform):", {
-                scale: scale,
-                contentRect: contentRect
-              });
+              scale = actualImageWidth / displayedWidth;
             }
             originalUri = sourceImageUri.current || image;
             cropMeta = null;
             if (points.length > 0) {
               try {
-                console.log("Calculating crop boundaries from points...");
-                console.log("Points (display coordinates):", points);
-                console.log("Content rect (offsets):", contentRect);
-
-                // ✅ Conversion display -> image px (contain or cover)
                 imagePoints = points.map(function (point) {
                   var clampedX, clampedY, origX, origY;
                   if (isCoverMode) {
-                    // Cover: display = wrapper, scale = max, image centered with offset
                     clampedX = Math.max(0, Math.min(point.x, contentRect.width));
                     clampedY = Math.max(0, Math.min(point.y, contentRect.height));
                     origX = (clampedX + coverOffsetX) / scale;
@@ -1450,9 +1512,6 @@ var ImageCropper = function ImageCropper(_ref) {
                     y: finalY
                   };
                 });
-                console.log("Converted image points (original coordinates):", imagePoints);
-
-                // Calculer la bounding box : min X, min Y, max X, max Y
                 minX = Math.min.apply(Math, _toConsumableArray(imagePoints.map(function (p) {
                   return p.x;
                 })));
@@ -1464,36 +1523,20 @@ var ImageCropper = function ImageCropper(_ref) {
                 })));
                 maxY = Math.max.apply(Math, _toConsumableArray(imagePoints.map(function (p) {
                   return p.y;
-                }))); // ✅ CORRECTION : arrondi "conservateur" (floor origin + ceil end)
-                // évite de rogner des pixels et réduit le risque de crop plus petit (perte de détails).
+                })));
                 cropX = Math.max(0, Math.floor(minX));
                 cropY = Math.max(0, Math.floor(minY));
                 cropEndX = Math.min(actualImageWidth, Math.ceil(maxX));
                 cropEndY = Math.min(actualImageHeight, Math.ceil(maxY));
                 cropWidth = Math.max(0, cropEndX - cropX);
                 cropHeight = Math.max(0, cropEndY - cropY);
-                console.log("Crop parameters (pixel-perfect):", {
-                  x: cropX,
-                  y: cropY,
-                  width: cropWidth,
-                  height: cropHeight,
-                  imageWidth: actualImageWidth,
-                  imageHeight: actualImageHeight,
-                  boundingBox: {
-                    minX: minX,
-                    minY: minY,
-                    maxX: maxX,
-                    maxY: maxY
-                  }
-                });
                 if (cropWidth > 0 && cropHeight > 0) {
-                  // 1) bbox in ORIGINAL image pixel coords
                   bbox = {
                     x: cropX,
                     y: cropY,
                     width: cropWidth,
                     height: cropHeight
-                  }; // 2) polygon points relative to bbox (still in ORIGINAL pixel grid)
+                  };
                   polygon = imagePoints.map(function (point) {
                     return {
                       x: point.x - cropX,
@@ -1509,19 +1552,13 @@ var ImageCropper = function ImageCropper(_ref) {
                       height: actualImageHeight
                     }
                   };
-                  console.log("Crop meta ready:", cropMeta);
-                } else {
-                  console.warn("Invalid crop dimensions, cannot export crop meta");
                 }
               } catch (cropError) {
                 console.error("Error computing crop meta:", cropError);
               }
-            } else {
-              console.log("No crop points defined, using original image");
             }
             name = "IMAGE XTK".concat(Date.now());
             if (onConfirm) {
-              console.log("Calling onConfirm with:", originalUri, name, cropMeta);
               onConfirm(originalUri, name, cropMeta);
             }
             _context2.n = 6;
@@ -1544,139 +1581,20 @@ var ImageCropper = function ImageCropper(_ref) {
     }))
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
     style: _ImageCropperStyles["default"].buttonText
-  }, "Confirm"))), 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'
-    },
-    ref: commonWrapperRef,
-    onLayout: onCommonWrapperLayout
-  }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
-    ref: viewRef,
-    collapsable: false,
-    style: _reactNative.StyleSheet.absoluteFill,
-    onStartShouldSetResponder: function onStartShouldSetResponder() {
-      return true;
-    },
-    onMoveShouldSetResponder: function onMoveShouldSetResponder(evt, gestureState) {
-      // ✅ CRITICAL: Always capture movement when a point is selected
-      // This ensures vertical movement is captured correctly
-      if (selectedPointIndex.current !== null) {
-        return true;
-      }
-      // ✅ CRITICAL: Capture ANY movement immediately (even 0px) to prevent ScrollView interception
-      // This is especially important for vertical movement which ScrollView tries to intercept
-      // We return true for ANY movement to ensure we capture it before ScrollView
-      var hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
-      if (hasMovement && Math.abs(gestureState.dy) > 5) {
-        console.log("🔄 Vertical movement detected in responder:", {
-          dx: gestureState.dx.toFixed(2),
-          dy: gestureState.dy.toFixed(2),
-          selectedPoint: selectedPointIndex.current
-        });
-      }
-      return true;
-    },
-    onResponderGrant: function onResponderGrant(e) {
-      // ✅ CRITICAL: Grant responder immediately to prevent ScrollView from intercepting
-      // This ensures we capture all movement, especially vertical
-      // Handle tap to select point if needed
-      if (selectedPointIndex.current === null) {
-        handleTap(e);
-      }
-    },
-    onResponderStart: handleTap,
-    onResponderMove: function onResponderMove(e) {
-      // ✅ CRITICAL: Always handle move events to ensure smooth movement in all directions
-      // This is called for every move event, ensuring vertical movement is captured
-      // handleMove now uses incremental delta calculation which is more reliable
-      handleMove(e);
-    },
-    onResponderRelease: handleRelease,
-    onResponderTerminationRequest: function onResponderTerminationRequest() {
-      // ✅ CRITICAL: Never allow termination when dragging a point
-      // This prevents ScrollView from stealing the responder during vertical movement
-      return selectedPointIndex.current === null;
-    }
-    // ✅ CRITICAL: Prevent parent ScrollView from intercepting touches
-    // Capture responder BEFORE parent ScrollView can intercept
-    ,
-    onStartShouldSetResponderCapture: function onStartShouldSetResponderCapture() {
-      // Always capture start events
-      return true;
-    },
-    onMoveShouldSetResponderCapture: function onMoveShouldSetResponderCapture(evt, gestureState) {
-      // ✅ CRITICAL: Always capture movement events before parent ScrollView
-      // This is essential for vertical movement which ScrollView tries to intercept
-      // Especially important when a point is selected or when there's any movement
-      if (selectedPointIndex.current !== null) {
-        return true;
-      }
-      // Also capture if there's any movement to prevent ScrollView from intercepting
-      var hasMovement = Math.abs(gestureState.dx) > 0 || Math.abs(gestureState.dy) > 0;
-      if (hasMovement && Math.abs(gestureState.dy) > 2) {
-        console.log("🔄 Capturing vertical movement before ScrollView:", {
-          dy: gestureState.dy.toFixed(2)
-        });
-      }
-      return hasMovement;
-    }
-    // ✅ CRITICAL: Prevent ScrollView from scrolling by stopping propagation
-    ,
-    onResponderReject: function onResponderReject() {
-      console.warn("⚠️ Responder rejected - ScrollView may intercept");
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Image, {
-    source: {
-      uri: image
-    },
-    style: _ImageCropperStyles["default"].image,
-    resizeMode: (_cameraFrameData$curr3 = cameraFrameData.current) !== null && _cameraFrameData$curr3 !== void 0 && _cameraFrameData$curr3.greenFrame ? 'cover' : 'contain',
-    onLayout: onImageLayout
-  }), /*#__PURE__*/_react["default"].createElement(_reactNativeSvg["default"], {
-    style: _ImageCropperStyles["default"].overlay,
-    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;
-    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)',
-      fillRule: "evenodd"
-    }), !showResult && points.length > 0 && /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Path, {
-      d: createPath(),
-      fill: "transparent",
-      stroke: "white",
-      strokeWidth: 2
-    }), !showResult && points.map(function (point, index) {
-      return /*#__PURE__*/_react["default"].createElement(_reactNativeSvg.Circle, {
-        key: index,
-        cx: point.x,
-        cy: point.y,
-        r: 10,
-        fill: "white"
-      });
-    }));
-  }())))), showMaskView && maskImageUri && maskPoints.length > 0 && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+  }, "Confirm"))), !showResult && !image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: _ImageCropperStyles["default"].centerButtonsContainer
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: _ImageCropperStyles["default"].welcomeText
+  }, "S\xE9lectionnez une image"))), showMaskView && maskImageUri && maskPoints.length > 0 && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: {
       position: 'absolute',
       left: -maskDimensions.width - 100,
-      // Hors écran mais pas trop loin
       top: -maskDimensions.height - 100,
       width: maskDimensions.width,
       height: maskDimensions.height,
       opacity: 1,
-      // Opacité normale pour la capture
       pointerEvents: 'none',
       zIndex: 9999,
-      // Z-index élevé pour s'assurer qu'elle est au-dessus
       overflow: 'hidden'
     },
     collapsable: false