react-native-expo-cropper 1.2.36 → 1.2.37

package/src/ImageCropper.js

@@ -20,6 +20,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
   const viewRef = useRef(null);
   const maskViewRef = useRef(null); // Ref pour la vue de masque (invisible)
   const sourceImageUri = useRef(null); // keep original image URI (full-res) for upload
+  const cameraFrameData = useRef(null); // ✅ Store green frame coordinates from camera
   
   // ✅ REFACTORISATION : Séparation claire entre dimensions originales et affichage
   // Dimensions réelles de l'image originale (pixels)
@@ -35,6 +36,12 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
   const updateDisplayedContentRect = (layoutWidth, layoutHeight) => {
     const iw = originalImageDimensions.current.width;
     const ih = originalImageDimensions.current.height;
+    
+    console.log("🔄 updateDisplayedContentRect called:", {
+      originalDimensions: { width: iw, height: ih },
+      layoutDimensions: { width: layoutWidth, height: layoutHeight }
+    });
+    
     if (iw > 0 && ih > 0 && layoutWidth > 0 && layoutHeight > 0) {
       const scale = Math.min(layoutWidth / iw, layoutHeight / ih);
       const contentW = iw * scale;
@@ -47,15 +54,28 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
         width: contentW,
         height: contentH,
       };
-      console.log("Displayed content rect (contain):", displayedContentRect.current);
+      console.log("✅ Displayed content rect (contain) calculated:", displayedContentRect.current);
       return;
     }
-    displayedContentRect.current = { x: 0, y: 0, width: layoutWidth || 0, height: layoutHeight || 0 };
+    
+    // ✅ FALLBACK: If original dimensions not available yet, use layout as temporary measure
+    if (layoutWidth > 0 && layoutHeight > 0) {
+      displayedContentRect.current = { x: 0, y: 0, width: layoutWidth, height: layoutHeight };
+      console.log("⚠️ Using layout dimensions as fallback (original dimensions not available yet):", displayedContentRect.current);
+    } else {
+      displayedContentRect.current = { x: 0, y: 0, width: 0, height: 0 };
+      console.warn("❌ Cannot calculate displayedContentRect: missing dimensions");
+    }
   };
   
   const selectedPointIndex = useRef(null);
   const lastTap = useRef(null);
   
+  // ✅ FREE DRAG: Store initial touch position and point position for delta-based movement
+  const initialTouchPosition = useRef(null); // { x, y } - initial touch position when drag starts
+  const initialPointPosition = useRef(null); // { x, y } - initial point position when drag starts
+  const lastTouchPosition = useRef(null); // { x, y } - last touch position for incremental delta calculation
+  
   // Angle de rotation accumulé (pour éviter les rotations multiples)
   const rotationAngle = useRef(0);
   
@@ -87,6 +107,12 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
 } else if (initialImage) {
   setImage(initialImage);
   sourceImageUri.current = initialImage;
+  // ✅ CRITICAL: Reset points when loading a new image from gallery
+  // This ensures the crop box will be automatically initialized
+  setPoints([]);
+  rotationAngle.current = 0;
+  // Clear camera frame data for gallery images
+  cameraFrameData.current = null;
 }
 }, [openCameraFirst, initialImage]);
 
@@ -104,8 +130,33 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
       sourceImageUri.current = image;
     }
 
-    // ✅ FIX: Use Image.getSize() which works correctly on Android
-    // On iOS, it returns logical points, but we'll handle that by sending dimensions to backend
+    // ✅ CRITICAL FIX: If we have capturedImageSize from camera, use it as source of truth
+    // takePictureAsync returns physical dimensions, while Image.getSize() may return EXIF-oriented dimensions
+    if (cameraFrameData.current && cameraFrameData.current.capturedImageSize) {
+      const { width: capturedWidth, height: capturedHeight } = cameraFrameData.current.capturedImageSize;
+      originalImageDimensions.current = {
+        width: capturedWidth,
+        height: capturedHeight,
+      };
+      console.log("✅ Using captured image dimensions from takePictureAsync:", {
+        width: capturedWidth,
+        height: capturedHeight,
+        source: 'takePictureAsync'
+      });
+      // ✅ CRITICAL: Use displayedImageLayout dimensions if available, otherwise wait for onImageLayout
+      const lw = displayedImageLayout.current.width;
+      const lh = displayedImageLayout.current.height;
+      if (lw > 0 && lh > 0) {
+        updateDisplayedContentRect(lw, lh);
+        // ✅ CRITICAL: Initialize crop box when we have camera frame data and image dimensions
+        if (points.length === 0) {
+          initializeCropBox();
+        }
+      }
+      return;
+    }
+
+    // ✅ FALLBACK: Use Image.getSize() if no captured dimensions available (e.g., from gallery)
     Image.getSize(image, (imgWidth, imgHeight) => {
       originalImageDimensions.current = {
         width: imgWidth,
@@ -117,7 +168,8 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
         height: imgHeight,
         platform: Platform.OS,
         pixelRatio: PixelRatio.get(),
-        uri: image
+        uri: image,
+        source: 'Image.getSize()'
       });
 
       // ✅ IMPORTANT: onImageLayout peut se déclencher avant Image.getSize (race condition).
@@ -126,6 +178,12 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
       const lh = displayedImageLayout.current.height;
       if (lw > 0 && lh > 0) {
         updateDisplayedContentRect(lw, lh);
+        // ✅ CRITICAL: Initialize crop box when we have image dimensions
+        // - If we have camera frame data, use it to match green frame exactly
+        // - If no camera frame data (gallery image), initialize with 70% default box
+        if (points.length === 0) {
+          initializeCropBox();
+        }
       }
     }, (error) => {
       console.error("Error getting image size:", error);
@@ -133,30 +191,475 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
   }, [image]);
 
 
