react-native-expo-cropper 1.2.44 → 1.2.46

package/src/CustomCamera.js

@@ -1,352 +1,355 @@
-import React, { useState, useRef, useEffect } from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-  TouchableOpacity,
-  Alert,
-  SafeAreaView,
-  Dimensions,
-  Image,
-  Platform,
-} from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Camera, CameraView } from 'expo-camera';
-const { width } = Dimensions.get('window');
-
-export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
-  const [isReady, setIsReady] = useState(false);
-  const [loadingBeforeCapture, setLoadingBeforeCapture] = useState(false);
-  const [hasPermission, setHasPermission] = useState(null);
-  const cameraRef = useRef(null);
-  const cameraWrapperRef = useRef(null);
-  const insets = useSafeAreaInsets();
-  const [cameraWrapperLayout, setCameraWrapperLayout] = useState({ width: 0, height: 0, x: 0, y: 0 });
-  const [greenFrame, setGreenFrame] = useState(null);
-
-  useEffect(() => {
-    (async () => {
-      const { status } = await Camera.requestCameraPermissionsAsync();
-      setHasPermission(status === 'granted');
-    })();
-  }, []);
-
-  // Helper function to wait for multiple render cycles (works on iOS)
-  const waitForRender = (cycles = 5) => {
-    return new Promise((resolve) => {
-      let count = 0;
-      const tick = () => {
-        count++;
-        if (count >= cycles) {
-          resolve();
-        } else {
-          setImmediate(tick);
-        }
-      };
-      setImmediate(tick);
-    });
-  };
-
-
-
-  // ✅ CRITICAL FIX: Calculate green frame coordinates relative to camera preview
-  // The green frame should be calculated on the wrapper (as it's visually drawn there)
-  // But we store it with wrapper dimensions so ImageCropper can map it correctly
-  //
-  // NOTE: Camera capture aspect ratio (typically 4:3) may differ from wrapper aspect ratio (9:16)
-  // This is handled in ImageCropper by using "cover" mode to match preview content
-  const calculateGreenFrameCoordinates = () => {
-    const wrapperWidth = cameraWrapperLayout.width;
-    const wrapperHeight = cameraWrapperLayout.height;
-
-    if (wrapperWidth === 0 || wrapperHeight === 0) {
-      console.warn("Camera wrapper layout not ready, cannot calculate green frame");
-      return null;
-    }
-
-    // ✅ Calculate green frame as percentage of WRAPPER
-    const frameWidth = wrapperWidth * 0.85;   // 85% of wrapper width
-    const frameHeight = wrapperHeight * 0.70; // 70% of wrapper height
-    const frameX = (wrapperWidth - frameWidth) / 2;  // Centered horizontally
-    const frameY = (wrapperHeight - frameHeight) / 2; // Centered vertically
-
-    const frameCoords = {
-      x: frameX,
-      y: frameY,
-      width: frameWidth,
-      height: frameHeight,
-      wrapperWidth,
-      wrapperHeight,
-      // ✅ Store percentages for easier mapping later
-      percentX: (frameX / wrapperWidth) * 100,
-      percentY: (frameY / wrapperHeight) * 100,
-      percentWidth: 85,  // 85% of wrapper width
-      percentHeight: 70  // 70% of wrapper height
-    };
-
-    console.log("✅ Green frame coordinates calculated:", frameCoords);
-    return frameCoords;
-  };
-
-  // 🔁 Keep green frame state in sync with wrapper layout so we can both render it
-  // and send the exact same coordinates along with the captured photo.
-  useEffect(() => {
-    const coords = calculateGreenFrameCoordinates();
-    if (coords) {
-      setGreenFrame(coords);
-    }
-  }, [cameraWrapperLayout]);
-
-  const takePicture = async () => {
-    if (cameraRef.current) {
-      try {
-          // Show loading after a delay (using setImmediate for iOS compatibility)
-          waitForRender(5).then(() => {
-            setLoadingBeforeCapture(true);
-          });
-
-        // Wait a bit before taking picture (works on iOS)
-        await waitForRender(2);
-
-          // ✅ 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,
-
-            // ✅ CRITICAL: skipProcessing preserves original resolution and avoids interpolation
-            // This ensures pixel-perfect quality and prevents premature resizing
-            skipProcessing: true,
-
-            // Include EXIF metadata (orientation, camera settings, etc.)
-            exif: true,
-
-            // ✅ Platform-specific optimizations
-            ...(Platform.OS === 'ios' && {
-              // iOS: Use native capture format (typically 4:3 or 16:9 depending on device)
-              // No additional processing to preserve quality
-            }),
-            ...(Platform.OS === 'android' && {
-              // Android: Ensure maximum resolution capture
-              // skipProcessing already handles this, but we can add Android-specific options if needed
-            }),
-          };
-
-          console.log("📸 Capturing photo with maximum quality settings:", {
-            platform: Platform.OS,
-            options: captureOptions,
-            wrapperSize: { width: cameraWrapperLayout.width, height: cameraWrapperLayout.height }
-          });
-
-          const photo = await cameraRef.current.takePictureAsync(captureOptions);
-
-          // ✅ Validate captured photo dimensions
-          if (!photo.width || !photo.height || photo.width === 0 || photo.height === 0) {
-            throw new Error("Invalid photo dimensions received from camera");
-          }
-
-          const capturedAspectRatio = photo.width / photo.height;
-          console.log("✅ Photo captured with maximum quality:", {
-            uri: photo.uri,
-            width: photo.width,
-            height: photo.height,
-            aspectRatio: capturedAspectRatio.toFixed(3),
-            expectedRatio: "~1.33 (4:3) or ~1.78 (16:9)",
-            exif: photo.exif ? "present" : "missing",
-            fileSize: photo.uri ? "available" : "unknown"
-          });
-
-          // ✅ CRITICAL FIX: Use the same green frame coordinates that are used for rendering
-          // Fallback to recalculation if, for some reason, state is not yet set
-          const greenFrameCoords = greenFrame || calculateGreenFrameCoordinates();
-
-          if (!greenFrameCoords) {
-            throw new Error("Green frame coordinates not available");
-          }
-
-          // ✅ Send photo URI and frame data to ImageCropper
-          // The photo maintains its native resolution and aspect ratio
-          // ImageCropper will handle display and cropping while preserving quality
-          onPhotoCaptured(photo.uri, {
-            greenFrame: greenFrameCoords,
-            capturedImageSize: {
-              width: photo.width,
-              height: photo.height,
-              aspectRatio: capturedAspectRatio
-            }
-          });
-
-          setLoadingBeforeCapture(false);
-      } catch (error) {
-        console.error("❌ Error capturing photo:", error);
-        setLoadingBeforeCapture(false);
-        Alert.alert(
-          "Erreur",
-          `Impossible de capturer la photo: ${error.message || "Erreur inconnue"}. Veuillez réessayer.`
-        );
-      }
-    }
-  };
-
-
-  return (
-    <SafeAreaView style={styles.outerContainer}>
-      <View
-        style={styles.cameraWrapper}
-        ref={cameraWrapperRef}
-        onLayout={(e) => {
-          const layout = e.nativeEvent.layout;
-          setCameraWrapperLayout({
-            width: layout.width,
-            height: layout.height,
-            x: layout.x,
-            y: layout.y
-          });
-          console.log("Camera wrapper layout updated:", layout);
-        }}
-      >
-        <CameraView
-          style={styles.camera}
-          facing="back"
-          ref={cameraRef}
-          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 */}
-        {loadingBeforeCapture && (
-          <>
-            <View style={styles.loadingOverlay}>
-              <Image
-                source={require('../src/assets/loadingCamera.gif')}
-                style={styles.loadingGif}
-                resizeMode="contain"
-              />
-            </View>
-            <View style={styles.touchBlocker} pointerEvents="auto" />
-          </>
-        )}
-
-        {/* Cadre de scan - rendered using calculated coordinates (x, y, width, height) */}
-        {greenFrame && (
-          <View
-            style={[
-              styles.scanFrame,
-              {
-                left: greenFrame.x,
-                top: greenFrame.y,
-                width: greenFrame.width,
-                height: greenFrame.height,
-              },
-            ]}
-          />
-        )}
-      </View>
-
-      <View style={[styles.buttonContainer, { bottom: (insets?.bottom || 0) + 16, marginBottom: 0 }]}>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={takePicture}
-          disabled={!isReady || loadingBeforeCapture}
-        />
-      </View>
-    </SafeAreaView>
-  );
-}
-
-const PRIMARY_GREEN = '#198754';
-const DEEP_BLACK = '#0B0B0B';
-const GLOW_WHITE = 'rgba(255, 255, 255, 0.85)';
-
-const styles = StyleSheet.create({
-  outerContainer: {
-    flex: 1,
-    backgroundColor: DEEP_BLACK,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  cameraWrapper: {
-    width: width,
-    aspectRatio: 9 / 16,
-    borderRadius: 30,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative',
-  },
-  camera: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  scanFrame: {
-    position: 'absolute',
-    borderWidth: 4,
-    borderColor: PRIMARY_GREEN,
-    borderRadius: 5,
-    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-  },
-  loadingOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    zIndex: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  loadingGif: {
-    width: 100,
-    height: 100,
-  },
-  touchBlocker: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 21,
-    backgroundColor: 'transparent',
-  },
-  cancelIcon: {
-    position: 'absolute',
-    top: 20,
-    left: 20,
-    backgroundColor: PRIMARY_GREEN,
-    borderRadius: 5,
-    padding: 8,
-  },
-  buttonContainer: {
-    position: 'absolute',
-    bottom: 0,
-    marginBottom: 20,
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  button: {
-    width: 80,
-    height: 80,
-    borderRadius: 50,
-    backgroundColor: GLOW_WHITE,
-    borderWidth: 5,
-    borderColor: PRIMARY_GREEN,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 18,
-    color: GLOW_WHITE,
-  },
-  container: {
-    flex: 1,
-    backgroundColor: DEEP_BLACK,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 20,
-  },
-  iconText: {
-    fontSize: 18,
-    color: GLOW_WHITE,
-    fontWeight: '600',
-  },
-});
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  Alert,
+  SafeAreaView,
+  Image,
+  Platform,
+  useWindowDimensions,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Camera, CameraView } from 'expo-camera';
+
+// Max width for camera preview on large screens (tablets) so it doesn't stretch full width
+const CAMERA_PREVIEW_MAX_WIDTH = 500;
+
+export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
+  const { width: windowWidth } = useWindowDimensions();
+  const cameraPreviewWidth = Math.min(windowWidth, CAMERA_PREVIEW_MAX_WIDTH);
+  const [isReady, setIsReady] = useState(false);
+  const [loadingBeforeCapture, setLoadingBeforeCapture] = useState(false);
+  const [hasPermission, setHasPermission] = useState(null);
+  const cameraRef = useRef(null);
+  const cameraWrapperRef = useRef(null);
+  const insets = useSafeAreaInsets();
+  const [cameraWrapperLayout, setCameraWrapperLayout] = useState({ width: 0, height: 0, x: 0, y: 0 });
+  const [greenFrame, setGreenFrame] = useState(null);
+
+  useEffect(() => {
+    (async () => {
+      const { status } = await Camera.requestCameraPermissionsAsync();
+      setHasPermission(status === 'granted');
+    })();
+  }, []);
+
+  // Helper function to wait for multiple render cycles (works on iOS)
+  const waitForRender = (cycles = 5) => {
+    return new Promise((resolve) => {
+      let count = 0;
+      const tick = () => {
+        count++;
+        if (count >= cycles) {
+          resolve();
+        } else {
+          setImmediate(tick);
+        }
+      };
+      setImmediate(tick);
+    });
+  };
+
+
+
+  // ✅ CRITICAL FIX: Calculate green frame coordinates relative to camera preview
+  // The green frame should be calculated on the wrapper (as it's visually drawn there)
+  // But we store it with wrapper dimensions so ImageCropper can map it correctly
+  //
+  // NOTE: Camera capture aspect ratio (typically 4:3) may differ from wrapper aspect ratio (9:16)
+  // This is handled in ImageCropper by using "cover" mode to match preview content
+  const calculateGreenFrameCoordinates = () => {
+    const wrapperWidth = cameraWrapperLayout.width;
+    const wrapperHeight = cameraWrapperLayout.height;
+
+    if (wrapperWidth === 0 || wrapperHeight === 0) {
+      console.warn("Camera wrapper layout not ready, cannot calculate green frame");
+      return null;
+    }
+
+    // ✅ Calculate green frame as percentage of WRAPPER
+    const frameWidth = wrapperWidth * 0.85;   // 85% of wrapper width
+    const frameHeight = wrapperHeight * 0.70; // 70% of wrapper height
+    const frameX = (wrapperWidth - frameWidth) / 2;  // Centered horizontally
+    const frameY = (wrapperHeight - frameHeight) / 2; // Centered vertically
+
+    const frameCoords = {
+      x: frameX,
+      y: frameY,
+      width: frameWidth,
+      height: frameHeight,
+      wrapperWidth,
+      wrapperHeight,
+      // ✅ Store percentages for easier mapping later
+      percentX: (frameX / wrapperWidth) * 100,
+      percentY: (frameY / wrapperHeight) * 100,
+      percentWidth: 85,  // 85% of wrapper width
+      percentHeight: 70  // 70% of wrapper height
+    };
+
+    console.log("✅ Green frame coordinates calculated:", frameCoords);
+    return frameCoords;
+  };
+
+  // 🔁 Keep green frame state in sync with wrapper layout so we can both render it
+  // and send the exact same coordinates along with the captured photo.
+  useEffect(() => {
+    const coords = calculateGreenFrameCoordinates();
+    if (coords) {
+      setGreenFrame(coords);
+    }
+  }, [cameraWrapperLayout]);
+
+  const takePicture = async () => {
+    if (cameraRef.current) {
+      try {
+          // Show loading after a delay (using setImmediate for iOS compatibility)
+          waitForRender(5).then(() => {
+            setLoadingBeforeCapture(true);
+          });
+
+        // Wait a bit before taking picture (works on iOS)
+        await waitForRender(2);
+
+          // ✅ 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,
+
+            // ✅ CRITICAL: skipProcessing preserves original resolution and avoids interpolation
+            // This ensures pixel-perfect quality and prevents premature resizing
+            skipProcessing: true,
+
+            // Include EXIF metadata (orientation, camera settings, etc.)
+            exif: true,
+
+            // ✅ Platform-specific optimizations
+            ...(Platform.OS === 'ios' && {
+              // iOS: Use native capture format (typically 4:3 or 16:9 depending on device)
+              // No additional processing to preserve quality
+            }),
+            ...(Platform.OS === 'android' && {
+              // Android: Ensure maximum resolution capture
+              // skipProcessing already handles this, but we can add Android-specific options if needed
+            }),
+          };
+
+          console.log("📸 Capturing photo with maximum quality settings:", {
+            platform: Platform.OS,
+            options: captureOptions,
+            wrapperSize: { width: cameraWrapperLayout.width, height: cameraWrapperLayout.height }
+          });
+
+          const photo = await cameraRef.current.takePictureAsync(captureOptions);
+
+          // ✅ Validate captured photo dimensions
+          if (!photo.width || !photo.height || photo.width === 0 || photo.height === 0) {
+            throw new Error("Invalid photo dimensions received from camera");
+          }
+
+          const capturedAspectRatio = photo.width / photo.height;
+          console.log("✅ Photo captured with maximum quality:", {
+            uri: photo.uri,
+            width: photo.width,
+            height: photo.height,
+            aspectRatio: capturedAspectRatio.toFixed(3),
+            expectedRatio: "~1.33 (4:3) or ~1.78 (16:9)",
+            exif: photo.exif ? "present" : "missing",
+            fileSize: photo.uri ? "available" : "unknown"
+          });
+
+          // ✅ CRITICAL FIX: Use the same green frame coordinates that are used for rendering
+          // Fallback to recalculation if, for some reason, state is not yet set
+          const greenFrameCoords = greenFrame || calculateGreenFrameCoordinates();
+
+          if (!greenFrameCoords) {
+            throw new Error("Green frame coordinates not available");
+          }
+
+          // ✅ Send photo URI and frame data to ImageCropper
+          // The photo maintains its native resolution and aspect ratio
+          // ImageCropper will handle display and cropping while preserving quality
+          onPhotoCaptured(photo.uri, {
+            greenFrame: greenFrameCoords,
+            capturedImageSize: {
+              width: photo.width,
+              height: photo.height,
+              aspectRatio: capturedAspectRatio
+            }
+          });
+
+          setLoadingBeforeCapture(false);
+      } catch (error) {
+        console.error("❌ Error capturing photo:", error);
+        setLoadingBeforeCapture(false);
+        Alert.alert(
+          "Erreur",
+          `Impossible de capturer la photo: ${error.message || "Erreur inconnue"}. Veuillez réessayer.`
+        );
+      }
+    }
+  };
+
+
+  return (
+    <SafeAreaView style={styles.outerContainer}>
+      <View
+        style={[styles.cameraWrapper, { width: cameraPreviewWidth }]}
+        ref={cameraWrapperRef}
+        onLayout={(e) => {
+          const layout = e.nativeEvent.layout;
+          setCameraWrapperLayout({
+            width: layout.width,
+            height: layout.height,
+            x: layout.x,
+            y: layout.y
+          });
+          console.log("Camera wrapper layout updated:", layout);
+        }}
+      >
+        <CameraView
+          style={styles.camera}
+          facing="back"
+          ref={cameraRef}
+          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 */}
+        {loadingBeforeCapture && (
+          <>
+            <View style={styles.loadingOverlay}>
+              <Image
+                source={require('../src/assets/loadingCamera.gif')}
+                style={styles.loadingGif}
+                resizeMode="contain"
+              />
+            </View>
+            <View style={styles.touchBlocker} pointerEvents="auto" />
+          </>
+        )}
+
+        {/* Cadre de scan - rendered using calculated coordinates (x, y, width, height) */}
+        {greenFrame && (
+          <View
+            style={[
+              styles.scanFrame,
+              {
+                left: greenFrame.x,
+                top: greenFrame.y,
+                width: greenFrame.width,
+                height: greenFrame.height,
+              },
+            ]}
+          />
+        )}
+      </View>
+
+      <View style={[styles.buttonContainer, { bottom: (insets?.bottom || 0) + 16, marginBottom: 0 }]}>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={takePicture}
+          disabled={!isReady || loadingBeforeCapture}
+        />
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const PRIMARY_GREEN = '#198754';
+const DEEP_BLACK = '#0B0B0B';
+const GLOW_WHITE = 'rgba(255, 255, 255, 0.85)';
+
+const styles = StyleSheet.create({
+  outerContainer: {
+    flex: 1,
+    backgroundColor: DEEP_BLACK,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cameraWrapper: {
+    aspectRatio: 9 / 16,
+    borderRadius: 30,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  camera: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  scanFrame: {
+    position: 'absolute',
+    borderWidth: 4,
+    borderColor: PRIMARY_GREEN,
+    borderRadius: 5,
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+  },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    zIndex: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingGif: {
+    width: 100,
+    height: 100,
+  },
+  touchBlocker: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 21,
+    backgroundColor: 'transparent',
+  },
+  cancelIcon: {
+    position: 'absolute',
+    top: 20,
+    left: 20,
+    backgroundColor: PRIMARY_GREEN,
+    borderRadius: 5,
+    padding: 8,
+  },
+  buttonContainer: {
+    position: 'absolute',
+    bottom: 0,
+    marginBottom: 20,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  button: {
+    width: 80,
+    height: 80,
+    borderRadius: 50,
+    backgroundColor: GLOW_WHITE,
+    borderWidth: 5,
+    borderColor: PRIMARY_GREEN,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 18,
+    color: GLOW_WHITE,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: DEEP_BLACK,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  iconText: {
+    fontSize: 18,
+    color: GLOW_WHITE,
+    fontWeight: '600',
+  },
+});