react-native-expo-cropper 1.2.39 → 1.2.40

package/dist/CustomCamera.js

@@ -8,7 +8,7 @@ exports["default"] = CustomCamera;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-var _expoCamera = require("expo-camera");
+var _reactNativeVisionCamera = require("react-native-vision-camera");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -38,44 +38,31 @@ function CustomCamera(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     loadingBeforeCapture = _useState4[0],
     setLoadingBeforeCapture = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hasPermission = _useState6[0],
-    setHasPermission = _useState6[1];
   var cameraRef = (0, _react.useRef)(null);
   var cameraWrapperRef = (0, _react.useRef)(null);
   var insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  var _useState7 = (0, _react.useState)({
+  var _useState5 = (0, _react.useState)({
       width: 0,
       height: 0,
       x: 0,
       y: 0
     }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    cameraWrapperLayout = _useState6[0],
+    setCameraWrapperLayout = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    cameraWrapperLayout = _useState8[0],
-    setCameraWrapperLayout = _useState8[1];
-  var _useState9 = (0, _react.useState)(null),
-    _useState0 = _slicedToArray(_useState9, 2),
-    greenFrame = _useState0[0],
-    setGreenFrame = _useState0[1];
+    greenFrame = _useState8[0],
+    setGreenFrame = _useState8[1];
+  var _useCameraPermission = (0, _reactNativeVisionCamera.useCameraPermission)(),
+    hasPermission = _useCameraPermission.hasPermission,
+    requestPermission = _useCameraPermission.requestPermission;
+  var device = (0, _reactNativeVisionCamera.useCameraDevice)('back');
   (0, _react.useEffect)(function () {
-    _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-      var _yield$Camera$request, status;
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.n) {
-          case 0:
-            _context.n = 1;
-            return _expoCamera.Camera.requestCameraPermissionsAsync();
-          case 1:
-            _yield$Camera$request = _context.v;
-            status = _yield$Camera$request.status;
-            setHasPermission(status === 'granted');
-          case 2:
-            return _context.a(2);
-        }
-      }, _callee);
-    }))();
-  }, []);
+    if (!hasPermission) {
+      requestPermission();
+    }
+  }, [hasPermission, requestPermission]);
 
   // Helper function to wait for multiple render cycles (works on iOS)
   var waitForRender = function waitForRender() {
@@ -94,26 +81,19 @@ function CustomCamera(_ref) {
     });
   };
 