+  // ✅ CRITICAL FIX: Convert green frame coordinates (camera preview) to captured image coordinates
+  const convertGreenFrameToImageCoords = (greenFrame, capturedImageSize, displayedImageRect) => {
+    if (!greenFrame || !capturedImageSize) {
+      console.warn("Cannot convert green frame: missing data");
+      return null;
+    }
+
+    const { x: frameX, y: frameY, width: frameWidth, height: frameHeight, wrapperWidth, wrapperHeight } = greenFrame;
+    const { width: imgWidth, height: imgHeight } = capturedImageSize;
+    const { x: displayX, y: displayY, width: displayWidth, height: displayHeight } = displayedImageRect;
+
+    console.log("🔄 Converting green frame:", {
+      greenFrame: { frameX, frameY, frameWidth, frameHeight, wrapperWidth, wrapperHeight },
+      capturedImageSize: { imgWidth, imgHeight },
+      displayedImageRect: { displayX, displayY, displayWidth, displayHeight }
+    });
+
+    // ✅ SIMPLIFIED APPROACH: Assume CameraView fills the wrapper completely (no letterboxing in preview)
+    // The green frame is drawn as a percentage of the wrapper (95% width, 80% height)
+    // We need to map this directly to the captured image, accounting for aspect ratio differences
+    
+    const previewAspect = wrapperWidth / wrapperHeight;
+    const capturedAspect = imgWidth / imgHeight;
+
+    console.log("📐 Aspect ratios:", {
+      previewAspect: previewAspect.toFixed(3),
+      capturedAspect: capturedAspect.toFixed(3),
+      wrapperSize: { wrapperWidth, wrapperHeight },
+      capturedSize: { imgWidth, imgHeight }
+    });
+
+    // ✅ KEY INSIGHT: The green frame is 95% of wrapper width and 80% of wrapper height
+    // If the captured image has a different aspect ratio, we need to map proportionally
+    // The green frame represents a region in the preview, which should map to the same region in the image
+    
+    // Calculate green frame as percentage of wrapper
+    const greenFramePercentX = frameX / wrapperWidth;
+    const greenFramePercentY = frameY / wrapperHeight;
+    const greenFramePercentWidth = frameWidth / wrapperWidth;
+    const greenFramePercentHeight = frameHeight / wrapperHeight;
+
+    console.log("📊 Green frame as percentage of wrapper:", {
+      x: (greenFramePercentX * 100).toFixed(2) + '%',
+      y: (greenFramePercentY * 100).toFixed(2) + '%',
+      width: (greenFramePercentWidth * 100).toFixed(2) + '%',
+      height: (greenFramePercentHeight * 100).toFixed(2) + '%'
+    });
+
+    // ✅ DIRECT MAPPING: Map green frame percentage directly to captured image
+    // The green frame covers a certain percentage of the preview, which should map to the same percentage of the image
+    // However, we need to account for aspect ratio differences
+    
+    // If preview and captured have same aspect ratio, direct mapping works
+    // If different, we need to account for letterboxing in the preview
+    
+    // Calculate how the captured image would be displayed in the preview (aspect-fit)
+    let previewContentWidth, previewContentHeight, previewOffsetX, previewOffsetY;
+    
+    if (Math.abs(capturedAspect - previewAspect) < 0.01) {
+      // Same aspect ratio → no letterboxing, direct mapping
+      previewContentWidth = wrapperWidth;
+      previewContentHeight = wrapperHeight;
+      previewOffsetX = 0;
+      previewOffsetY = 0;
+    } else if (capturedAspect > previewAspect) {
+      // Image is wider → fills width, letterboxing on top/bottom
+      previewContentWidth = wrapperWidth;
+      previewContentHeight = wrapperWidth / capturedAspect;
+      previewOffsetX = 0;
+      previewOffsetY = (wrapperHeight - previewContentHeight) / 2;
+    } else {
+      // Image is taller → fills height, letterboxing on left/right
+      previewContentHeight = wrapperHeight;
+      previewContentWidth = wrapperHeight * capturedAspect;
+      previewOffsetX = (wrapperWidth - previewContentWidth) / 2;
+      previewOffsetY = 0;
+    }
+
+    console.log("📐 Preview content area (actual image area in preview):", {
+      previewContentWidth: previewContentWidth.toFixed(2),
+      previewContentHeight: previewContentHeight.toFixed(2),
+      previewOffsetX: previewOffsetX.toFixed(2),
+      previewOffsetY: previewOffsetY.toFixed(2)
+    });
+
+    // Step 3: Convert green frame coordinates from wrapper space to preview content space
+    // ✅ CRITICAL FIX: The green frame is drawn on the wrapper, but we need to map it to the actual image area
+    // If the green frame overlaps letterboxing areas, we need to clip it to the actual image content area
+    
+    // Calculate green frame bounds in wrapper coordinates
+    const frameLeft = frameX;
+    const frameTop = frameY;
+    const frameRight = frameX + frameWidth;
+    const frameBottom = frameY + frameHeight;
+    
+    // Calculate preview content bounds in wrapper coordinates
+    const contentLeft = previewOffsetX;
+    const contentTop = previewOffsetY;
+    const contentRight = previewOffsetX + previewContentWidth;
+    const contentBottom = previewOffsetY + previewContentHeight;
+    
+    // ✅ KEY INSIGHT: The green frame should map to the same percentage of the image content area
+    // But we need to account for letterboxing - the green frame might extend into letterboxing areas
+    
+    // ✅ Clip green frame to preview content area (intersection)
+    const clippedLeft = Math.max(frameLeft, contentLeft);
+    const clippedTop = Math.max(frameTop, contentTop);
+    const clippedRight = Math.min(frameRight, contentRight);
+    const clippedBottom = Math.min(frameBottom, contentBottom);
+    
+    // Calculate clipped green frame dimensions
+    const clippedWidth = Math.max(0, clippedRight - clippedLeft);
+    const clippedHeight = Math.max(0, clippedBottom - clippedTop);
+    
+    // If green frame is completely outside content area, return null
+    if (clippedWidth <= 0 || clippedHeight <= 0) {
+      console.error("❌ Green frame is completely outside preview content area!");
+      return null;
+    }
+    
+    // ✅ ALTERNATIVE APPROACH: Map green frame as percentage of image content area
+    // The green frame covers a certain percentage of the wrapper, but we want it to cover
+    // the same visual percentage of the image content area
+    
+    // Calculate green frame center and size as percentage of wrapper
+    const greenFrameCenterX = (frameLeft + frameRight) / 2;
+    const greenFrameCenterY = (frameTop + frameBottom) / 2;
+    const greenFrameCenterPercentX = greenFrameCenterX / wrapperWidth;
+    const greenFrameCenterPercentY = greenFrameCenterY / wrapperHeight;
+    
+    // Map center to image content area
+    const imageContentCenterX = previewOffsetX + previewContentWidth * greenFrameCenterPercentX;
+    const imageContentCenterY = previewOffsetY + previewContentHeight * greenFrameCenterPercentY;
+    
+    // Calculate green frame size as percentage of image content area (not wrapper)
+    // The green frame should cover the same visual percentage of the image as it does of the wrapper
+    const imageContentFrameWidth = previewContentWidth * greenFramePercentWidth;
+    const imageContentFrameHeight = previewContentHeight * greenFramePercentHeight;
+    
+    // Calculate final green frame in image content coordinates
+    const finalFrameX = imageContentCenterX - imageContentFrameWidth / 2;
+    const finalFrameY = imageContentCenterY - imageContentFrameHeight / 2;
+    const finalFrameWidth = imageContentFrameWidth;
+    const finalFrameHeight = imageContentFrameHeight;
+    
+    // Clamp to image content bounds
+    const clampedFinalX = Math.max(previewOffsetX, Math.min(finalFrameX, previewOffsetX + previewContentWidth - finalFrameWidth));
+    const clampedFinalY = Math.max(previewOffsetY, Math.min(finalFrameY, previewOffsetY + previewContentHeight - finalFrameHeight));
+    const clampedFinalWidth = Math.min(finalFrameWidth, previewOffsetX + previewContentWidth - clampedFinalX);
+    const clampedFinalHeight = Math.min(finalFrameHeight, previewOffsetY + previewContentHeight - clampedFinalY);
+    
+    // Convert to relative coordinates within preview content area
+    const relativeX = clampedFinalX - previewOffsetX;
+    const relativeY = clampedFinalY - previewOffsetY;
+    
+    // Normalize to 0-1 range within the preview content area (actual image area)
+    const normalizedX = relativeX / previewContentWidth;
+    const normalizedY = relativeY / previewContentHeight;
+    const normalizedWidth = clampedFinalWidth / previewContentWidth;
+    const normalizedHeight = clampedFinalHeight / previewContentHeight;
+    
+    console.log("✂️ Green frame mapping (percentage-based):", {
+      originalFrame: { frameX, frameY, frameWidth, frameHeight },
+      greenFramePercentages: {
+        centerX: (greenFrameCenterPercentX * 100).toFixed(2) + '%',
+        centerY: (greenFrameCenterPercentY * 100).toFixed(2) + '%',
+        width: (greenFramePercentWidth * 100).toFixed(2) + '%',
+        height: (greenFramePercentHeight * 100).toFixed(2) + '%'
+      },
+      previewContent: { previewOffsetX, previewOffsetY, previewContentWidth, previewContentHeight },
+      mappedFrame: {
+        finalX: finalFrameX.toFixed(2),
+        finalY: finalFrameY.toFixed(2),
+        finalWidth: finalFrameWidth.toFixed(2),
+        finalHeight: finalFrameHeight.toFixed(2)
+      },
+      clampedFrame: {
+        x: clampedFinalX.toFixed(2),
+        y: clampedFinalY.toFixed(2),
+        width: clampedFinalWidth.toFixed(2),
+        height: clampedFinalHeight.toFixed(2)
+      },
+      normalized: { 
+        normalizedX: normalizedX.toFixed(4), 
+        normalizedY: normalizedY.toFixed(4), 
+        normalizedWidth: normalizedWidth.toFixed(4), 
+        normalizedHeight: normalizedHeight.toFixed(4) 
+      }
+    });
+
+    console.log("📊 Normalized coordinates:", {
+      relativeX,
+      relativeY,
+      normalizedX,
+      normalizedY,
+      normalizedWidth,
+      normalizedHeight
+    });
+
+    // Step 4: Convert normalized coordinates to captured image pixel coordinates
+    const imageX = normalizedX * imgWidth;
+    const imageY = normalizedY * imgHeight;
+    const imageWidth = normalizedWidth * imgWidth;
+    const imageHeight = normalizedHeight * imgHeight;
+
+    console.log("🖼️ Image pixel coordinates:", {
+      imageX,
+      imageY,
+      imageWidth,
+      imageHeight,
+      imgWidth,
+      imgHeight
+    });
+
+    // Step 5: Convert to displayed image coordinates (for white bounding box)
+    // The captured image is displayed with resizeMode='contain' in ImageCropper
+    const displayAspect = displayWidth / displayHeight;
+    let displayContentWidth, displayContentHeight, displayOffsetX, displayOffsetY;
+    
+    if (capturedAspect > displayAspect) {
+      // Image is wider than display → letterboxing on top/bottom
+      displayContentWidth = displayWidth;
+      displayContentHeight = displayWidth / capturedAspect;
+      displayOffsetX = displayX;
+      displayOffsetY = displayY + (displayHeight - displayContentHeight) / 2;
+    } else {
+      // Image is taller than display → letterboxing on left/right
+      displayContentHeight = displayHeight;
+      displayContentWidth = displayHeight * capturedAspect;
+      displayOffsetX = displayX + (displayWidth - displayContentWidth) / 2;
+      displayOffsetY = displayY;
+    }
+
+    // Convert image pixel coordinates to display coordinates
+    const scaleX = displayContentWidth / imgWidth;
+    const scaleY = displayContentHeight / imgHeight;
+    
+    const displayBoxX = displayOffsetX + imageX * scaleX;
+    const displayBoxY = displayOffsetY + imageY * scaleY;
+    const displayBoxWidth = imageWidth * scaleX;
+    const displayBoxHeight = imageHeight * scaleY;
+
+    // Clamp to displayed image bounds
+    const clampedX = Math.max(displayOffsetX, Math.min(displayBoxX, displayOffsetX + displayContentWidth - displayBoxWidth));
+    const clampedY = Math.max(displayOffsetY, Math.min(displayBoxY, displayOffsetY + displayContentHeight - displayBoxHeight));
+    const clampedWidth = Math.min(displayBoxWidth, displayOffsetX + displayContentWidth - clampedX);
+    const clampedHeight = Math.min(displayBoxHeight, displayOffsetY + displayContentHeight - clampedY);
+
+    const result = {
+      // Display coordinates (for white bounding box)
+      displayCoords: {
+        x: clampedX,
+        y: clampedY,
+        width: clampedWidth,
+        height: clampedHeight
+      },
+      // Image pixel coordinates (for backend crop)
+      imageCoords: {
+        x: Math.max(0, Math.min(imageX, imgWidth - imageWidth)),
+        y: Math.max(0, Math.min(imageY, imgHeight - imageHeight)),
+        width: Math.max(0, Math.min(imageWidth, imgWidth)),
+        height: Math.max(0, Math.min(imageHeight, imgHeight))
+      },
+      debug: {
+        previewAspect,
+        capturedAspect,
+        displayAspect,
+        previewContentWidth,
+        previewContentHeight,
+        previewOffsetX,
+        previewOffsetY,
+        displayContentWidth,
+        displayContentHeight,
+        displayOffsetX,
+        displayOffsetY,
+        scaleX,
+        scaleY
+      }
+    };
+
+    console.log("✅ Green frame converted to image coordinates:", JSON.stringify(result, null, 2));
+    
+    // ✅ VALIDATION: Ensure the white bounding box matches the green frame visually
+    // Calculate what percentage of the image the green frame covers
+    const greenFramePercentOfImage = {
+      width: (imageWidth / imgWidth) * 100,
+      height: (imageHeight / imgHeight) * 100
+    };
+    const greenFramePercentOfPreview = {
+      width: (frameWidth / wrapperWidth) * 100,
+      height: (frameHeight / wrapperHeight) * 100
+    };
+    
+    console.log("📏 Green frame coverage:", {
+      percentOfImage: greenFramePercentOfImage,
+      percentOfPreview: greenFramePercentOfPreview,
+      shouldMatch: "Green frame should cover same % of image as it does of preview"
+    });
+    
+    return result;
+  };
+
   // ✅ REFACTORISATION : Initialiser le crop box avec les dimensions d'affichage réelles
