react-native-expo-cropper 1.2.37 → 1.2.39

package/dist/ImageCropperStyles.js

@@ -17,6 +17,8 @@ var styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
+    justifyContent: 'flex-start',
+    // ✅ Start from top, allow content to flow down
     backgroundColor: DEEP_BLACK
   },
   buttonContainer: {
@@ -32,6 +34,20 @@ var styles = _reactNative.StyleSheet.create({
     zIndex: 10,
     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,
+    gap: 8,
+    backgroundColor: DEEP_BLACK // Fond noir pour séparer visuellement
+  },
   iconButton: {
     backgroundColor: PRIMARY_GREEN,
     width: 60,
@@ -41,16 +57,26 @@ var styles = _reactNative.StyleSheet.create({
     justifyContent: 'center',
     marginRight: 5
   },
+  rotationButton: {
+    // Cercle, même couleur que Reset/Confirm (#549433), même hauteur que les autres boutons
+    backgroundColor: '#549433',
+    width: 56,
+    height: 48,
+    // Même hauteur approximative que les boutons rectangulaires (padding 10 + texte)
+    borderRadius: 28,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
   button: {
     flex: 1,
-    width: "100%",
-    padding: 10,
+    minHeight: 48,
+    // Même hauteur que le bouton de rotation
+    paddingVertical: 12,
+    paddingHorizontal: 10,
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "#549433",
-    borderRadius: 5,
-    marginBottom: 20,
-    marginRight: 5
+    borderRadius: 5
   },
   buttonText: {
     color: 'white',

package/package.json

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

package/src/CustomCamera.js

@@ -8,6 +8,7 @@ import {
   SafeAreaView,
   Dimensions,
   Image,
+  Platform,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Camera, CameraView } from 'expo-camera';
@@ -51,6 +52,9 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
   // ✅ CRITICAL FIX: Calculate green frame coordinates relative to camera preview
   // The green frame should be calculated on the wrapper (as it's visually drawn there)
   // But we store it with wrapper dimensions so ImageCropper can map it correctly
+  // 
+  // NOTE: Camera capture aspect ratio (typically 4:3) may differ from wrapper aspect ratio (9:16)
+  // This is handled in ImageCropper by using "cover" mode to match preview content
   const calculateGreenFrameCoordinates = () => {
     const wrapperWidth = cameraWrapperLayout.width;
     const wrapperHeight = cameraWrapperLayout.height;
@@ -60,11 +64,10 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
       return null;
     }
     
-    // ✅ Green frame dimensions: 80% width, 80% height (centered)
-    // The green frame should cover 80% of the image area, centered
-    const frameWidth = wrapperWidth * 0.80; // 80% width
-    const frameHeight = wrapperHeight * 0.80; // 80% height
-    const frameX = (wrapperWidth - frameWidth) / 2; // Centered horizontally
+    // ✅ Calculate green frame as percentage of WRAPPER
+    const frameWidth = wrapperWidth * 0.85;   // 85% of wrapper width
+    const frameHeight = wrapperHeight * 0.70; // 70% of wrapper height
+    const frameX = (wrapperWidth - frameWidth) / 2;  // Centered horizontally
     const frameY = (wrapperHeight - frameHeight) / 2; // Centered vertically
     
     const frameCoords = {
@@ -77,8 +80,8 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
       // ✅ Store percentages for easier mapping later
       percentX: (frameX / wrapperWidth) * 100,
       percentY: (frameY / wrapperHeight) * 100,
-      percentWidth: 80,
-      percentHeight: 80
+      percentWidth: 85,  // 85% of wrapper width
+      percentHeight: 70  // 70% of wrapper height
     };
     
     console.log("✅ Green frame coordinates calculated:", frameCoords);
@@ -105,45 +108,85 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
         // Wait a bit before taking picture (works on iOS)
         await waitForRender(2);
   
-          // ✅ REFACTORISATION : Capture avec qualité maximale et préservation des métadonnées
-          const photo = await cameraRef.current.takePictureAsync({
-            quality: 1, // Qualité maximale (0-1, 1 = meilleure qualité)
+          // ✅ OPTIMIZED: Capture with maximum quality and native camera ratio
+          // Platform-specific optimizations for best quality
+          const captureOptions = {
+            // Maximum quality (0-1, 1 = best quality, no compression)
+            quality: 1,
+            
+            // 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,
+            
+            // ✅ Platform-specific optimizations
+            ...(Platform.OS === 'ios' && {
+              // iOS: Use native capture format (typically 4:3 or 16:9 depending on device)
+              // No additional processing to preserve quality
+            }),
+            ...(Platform.OS === 'android' && {
+              // Android: Ensure maximum resolution capture
+              // skipProcessing already handles this, but we can add Android-specific options if needed
+            }),
+          };
+
+          console.log("📸 Capturing photo with maximum quality settings:", {
+            platform: Platform.OS,
+            options: captureOptions,
+            wrapperSize: { width: cameraWrapperLayout.width, height: cameraWrapperLayout.height }
           });
 
-          console.log("Photo captured with maximum quality:", {
+          const photo = await cameraRef.current.takePictureAsync(captureOptions);
+
+          // ✅ Validate captured photo dimensions
+          if (!photo.width || !photo.height || photo.width === 0 || photo.height === 0) {
+            throw new Error("Invalid photo dimensions received from camera");
+          }
+
+          const capturedAspectRatio = photo.width / photo.height;
+          console.log("✅ Photo captured with maximum quality:", {
             uri: photo.uri,
             width: photo.width,
             height: photo.height,
-            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
           const 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
-          const fixedUri = photo.uri;
+          if (!greenFrameCoords) {
+            throw new Error("Green frame coordinates not available");
+          }
   
-          // Envoyer l'URI et les coordonnées du green frame à ImageCropper
-          onPhotoCaptured(fixedUri, {
+          // ✅ 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 }
+            capturedImageSize: { 
+              width: photo.width, 
+              height: photo.height,
+              aspectRatio: capturedAspectRatio
+            }
           });
+          
           setLoadingBeforeCapture(false);
       } catch (error) {
-        console.error("Error capturing photo:", error);
+        console.error("❌ Error capturing photo:", error);
         setLoadingBeforeCapture(false);
-        Alert.alert("Erreur", "Impossible de capturer la photo. Veuillez réessayer.");
+        Alert.alert(
+          "Erreur", 
+          `Impossible de capturer la photo: ${error.message || "Erreur inconnue"}. Veuillez réessayer.`
+        );
       }
     }
   };
@@ -169,7 +212,13 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
           style={styles.camera}
           facing="back"
           ref={cameraRef}
-          onCameraReady={() => setIsReady(true)}
+          onCameraReady={() => {
+            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
         />
 
         {/* Loading overlay */}