react-native-expo-cropper 1.2.38 → 1.2.40

package/src/CustomCamera.js

@@ -8,27 +8,39 @@ import {
   SafeAreaView,
   Dimensions,
   Image,
+  Platform,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Camera, CameraView } from 'expo-camera';
+import {
+  Camera,
+  useCameraDevice,
+  useCameraPermission,
+} from 'react-native-vision-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 [cameraWrapperLayout, setCameraWrapperLayout] = useState({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+  });
   const [greenFrame, setGreenFrame] = useState(null);
 
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const device = useCameraDevice('back');
+
   useEffect(() => {
-    (async () => {
-      const { status } = await Camera.requestCameraPermissionsAsync();
-      setHasPermission(status === 'granted');
-    })();
-  }, []);
+    if (!hasPermission) {
+      requestPermission();
+    }
+  }, [hasPermission, requestPermission]);
 
   // Helper function to wait for multiple render cycles (works on iOS)
   const waitForRender = (cycles = 5) => {
@@ -46,26 +58,24 @@ 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
+  // Green frame coordinates relative to camera preview wrapper.
+  // Preview matches sensor output (VisionCamera) so framing matches capture.
   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");
+      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 frameWidth = wrapperWidth * 0.85;
+    const frameHeight = wrapperHeight * 0.7;
+    const frameX = (wrapperWidth - frameWidth) / 2;
+    const frameY = (wrapperHeight - frameHeight) / 2;
+
     const frameCoords = {
       x: frameX,
       y: frameY,
@@ -73,19 +83,16 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
       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
+      percentWidth: 85,
+      percentHeight: 70,
     };
-    
-    console.log("✅ Green frame coordinates calculated:", frameCoords);
+
+    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) {
@@ -94,63 +101,86 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
   }, [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);
-  
-          // ✅ 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é)
-            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
-            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
-            exif: true,
-          });
+    if (!cameraRef.current || !device) return;
+    try {
+      waitForRender(5).then(() => {
+        setLoadingBeforeCapture(true);
+      });
+      await waitForRender(2);
 
-          console.log("Photo captured with maximum quality:", {
-            uri: photo.uri,
-            width: photo.width,
-            height: photo.height,
-            exif: photo.exif ? "present" : "missing"
-          });
+      const photo = await cameraRef.current.takePhoto({
+        enableShutterSound: false,
+        flash: 'off',
+      });
 
-          // ✅ 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;
-  
-          // Envoyer l'URI et les coordonnées du green frame à ImageCropper
-          onPhotoCaptured(fixedUri, {
-            greenFrame: greenFrameCoords,
-            capturedImageSize: { width: photo.width, height: photo.height }
-          });
-          setLoadingBeforeCapture(false);
-      } catch (error) {
-        console.error("Error capturing photo:", error);
-        setLoadingBeforeCapture(false);
-        Alert.alert("Erreur", "Impossible de capturer la photo. Veuillez réessayer.");
+      if (!photo.path || !photo.width || !photo.height) {
+        throw new Error('Invalid photo received from camera');
       }
+
+      const uri =
+        photo.path.startsWith('file://') ? photo.path : `file://${photo.path}`;
+      const capturedAspectRatio = photo.width / photo.height;
+
+      console.log('Photo captured (VisionCamera):', {
+        uri,
+        width: photo.width,
+        height: photo.height,
+        aspectRatio: capturedAspectRatio.toFixed(3),
+      });
+
+      const greenFrameCoords = greenFrame || calculateGreenFrameCoordinates();
+      if (!greenFrameCoords) {
+        throw new Error('Green frame coordinates not available');
+      }
+
+      onPhotoCaptured(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.`
+      );
     }
   };
-  
+
+  if (!hasPermission) {
+    return (
+      <SafeAreaView style={styles.outerContainer}>
+        <View style={styles.permissionContainer}>
+          <Text style={styles.text}>
+            Accès à la caméra requis pour prendre des photos.
+          </Text>
+          <TouchableOpacity style={styles.button} onPress={requestPermission}>
+            <Text style={styles.buttonText}>Autoriser la caméra</Text>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  if (!device) {
+    return (
+      <SafeAreaView style={styles.outerContainer}>
+        <View style={styles.permissionContainer}>
+          <Text style={styles.text}>Aucune caméra arrière disponible.</Text>
+        </View>
+      </SafeAreaView>
+    );
+  }
 
   return (
     <SafeAreaView style={styles.outerContainer}>
-      <View 
+      <View
         style={styles.cameraWrapper}
         ref={cameraWrapperRef}
         onLayout={(e) => {
@@ -159,19 +189,23 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
             width: layout.width,
             height: layout.height,
             x: layout.x,
-            y: layout.y
+            y: layout.y,
           });
-          console.log("Camera wrapper layout updated:", layout);
+          console.log('Camera wrapper layout updated:', layout);
         }}
       >
-        <CameraView
-          style={styles.camera}
-          facing="back"
+        <Camera
           ref={cameraRef}
-          onCameraReady={() => setIsReady(true)}
+          style={StyleSheet.absoluteFill}
+          device={device}
+          isActive={true}
+          photo={true}
+          onInitialized={() => {
+            setIsReady(true);
+            console.log('VisionCamera ready - preview matches capture');
+          }}
         />
 
-        {/* Loading overlay */}
         {loadingBeforeCapture && (
           <>
             <View style={styles.loadingOverlay}>
@@ -185,7 +219,6 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
           </>
         )}
 
-        {/* Cadre de scan - rendered using calculated coordinates (x, y, width, height) */}
         {greenFrame && (
           <View
             style={[
@@ -201,7 +234,12 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
         )}
       </View>
 
-      <View style={[styles.buttonContainer, { bottom: (insets?.bottom || 0) + 16, marginBottom: 0 }]}>
+      <View
+        style={[
+          styles.buttonContainer,
+          { bottom: (insets?.bottom || 0) + 16, marginBottom: 0 },
+        ]}
+      >
         <TouchableOpacity
           style={styles.button}
           onPress={takePicture}
@@ -232,9 +270,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     position: 'relative',
   },
-  camera: {
-    ...StyleSheet.absoluteFillObject,
-  },
   scanFrame: {
     position: 'absolute',
     borderWidth: 4,
@@ -258,14 +293,6 @@ const styles = StyleSheet.create({
     zIndex: 21,
     backgroundColor: 'transparent',
   },
-  cancelIcon: {
-    position: 'absolute',
-    top: 20,
-    left: 20,
-    backgroundColor: PRIMARY_GREEN,
-    borderRadius: 5,
-    padding: 8,
-  },
   buttonContainer: {
     position: 'absolute',
     bottom: 0,
@@ -287,16 +314,15 @@ const styles = StyleSheet.create({
     fontSize: 18,
     color: GLOW_WHITE,
   },
-  container: {
+  permissionContainer: {
     flex: 1,
-    backgroundColor: DEEP_BLACK,
     justifyContent: 'center',
     alignItems: 'center',
     padding: 20,
   },
-  iconText: {
-    fontSize: 18,
-    color: GLOW_WHITE,
+  buttonText: {
+    fontSize: 16,
+    color: DEEP_BLACK,
     fontWeight: '600',
   },
-});
+});