+  // ✅ CRITICAL FIX: If camera frame data exists, use it to match green frame exactly
   const initializeCropBox = () => {
-    const { x, y, width, height } = displayedContentRect.current;
-    if (width === 0 || height === 0) {
-      console.warn("Cannot initialize crop box: displayed dimensions are zero");
-      return;
+    // ✅ CRITICAL: Ensure displayedContentRect is available
+    let contentRect = displayedContentRect.current;
+    const layout = displayedImageLayout.current;
+    
+    // Recalculate if not available
+    if (contentRect.width === 0 || contentRect.height === 0) {
+      if (layout.width > 0 && layout.height > 0) {
+        updateDisplayedContentRect(layout.width, layout.height);
+        contentRect = displayedContentRect.current;
+      }
+      // If still not available, use layout as fallback
+      if (contentRect.width === 0 || contentRect.height === 0) {
+        if (layout.width > 0 && layout.height > 0) {
+          contentRect = {
+            x: layout.x,
+            y: layout.y,
+            width: layout.width,
+            height: layout.height
+          };
+        } else {
+          console.warn("Cannot initialize crop box: displayed dimensions are zero");
+          return;
+        }
+      }
     }
     
-    const boxWidth = width * 0.8;
-    const boxHeight = height * 0.8;
-    const centerX = x + width / 2;
-    const centerY = y + height / 2;
+    const { x, y, width, height } = contentRect;
+
+    // ✅ PRIORITY: If we have green frame data from camera, use it to match exactly
+    if (cameraFrameData.current && cameraFrameData.current.greenFrame && originalImageDimensions.current.width > 0) {
+      const converted = convertGreenFrameToImageCoords(
+        cameraFrameData.current.greenFrame,
+        cameraFrameData.current.capturedImageSize || originalImageDimensions.current,
+        contentRect
+      );
+
+      if (converted && converted.displayCoords) {
+        const { x: boxX, y: boxY, width: boxWidth, height: boxHeight } = converted.displayCoords;
+        const { x: contentX, y: contentY, width: contentWidth, height: contentHeight } = contentRect;
+        
+        // ✅ CRITICAL: Clamp points to displayed image bounds (double-check)
+        // Ensure the bounding box stays within contentRect, but preserve aspect ratio and percentage
+        // First, clamp position
+        let clampedBoxX = Math.max(contentX, Math.min(boxX, contentX + contentWidth - boxWidth));
+        let clampedBoxY = Math.max(contentY, Math.min(boxY, contentY + contentHeight - boxHeight));
+        
+        // ✅ CRITICAL: Preserve the width and height from conversion (they should already be correct)
+        // Only adjust if they would exceed bounds, but try to maintain the 80% coverage
+        let clampedBoxWidth = boxWidth;
+        let clampedBoxHeight = boxHeight;
+        
+        // Ensure the box fits within contentRect
+        if (clampedBoxX + clampedBoxWidth > contentX + contentWidth) {
+          clampedBoxWidth = contentX + contentWidth - clampedBoxX;
+        }
+        if (clampedBoxY + clampedBoxHeight > contentY + contentHeight) {
+          clampedBoxHeight = contentY + contentHeight - clampedBoxY;
+        }
+        
+        // ✅ CRITICAL: If clamping reduced dimensions, adjust position to center the box
+        // This ensures the white bounding box maintains the same visual percentage as the green frame
+        if (clampedBoxWidth < boxWidth || clampedBoxHeight < boxHeight) {
+          // Re-center if possible
+          const idealX = contentX + (contentWidth - clampedBoxWidth) / 2;
+          const idealY = contentY + (contentHeight - clampedBoxHeight) / 2;
+          clampedBoxX = Math.max(contentX, Math.min(idealX, contentX + contentWidth - clampedBoxWidth));
+          clampedBoxY = Math.max(contentY, Math.min(idealY, contentY + contentHeight - clampedBoxHeight));
+        }
+        
+        // ✅ CRITICAL: Ensure points are within contentRect bounds but not exactly at the edges
+        // This allows free movement in all directions
+        const minX = contentX;
+        const maxX = contentX + contentWidth;
+        const minY = contentY;
+        const maxY = contentY + contentHeight;
+        
+        // Create points from the clamped green frame coordinates
+        // Clamp each point individually to ensure they're within bounds
+        const newPoints = [
+          { 
+            x: Math.max(minX, Math.min(clampedBoxX, maxX)), 
+            y: Math.max(minY, Math.min(clampedBoxY, maxY)) 
+          },
+          { 
+            x: Math.max(minX, Math.min(clampedBoxX + clampedBoxWidth, maxX)), 
+            y: Math.max(minY, Math.min(clampedBoxY, maxY)) 
+          },
+          { 
+            x: Math.max(minX, Math.min(clampedBoxX + clampedBoxWidth, maxX)), 
+            y: Math.max(minY, Math.min(clampedBoxY + clampedBoxHeight, maxY)) 
+          },
+          { 
+            x: Math.max(minX, Math.min(clampedBoxX, maxX)), 
+            y: Math.max(minY, Math.min(clampedBoxY + clampedBoxHeight, maxY)) 
+          },
+        ];
+
+        // ✅ VALIDATION: Verify the white bounding box matches green frame percentage (80%)
+        const whiteBoxPercentOfDisplay = {
+          width: (clampedBoxWidth / contentRect.width) * 100,
+          height: (clampedBoxHeight / contentRect.height) * 100
+        };
+        const greenFramePercentOfWrapper = {
+          width: (cameraFrameData.current.greenFrame.width / cameraFrameData.current.greenFrame.wrapperWidth) * 100,
+          height: (cameraFrameData.current.greenFrame.height / cameraFrameData.current.greenFrame.wrapperHeight) * 100
+        };
+
+        // ✅ DEBUG: Log if percentages don't match (should both be ~80%)
+        if (Math.abs(whiteBoxPercentOfDisplay.width - greenFramePercentOfWrapper.width) > 5 ||
+            Math.abs(whiteBoxPercentOfDisplay.height - greenFramePercentOfWrapper.height) > 5) {
+          console.warn("⚠️ White box percentage doesn't match green frame:", {
+            whiteBox: whiteBoxPercentOfDisplay,
+            greenFrame: greenFramePercentOfWrapper,
+            difference: {
+              width: Math.abs(whiteBoxPercentOfDisplay.width - greenFramePercentOfWrapper.width),
+              height: Math.abs(whiteBoxPercentOfDisplay.height - greenFramePercentOfWrapper.height)
+            }
+          });
+        }
+
+        console.log("✅ Initializing crop box from green frame (clamped):", {
+          greenFrame: cameraFrameData.current.greenFrame,
+          converted,
+          clamped: {
+            x: clampedBoxX,
+            y: clampedBoxY,
+            width: clampedBoxWidth,
+            height: clampedBoxHeight
+          },
+          contentRect: contentRect,
+          points: newPoints,
+          validation: {
+            whiteBoxPercentOfDisplay,
+            greenFramePercentOfWrapper,
+            shouldMatch: "White box % should match green frame % (80% - accounting for aspect ratio)"
+          }
+        });
+
+        setPoints(newPoints);
+        // Clear camera frame data after use to avoid reusing it
+        cameraFrameData.current = null;
+        return;
+      }
+    }
+    
+    // ✅ CRITICAL: Default crop box (70% of displayed area - centered)
+    const boxWidth = width * 0.70; // 70% width
+    const boxHeight = height * 0.70; // 70% height
+    const boxX = x + (width - boxWidth) / 2; // Centered horizontally
+    const boxY = y + (height - boxHeight) / 2; // Centered vertically
     const newPoints = [
-      { x: centerX - boxWidth / 2, y: centerY - boxHeight / 2 },
-      { x: centerX + boxWidth / 2, y: centerY - boxHeight / 2 },
-      { x: centerX + boxWidth / 2, y: centerY + boxHeight / 2 },
-      { x: centerX - boxWidth / 2, y: centerY + boxHeight / 2 },
+      { 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
     ];
     
-    console.log("Initializing crop box:", {
+    console.log("Initializing crop box (default - 70% centered):", {
       displayedWidth: width,
       displayedHeight: height,
       boxWidth,
       boxHeight,
+      boxX,
+      boxY,
       points: newPoints
     });
     
@@ -194,12 +697,27 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
       y: layout.y
     });
     
-    // ✅ CORRECTION : Initialiser le crop box dès que les dimensions d'affichage sont disponibles
-    // Les dimensions d'affichage sont suffisantes pour afficher la bounding box
-    // Les dimensions originales seront utilisées plus tard pour la conversion de coordonnées lors du crop
-    if (layout.width > 0 && layout.height > 0) {
-      // Initialiser seulement si les points sont vides (première fois) ou si on vient de charger une nouvelle image
-      if (points.length === 0) {
+    // ✅ CRITICAL FIX: Only initialize crop box if:
+    // 1. Layout dimensions are available
+    // 2. We have no points yet (first initialization)
+    // 3. We have original image dimensions (either from camera or Image.getSize)
+    // This prevents initializing with wrong dimensions for subsequent images
+    if (layout.width > 0 && layout.height > 0 && points.length === 0) {
+      // ✅ CRITICAL: Wait for original dimensions before initializing
+      // If dimensions not available yet, initializeCropBox will be called from useEffect when Image.getSize completes
+      if (originalImageDimensions.current.width > 0 && originalImageDimensions.current.height > 0) {
+        initializeCropBox();
+      } else if (cameraFrameData.current && cameraFrameData.current.capturedImageSize) {
+        // ✅ If we have camera dimensions, use them immediately
+        originalImageDimensions.current = {
+          width: cameraFrameData.current.capturedImageSize.width,
+          height: cameraFrameData.current.capturedImageSize.height,
+        };
+        initializeCropBox();
+      } else {
+        // ✅ For gallery images, we can initialize with layout dimensions as fallback
+        // The crop box will be recalculated when Image.getSize completes
+        // But we initialize now so the user sees a border immediately
         initializeCropBox();
       }
     }
@@ -217,8 +735,34 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
     const now = Date.now();
     const { locationX: tapX, locationY: tapY } = e.nativeEvent;
 
+    // ✅ CRITICAL: Ensure displayedContentRect is available
+    let contentRect = displayedContentRect.current;
+    const layout = displayedImageLayout.current;
+    
+    // Recalculate if not available
+    if (contentRect.width === 0 || contentRect.height === 0) {
+      if (layout.width > 0 && layout.height > 0) {
+        updateDisplayedContentRect(layout.width, layout.height);
+        contentRect = displayedContentRect.current;
+      }
+      // If still not available, use layout as fallback
+      if (contentRect.width === 0 || contentRect.height === 0) {
+        if (layout.width > 0 && layout.height > 0) {
+          contentRect = {
+            x: layout.x,
+            y: layout.y,
+            width: layout.width,
+            height: layout.height
+          };
+        } else {
+          console.warn("⚠️ Cannot handle tap: no layout dimensions available");
+          return;
+        }
+      }
+    }
+
     // ✅ Clamp to real displayed image content (avoid points outside image due to letterboxing)
-    const { x: cx, y: cy, width: cw, height: ch } = displayedContentRect.current;
+    const { x: cx, y: cy, width: cw, height: ch } = contentRect;
     const boundedTapX = Math.max(cx, Math.min(tapX, cx + cw));
     const boundedTapY = Math.max(cy, Math.min(tapY, cy + ch));
   
@@ -231,7 +775,28 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
       const index = points.findIndex(p => Math.abs(p.x - boundedTapX) < selectRadius && Math.abs(p.y - boundedTapY) < selectRadius);
       if (index !== -1) {
         selectedPointIndex.current = index;
+        // ✅ FREE DRAG: Store initial positions for delta-based movement
+        initialTouchPosition.current = { x: tapX, y: tapY };
+        lastTouchPosition.current = { x: tapX, y: tapY }; // Store last touch for incremental delta
+        initialPointPosition.current = { ...points[index] };
         lastValidPosition.current = { ...points[index] }; // store original position before move
+        
+        // ✅ CRITICAL: Disable parent ScrollView scrolling when dragging a point
+        // This prevents ScrollView from intercepting vertical movement
+        try {
+          // Find and disable parent ScrollView if it exists
+          const findScrollView = (node) => {
+            if (!node) return null;
+            if (node._component && node._component.setNativeProps) {
+              // Try to disable scrolling
+              node._component.setNativeProps({ scrollEnabled: false });
+            }
+            return findScrollView(node._owner || node._parent);
+          };
+          // Note: This is a workaround - ideally we'd pass a ref to disable scroll
+        } catch (e) {
+          // Ignore errors
+        }
       }
       lastTap.current = now;
     }
@@ -239,36 +804,158 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
 
   const handleMove = (e) => {
     if (showResult || selectedPointIndex.current === null) return;
-  
-    const { locationX: moveX, locationY: moveY } = e.nativeEvent;
-    // ✅ CORRECTION : limiter les points à la zone RÉELLE de l'image (contain), pas au conteneur complet
-    const { x: cx, y: cy, width: cw, height: ch } = displayedContentRect.current;
-    const boundedX = Math.max(cx, Math.min(moveX, cx + cw));
-    const boundedY = Math.max(cy, Math.min(moveY, cy + ch));
-  
-    const edgeThreshold = 10;
-    const isNearTopOrBottomEdge =
-      boundedY <= cy + edgeThreshold || boundedY >= (cy + ch) - edgeThreshold;
-  
-    const isNearLeftOrRightEdge =
-      boundedX <= cx + edgeThreshold || boundedX >= (cx + cw) - edgeThreshold;
-  
-    if (isNearTopOrBottomEdge || isNearLeftOrRightEdge) {
-      // Reset point to last known position
-      if (lastValidPosition.current && selectedPointIndex.current !== null) {
-        setPoints(prev =>
-          prev.map((p, i) =>
-            i === selectedPointIndex.current ? lastValidPosition.current : p
-          )
-        );
-      }
-      selectedPointIndex.current = null;
+    
+    // ✅ FREE DRAG: Use delta-based movement for smooth, unconstrained dragging
+    // ✅ CRITICAL FIX: Use incremental delta calculation for more reliable vertical movement
+    // Instead of calculating delta from initial position, calculate from last position
+    // This works better when ScrollView intercepts some events
+    const nativeEvent = e.nativeEvent;
+    const currentX = nativeEvent.locationX;
+    const currentY = nativeEvent.locationY;
+    
+    // ✅ Validate coordinates
+    if (currentX === undefined || currentY === undefined || isNaN(currentX) || isNaN(currentY)) {
+      console.warn("⚠️ Cannot get touch coordinates", { 
+        locationX: nativeEvent.locationX, 
+        locationY: nativeEvent.locationY
+      });
       return;
     }
+    
+    // ✅ CRITICAL: Use incremental delta (from last position) instead of absolute delta
+    // This is more reliable when ScrollView affects coordinate updates
+    let deltaX, deltaY;
+    if (lastTouchPosition.current) {
+      // Calculate incremental delta from last touch position
+      deltaX = currentX - lastTouchPosition.current.x;
+      deltaY = currentY - lastTouchPosition.current.y;
+    } else if (initialTouchPosition.current) {
+      // Fallback to absolute delta if lastTouchPosition not set
+      deltaX = currentX - initialTouchPosition.current.x;
+      deltaY = currentY - initialTouchPosition.current.y;
+    } else {
+      console.warn("⚠️ No touch position reference available");
+      return;
+    }
+    
+    // ✅ CRITICAL: Don't update lastTouchPosition here - update it AFTER clamping
+    // This ensures that if the point was clamped, lastTouchPosition reflects the actual
+    // touch position, allowing the next delta to be calculated correctly
+    
+    // ✅ CRITICAL: Ensure displayedContentRect is available
+    let contentRect = displayedContentRect.current;
+    const layout = displayedImageLayout.current;
+    
+    // Recalculate if not available
+    if (contentRect.width === 0 || contentRect.height === 0) {
+      if (layout.width > 0 && layout.height > 0) {
+        updateDisplayedContentRect(layout.width, layout.height);
+        contentRect = displayedContentRect.current;
+      }
+      // If still not available, use layout as fallback
+      if (contentRect.width === 0 || contentRect.height === 0) {
+        if (layout.width > 0 && layout.height > 0) {
+          contentRect = {
+            x: layout.x,
+            y: layout.y,
+            width: layout.width,
+            height: layout.height
+          };
+        } else {
+          console.warn("⚠️ Cannot move point: no layout dimensions available");
+          return;
+        }
+      }
+    }
+    
+    // ✅ FREE DRAG: Ensure initial positions are set
+    if (!initialPointPosition.current) {
+      const currentPoint = points[selectedPointIndex.current];
+      if (currentPoint) {
+        initialPointPosition.current = { ...currentPoint };
+      } else {
+        console.warn("⚠️ No point found for selected index");
+        return;
+      }
+    }
+    
+    // ✅ CRITICAL: deltaX and deltaY are already calculated above using incremental approach
+    // This ensures smooth movement even when ScrollView affects coordinate updates
+    
+    // ✅ CRITICAL FIX: Use CURRENT point position (after previous clamping) instead of initial position
+    // This allows the point to move even if it was previously clamped to a limit
+    // If lastValidPosition exists (from previous clamping), use it; otherwise use initial position
+    const basePoint = lastValidPosition.current || initialPointPosition.current;
+    
+    // ✅ DEBUG: Log movement to identify vertical movement issues
+    if (Math.abs(deltaY) > 10) {
+      console.log("🔄 Movement detected:", {
+        deltaX: deltaX.toFixed(2),
+        deltaY: deltaY.toFixed(2),
+        currentY: currentY.toFixed(2),
+        initialY: initialTouchPosition.current?.y?.toFixed(2),
+        pointInitialY: initialPointPosition.current.y.toFixed(2),
+        basePointY: basePoint.y.toFixed(2),
+        usingLastValid: !!lastValidPosition.current
+      });
+    }
+    
+    // ✅ FREE DRAG: Apply delta to CURRENT point position (not initial)
+    // - This allows movement even if point was previously clamped
+    // - No constraints on distance, angle, or edge length
+    // - No forced horizontal/vertical alignment
+    // - No angle locking
+    // - Direct mapping of gesture delta (dx, dy) - both X and Y treated equally
+    const newX = basePoint.x + deltaX;
+    const newY = basePoint.y + deltaY;
+    
+    // ✅ ONLY CONSTRAINT: Clamp to image bounds to keep points inside the image
+    // x ∈ [cx, cx + cw], y ∈ [cy, cy + ch]
+    // This is the ONLY constraint - no other geometry normalization
+    const { x: cx, y: cy, width: cw, height: ch } = contentRect;
+    // ✅ CRITICAL: Calculate bounds correctly - maxX = cx + cw, maxY = cy + ch
+    const maxX = cx + cw;
+    const maxY = cy + ch;
+    const boundedX = Math.max(cx, Math.min(newX, maxX));
+    const boundedY = Math.max(cy, Math.min(newY, maxY));
+    
+    // ✅ DEBUG: Log bounds calculation to verify clamping is correct
+    if (Math.abs(newY - boundedY) > 1) {
+      console.log("🔍 Y coordinate clamping:", {
+        newY: newY.toFixed(2),
+        boundedY: boundedY.toFixed(2),
+        cy: cy.toFixed(2),
+        maxY: maxY.toFixed(2),
+        ch: ch.toFixed(2),
+        deltaY: deltaY.toFixed(2),
+        isAtMaxLimit: Math.abs(boundedY - maxY) < 0.01,
+        isAtMinLimit: Math.abs(boundedY - cy) < 0.01
+      });
+    }
+    
+    // ✅ DEBUG: Log if clamping is limiting movement
+    if (Math.abs(newY - boundedY) > 1 || Math.abs(newX - boundedX) > 1) {
+      console.log("⚠️ Movement clamped:", {
+        requested: { x: newX.toFixed(2), y: newY.toFixed(2) },
+        clamped: { x: boundedX.toFixed(2), y: boundedY.toFixed(2) },
+        contentRect: { x: cx.toFixed(2), y: cy.toFixed(2), width: cw.toFixed(2), height: ch.toFixed(2) }
+      });
+    }
   
-    // Valid move — update point and store as new last valid position
+    // ✅ FREE DRAG: Update point directly
+    // - No polygon simplification
+    // - No reordering of points
+    // - No geometry normalization during drag
     const updatedPoint = { x: boundedX, y: boundedY };
+    // ✅ CRITICAL: Always update lastValidPosition with the clamped position
+    // This ensures that the next movement calculation uses the current (clamped) position
+    // instead of the initial position, allowing movement even after clamping
     lastValidPosition.current = updatedPoint;
+    
+    // ✅ CRITICAL: Update lastTouchPosition AFTER clamping
+    // This ensures that the next delta calculation is relative to the current touch position
+    // If the point was clamped, this allows movement in the opposite direction on the next move
+    lastTouchPosition.current = { x: currentX, y: currentY };
   
     setPoints(prev =>
       prev.map((p, i) =>
@@ -278,7 +965,23 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
   };
 
   const handleRelease = () => {
+    // ✅ FREE DRAG: Clear initial positions when drag ends
+    initialTouchPosition.current = null;
+    initialPointPosition.current = null;
+    const wasDragging = selectedPointIndex.current !== null;
     selectedPointIndex.current = null;
+    
+    // ✅ CRITICAL: Re-enable parent ScrollView scrolling when drag ends
+    if (wasDragging) {
+      try {
+        // Re-enable scrolling after a short delay to avoid conflicts
+        setTimeout(() => {
+          // ScrollView will be re-enabled automatically when responder is released
+        }, 100);
+      } catch (e) {
+        // Ignore errors
+      }
+    }
   };
 
   const handleReset = () => {
@@ -340,14 +1043,22 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
 
       {showCustomCamera ? (
         <CustomCamera
-          onPhotoCaptured={(uri) => { 
+          onPhotoCaptured={(uri, frameData) => { 
+            // ✅ CRITICAL FIX: Store green frame coordinates for coordinate conversion
+            if (frameData && frameData.greenFrame) {
+              cameraFrameData.current = {
+                greenFrame: frameData.greenFrame,
+                capturedImageSize: frameData.capturedImageSize
+              };
+              console.log("✅ Camera frame data received:", cameraFrameData.current);
+            }
             setImage(uri); 
             setShowCustomCamera(false);
             // ✅ CORRECTION : Réinitialiser les points et l'angle de rotation quand une nouvelle photo est capturée
             setPoints([]);
             rotationAngle.current = 0;
-            setPoints([]);
-            rotationAngle.current = 0;
+            // ✅ CRITICAL: initializeCropBox will be called automatically when image layout is ready
+            // The green frame coordinates are stored in cameraFrameData.current and will be used
           }}
           onCancel={() => setShowCustomCamera(false)}
         />
@@ -396,15 +1107,46 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                           });
                           
                           // ✅ CORRECTION : Utiliser le rectangle de contenu réel (contain)
-                          const contentRect = displayedContentRect.current;
-                          const displayedWidth = contentRect.width;
-                          const displayedHeight = contentRect.height;
+                          // ✅ CRITICAL: Recalculate displayedContentRect if not available
+                          const 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);
+                          }
+                          
+                          let contentRect = displayedContentRect.current;
+                          let displayedWidth = contentRect.width;
+                          let displayedHeight = contentRect.height;
                           
                           // Vérifier que les dimensions d'affichage sont valides
                           if (displayedWidth === 0 || displayedHeight === 0) {
-                            throw new Error("Displayed image dimensions not available. Image may not be laid out yet.");
+                            // ✅ FALLBACK: Try to use displayedImageLayout if contentRect is not available
+                            if (layout.width > 0 && layout.height > 0) {
+                              console.warn("⚠️ displayedContentRect not available, using displayedImageLayout as fallback");
+                              // Use layout dimensions as fallback (assuming no letterboxing)
+                              contentRect = {
+                                x: layout.x,
+                                y: layout.y,
+                                width: layout.width,
+                                height: layout.height
+                              };
+                              displayedWidth = contentRect.width;
+                              displayedHeight = contentRect.height;
+                              // Update the ref for consistency
+                              displayedContentRect.current = contentRect;
+                            } else {
+                              throw new Error("Displayed image dimensions not available. Image may not be laid out yet. Please wait a moment and try again.");
+                            }
                           }
                           
+                          console.log("✅ Using contentRect for crop:", contentRect);
+                          
                           console.log("Displayed image dimensions:", {
                             width: displayedWidth,
                             height: displayedHeight
@@ -552,9 +1294,70 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
               collapsable={false}
               style={showFullScreenCapture ? styles.fullscreenImageContainer : styles.imageContainer}
               onStartShouldSetResponder={() => true}
+              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
+                const 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={(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={handleMove}
+              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={() => {
+                // ✅ 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={() => {
+                // Always capture start events
+                return true;
+              }}
+              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
+                const 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={() => {
+                console.warn("⚠️ Responder rejected - ScrollView may intercept");
+              }}
               >
                 <Image source={{ uri: image }} style={styles.image} onLayout={onImageLayout} />
               {/* IMPORTANT: prevent SVG overlay from stealing touch events so dragging works reliably */}