-  // ✅ CRITICAL FIX: Calculate green frame coordinates relative to camera preview
-  // The green frame should be calculated on the wrapper (as it's visually drawn there)
-  // But we store it with wrapper dimensions so ImageCropper can map it correctly
-  // 
-  // NOTE: Camera capture aspect ratio (typically 4:3) may differ from wrapper aspect ratio (9:16)
-  // This is handled in ImageCropper by using "cover" mode to match preview content
+  // Green frame coordinates relative to camera preview wrapper.
+  // Preview matches sensor output (VisionCamera) so framing matches capture.
   var calculateGreenFrameCoordinates = function calculateGreenFrameCoordinates() {
     var wrapperWidth = cameraWrapperLayout.width;
     var 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
-    var frameWidth = wrapperWidth * 0.85; // 85% of wrapper width
-    var frameHeight = wrapperHeight * 0.70; // 70% of wrapper height
-    var frameX = (wrapperWidth - frameWidth) / 2; // Centered horizontally
-    var frameY = (wrapperHeight - frameHeight) / 2; // Centered vertically
-
+    var frameWidth = wrapperWidth * 0.85;
+    var frameHeight = wrapperHeight * 0.7;
+    var frameX = (wrapperWidth - frameWidth) / 2;
+    var frameY = (wrapperHeight - frameHeight) / 2;
     var frameCoords = {
       x: frameX,
       y: frameY,
@@ -121,19 +101,14 @@ function CustomCamera(_ref) {
       height: frameHeight,
       wrapperWidth: wrapperWidth,
       wrapperHeight: 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
+      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.
   (0, _react.useEffect)(function () {
     var coords = calculateGreenFrameCoordinates();
     if (coords) {
@@ -141,86 +116,53 @@ function CustomCamera(_ref) {
     }
   }, [cameraWrapperLayout]);
   var takePicture = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-      var captureOptions, photo, capturedAspectRatio, greenFrameCoords, _t;
-      return _regenerator().w(function (_context2) {
-        while (1) switch (_context2.p = _context2.n) {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var photo, uri, capturedAspectRatio, greenFrameCoords, _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
           case 0:
-            if (!cameraRef.current) {
-              _context2.n = 7;
+            if (!(!cameraRef.current || !device)) {
+              _context.n = 1;
               break;
             }
-            _context2.p = 1;
-            // Show loading after a delay (using setImmediate for iOS compatibility)
+            return _context.a(2);
+          case 1:
+            _context.p = 1;
             waitForRender(5).then(function () {
               setLoadingBeforeCapture(true);
             });
-
-            // Wait a bit before taking picture (works on iOS)
-            _context2.n = 2;
+            _context.n = 2;
             return waitForRender(2);
           case 2:
-            // ✅ OPTIMIZED: Capture with maximum quality and native camera ratio
-            // Platform-specific optimizations for best quality
-            captureOptions = _objectSpread(_objectSpread({
-              // Maximum quality (0-1, 1 = best quality, no compression)
-              quality: 1,
-              // 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
-            }, _reactNative.Platform.OS === 'ios' && {
-              // iOS: Use native capture format (typically 4:3 or 16:9 depending on device)
-              // No additional processing to preserve quality
-            }), _reactNative.Platform.OS === 'android' && {
-              // Android: Ensure maximum resolution capture
-              // skipProcessing already handles this, but we can add Android-specific options if needed
-            });
-            console.log("📸 Capturing photo with maximum quality settings:", {
-              platform: _reactNative.Platform.OS,
-              options: captureOptions,
-              wrapperSize: {
-                width: cameraWrapperLayout.width,
-                height: cameraWrapperLayout.height
-              }
+            _context.n = 3;
+            return cameraRef.current.takePhoto({
+              enableShutterSound: false,
+              flash: 'off'
             });
-            _context2.n = 3;
-            return cameraRef.current.takePictureAsync(captureOptions);
           case 3:
-            photo = _context2.v;
-            if (!(!photo.width || !photo.height || photo.width === 0 || photo.height === 0)) {
-              _context2.n = 4;
+            photo = _context.v;
+            if (!(!photo.path || !photo.width || !photo.height)) {
+              _context.n = 4;
               break;
             }
-            throw new Error("Invalid photo dimensions received from camera");
+            throw new Error('Invalid photo received from camera');
           case 4:
+            uri = photo.path.startsWith('file://') ? photo.path : "file://".concat(photo.path);
             capturedAspectRatio = photo.width / photo.height;
-            console.log("✅ Photo captured with maximum quality:", {
-              uri: photo.uri,
+            console.log('Photo captured (VisionCamera):', {
+              uri: 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"
+              aspectRatio: capturedAspectRatio.toFixed(3)
             });
-
-            // ✅ CRITICAL FIX: Use the same green frame coordinates that are used for rendering
-            // Fallback to recalculation if, for some reason, state is not yet set
             greenFrameCoords = greenFrame || calculateGreenFrameCoordinates();
             if (greenFrameCoords) {
-              _context2.n = 5;
+              _context.n = 5;
               break;
             }
-            throw new Error("Green frame coordinates not available");
+            throw new Error('Green frame coordinates not available');
           case 5:
-            // ✅ Send photo URI and frame data to ImageCropper
-            // The photo maintains its native resolution and aspect ratio
-            // ImageCropper will handle display and cropping while preserving quality
-            onPhotoCaptured(photo.uri, {
+            onPhotoCaptured(uri, {
               greenFrame: greenFrameCoords,
               capturedImageSize: {
                 width: photo.width,
@@ -229,23 +171,46 @@ function CustomCamera(_ref) {
               }
             });
             setLoadingBeforeCapture(false);
-            _context2.n = 7;
+            _context.n = 7;
             break;
           case 6:
-            _context2.p = 6;
-            _t = _context2.v;
-            console.error("❌ Error capturing photo:", _t);
+            _context.p = 6;
+            _t = _context.v;
+            console.error('Error capturing photo:', _t);
             setLoadingBeforeCapture(false);
-            _reactNative.Alert.alert("Erreur", "Impossible de capturer la photo: ".concat(_t.message || "Erreur inconnue", ". Veuillez r\xE9essayer."));
+            _reactNative.Alert.alert('Erreur', "Impossible de capturer la photo: ".concat(_t.message || 'Erreur inconnue', ". Veuillez r\xE9essayer."));
           case 7:
-            return _context2.a(2);
+            return _context.a(2);
         }
-      }, _callee2, null, [[1, 6]]);
+      }, _callee, null, [[1, 6]]);
     }));
     return function takePicture() {
-      return _ref3.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
+  if (!hasPermission) {
+    return /*#__PURE__*/_react["default"].createElement(_reactNative.SafeAreaView, {
+      style: styles.outerContainer
+    }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+      style: styles.permissionContainer
+    }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+      style: styles.text
+    }, "Acc\xE8s \xE0 la cam\xE9ra requis pour prendre des photos."), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
+      style: styles.button,
+      onPress: requestPermission
+    }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+      style: styles.buttonText
+    }, "Autoriser la cam\xE9ra"))));
+  }
+  if (!device) {
+    return /*#__PURE__*/_react["default"].createElement(_reactNative.SafeAreaView, {
+      style: styles.outerContainer
+    }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+      style: styles.permissionContainer
+    }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+      style: styles.text
+    }, "Aucune cam\xE9ra arri\xE8re disponible.")));
+  }
   return /*#__PURE__*/_react["default"].createElement(_reactNative.SafeAreaView, {
     style: styles.outerContainer
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
@@ -259,19 +224,18 @@ function CustomCamera(_ref) {
         x: layout.x,
         y: layout.y
       });
-      console.log("Camera wrapper layout updated:", layout);
+      console.log('Camera wrapper layout updated:', layout);
     }
-  }, /*#__PURE__*/_react["default"].createElement(_expoCamera.CameraView, {
-    style: styles.camera,
-    facing: "back",
+  }, /*#__PURE__*/_react["default"].createElement(_reactNativeVisionCamera.Camera, {
     ref: cameraRef,
-    onCameraReady: function onCameraReady() {
+    style: _reactNative.StyleSheet.absoluteFill,
+    device: device,
+    isActive: true,
+    photo: true,
+    onInitialized: function onInitialized() {
       setIsReady(true);
-      console.log("✅ Camera ready - Maximum quality capture enabled");
+      console.log('VisionCamera ready - preview matches capture');
     }
-    // ✅ Ensure camera uses native aspect ratio (typically 4:3 for most devices)
-    // The wrapper constrains the view, but capture uses full sensor resolution
-    // This ensures preview matches what will be captured
   }), loadingBeforeCapture && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: styles.loadingOverlay
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Image, {
@@ -318,7 +282,6 @@ var styles = _reactNative.StyleSheet.create({
     justifyContent: 'center',
     position: 'relative'
   },
-  camera: _objectSpread({}, _reactNative.StyleSheet.absoluteFillObject),
   scanFrame: {
     position: 'absolute',
     borderWidth: 4,
@@ -340,14 +303,6 @@ var styles = _reactNative.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,
@@ -369,16 +324,15 @@ var styles = _reactNative.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'
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-expo-cropper",
-  "version": "1.2.39",
+  "version": "1.2.40",
   "description": "Recadrage polygonal d'images.",
   "main": "index.js",
   "author": "PCS AGRI",
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.2",
+    "@react-native-masked-view/masked-view": "^0.3.1",
     "expo": "54.0.0",
     "expo-camera": "~17.0.8",
     "expo-image-manipulator": "~14.0.7",
@@ -29,7 +30,7 @@
     "expo-screen-orientation": "~9.0.7",
     "react-native-svg": "15.12.1",
     "react-native-view-shot": "4.0.3",
-    "@react-native-masked-view/masked-view": "^0.3.1"
+    "react-native-vision-camera": "^4.7.3"
   },
   "overrides": {
     "glob": "^10.5.0"
@@ -45,10 +46,10 @@
     "url": "https://github.com/pcsagri/react-native-expo-cropper/issues"
   },
   "homepage": "https://github.com/pcsagri/react-native-expo-cropper#readme",
- "scripts": {
-  "test": "echo \"Error: no test specified\" && exit 1",
-  "build": "npx --package=@babel/cli babel src --out-dir dist"
-},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npx --package=@babel/cli babel src --out-dir dist"
+  },
   "devDependencies": {
     "@babel/cli": "^7.28.3",
     "@babel/core": "^7.28.5",

package/src/CustomCamera.js

@@ -11,25 +11,36 @@ import {
   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) => {
@@ -47,29 +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
-  // 
-  // 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
+  // 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,
@@ -77,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) {
@@ -98,103 +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);
-  
-          // ✅ 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
-            }),
-          };
+    if (!cameraRef.current || !device) return;
+    try {
+      waitForRender(5).then(() => {
+        setLoadingBeforeCapture(true);
+      });
+      await waitForRender(2);
 
-          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.takePhoto({
+        enableShutterSound: false,
+        flash: 'off',
+      });
 
-          const photo = await cameraRef.current.takePictureAsync(captureOptions);
+      if (!photo.path || !photo.width || !photo.height) {
+        throw new Error('Invalid photo received from camera');
+      }
 
-          // ✅ 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 uri =
+        photo.path.startsWith('file://') ? photo.path : `file://${photo.path}`;
+      const capturedAspectRatio = photo.width / photo.height;
 
-          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"
-          });
+      console.log('Photo captured (VisionCamera):', {
+        uri,
+        width: photo.width,
+        height: photo.height,
+        aspectRatio: capturedAspectRatio.toFixed(3),
+      });
 
-          // ✅ 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.`
-        );
+      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) => {
@@ -203,25 +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={() => {
+          style={StyleSheet.absoluteFill}
+          device={device}
+          isActive={true}
+          photo={true}
+          onInitialized={() => {
             setIsReady(true);
-            console.log("✅ Camera ready - Maximum quality capture enabled");
+            console.log('VisionCamera ready - preview matches capture');
           }}
-          // ✅ 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}>
@@ -235,7 +219,6 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
           </>
         )}
 
-        {/* Cadre de scan - rendered using calculated coordinates (x, y, width, height) */}
         {greenFrame && (
           <View
             style={[
@@ -251,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}
@@ -282,9 +270,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     position: 'relative',
   },
-  camera: {
-    ...StyleSheet.absoluteFillObject,
-  },
   scanFrame: {
     position: 'absolute',
     borderWidth: 4,
@@ -308,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,
@@ -337,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',
   },
-});
+});