react-native-expo-cropper 1.2.47 → 1.2.48

package/README.MD

@@ -32,6 +32,25 @@ EXPO SDK 54 -------------------------------------------------------------
   },
 
 
+## ✅ IMPORTANT (APK / production build)
+
+Expo Go already contains native camera modules/permissions. In a **standalone APK** you must ensure the native config is present.
+
+Add this to your `app.json` / `app.config.js` (example):
+
+```json
+{
+  "expo": {
+    "plugins": ["expo-camera", "expo-image-picker", "expo-media-library"],
+    "android": {
+      "permissions": ["CAMERA"]
+    }
+  }
+}
+```
+
+Then rebuild the APK (EAS / prebuild). If the camera crashes only in release, it’s almost always missing permissions/plugin config or a device-specific camera processing issue.
+
 ------------------------------ DO THIS IN YOUR APP SCREEN CODE !!!!!!!!!! :-------------------------------
 
 import ImageCropper from 'react-native-expo-cropper/src/ImageCropper';

package/dist/CustomCamera.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _expoCamera = require("expo-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 _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 _t3 in e) "default" !== _t3 && {}.hasOwnProperty.call(e, _t3) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t3)) && (i.get || i.set) ? o(f, _t3, i) : f[_t3] = e[_t3]); 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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -45,28 +45,22 @@ function CustomCamera(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     hasPermission = _useState6[0],
     setHasPermission = _useState6[1];
-  // Force a fresh native CameraView instance per "open" to avoid stale/cached preview.
-  var _useState7 = (0, _react.useState)(function () {
-      return "".concat(Date.now(), "-").concat(Math.random().toString(16).slice(2));
-    }),
-    _useState8 = _slicedToArray(_useState7, 1),
-    cameraViewMountKey = _useState8[0];
   var cameraRef = (0, _react.useRef)(null);
   var cameraWrapperRef = (0, _react.useRef)(null);
   var insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  var _useState9 = (0, _react.useState)({
+  var _useState7 = (0, _react.useState)({
       width: 0,
       height: 0,
       x: 0,
       y: 0
     }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    cameraWrapperLayout = _useState8[0],
+    setCameraWrapperLayout = _useState8[1];
+  var _useState9 = (0, _react.useState)(null),
     _useState0 = _slicedToArray(_useState9, 2),
-    cameraWrapperLayout = _useState0[0],
-    setCameraWrapperLayout = _useState0[1];
-  var _useState1 = (0, _react.useState)(null),
-    _useState10 = _slicedToArray(_useState1, 2),
-    greenFrame = _useState10[0],
-    setGreenFrame = _useState10[1];
+    greenFrame = _useState0[0],
+    setGreenFrame = _useState0[1];
   (0, _react.useEffect)(function () {
     _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var _yield$Camera$request, status;
@@ -85,6 +79,34 @@ function CustomCamera(_ref) {
       }, _callee);
     }))();
   }, []);
+  var requestPermissionAgain = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+      var _yield$Camera$request2, status, _t;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
+          case 0:
+            _context2.p = 0;
+            _context2.n = 1;
+            return _expoCamera.Camera.requestCameraPermissionsAsync();
+          case 1:
+            _yield$Camera$request2 = _context2.v;
+            status = _yield$Camera$request2.status;
+            setHasPermission(status === 'granted');
+            _context2.n = 3;
+            break;
+          case 2:
+            _context2.p = 2;
+            _t = _context2.v;
+            setHasPermission(false);
+          case 3:
+            return _context2.a(2);
+        }
+      }, _callee2, null, [[0, 2]]);
+    }));
+    return function requestPermissionAgain() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
 
   // Helper function to wait for multiple render cycles (works on iOS)
   var waitForRender = function waitForRender() {
@@ -150,25 +172,32 @@ 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 _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+      var captureOptions, photo, capturedAspectRatio, greenFrameCoords, _t2;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.p = _context3.n) {
           case 0:
+            if (hasPermission) {
+              _context3.n = 1;
+              break;
+            }
+            _reactNative.Alert.alert("Permission requise", "Veuillez autoriser l'accès à la caméra pour prendre une photo.");
+            return _context3.a(2);
+          case 1:
             if (!cameraRef.current) {
-              _context2.n = 7;
+              _context3.n = 8;
               break;
             }
-            _context2.p = 1;
+            _context3.p = 2;
             // Show loading after a delay (using setImmediate for iOS compatibility)
             waitForRender(5).then(function () {
               setLoadingBeforeCapture(true);
             });
 
             // Wait a bit before taking picture (works on iOS)
-            _context2.n = 2;
+            _context3.n = 3;
             return waitForRender(2);
-          case 2:
+          case 3:
             // ✅ OPTIMIZED: Capture with maximum quality and native camera ratio
             // Platform-specific optimizations for best quality
             captureOptions = _objectSpread(_objectSpread({
@@ -178,7 +207,8 @@ function CustomCamera(_ref) {
               shutterSound: false,
               // ✅ CRITICAL: skipProcessing preserves original resolution and avoids interpolation
               // This ensures pixel-perfect quality and prevents premature resizing
-              skipProcessing: true,
+              // NOTE: Some Android devices are unstable with skipProcessing; keep it off there.
+              skipProcessing: _reactNative.Platform.OS === 'ios',
               // Include EXIF metadata (orientation, camera settings, etc.)
               exif: true
             }, _reactNative.Platform.OS === 'ios' && {
@@ -196,16 +226,16 @@ function CustomCamera(_ref) {
                 height: cameraWrapperLayout.height
               }
             });
-            _context2.n = 3;
+            _context3.n = 4;
             return cameraRef.current.takePictureAsync(captureOptions);
-          case 3:
-            photo = _context2.v;
+          case 4:
+            photo = _context3.v;
             if (!(!photo.width || !photo.height || photo.width === 0 || photo.height === 0)) {
-              _context2.n = 4;
+              _context3.n = 5;
               break;
             }
             throw new Error("Invalid photo dimensions received from camera");
-          case 4:
+          case 5:
             capturedAspectRatio = photo.width / photo.height;
             console.log("✅ Photo captured with maximum quality:", {
               uri: photo.uri,
@@ -221,11 +251,11 @@ function CustomCamera(_ref) {
             // Fallback to recalculation if, for some reason, state is not yet set
             greenFrameCoords = greenFrame || calculateGreenFrameCoordinates();
             if (greenFrameCoords) {
-              _context2.n = 5;
+              _context3.n = 6;
               break;
             }
             throw new Error("Green frame coordinates not available");
-          case 5:
+          case 6:
             // ✅ 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
@@ -238,26 +268,42 @@ function CustomCamera(_ref) {
               }
             });
             setLoadingBeforeCapture(false);
-            _context2.n = 7;
+            _context3.n = 8;
             break;
-          case 6:
-            _context2.p = 6;
-            _t = _context2.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."));
           case 7:
-            return _context2.a(2);
+            _context3.p = 7;
+            _t2 = _context3.v;
+            console.error("❌ Error capturing photo:", _t2);
+            setLoadingBeforeCapture(false);
+            _reactNative.Alert.alert("Erreur", "Impossible de capturer la photo: ".concat(_t2.message || "Erreur inconnue", ". Veuillez r\xE9essayer."));
+          case 8:
+            return _context3.a(2);
         }
-      }, _callee2, null, [[1, 6]]);
+      }, _callee3, null, [[2, 7]]);
     }));
     return function takePicture() {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   return /*#__PURE__*/_react["default"].createElement(_reactNative.SafeAreaView, {
     style: styles.outerContainer
-  }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+  }, hasPermission === null && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: styles.permissionContainer
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.ActivityIndicator, {
+    size: "large",
+    color: PRIMARY_GREEN
+  }), /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: styles.permissionText
+  }, "Demande d'autorisation cam\xE9ra...")), hasPermission === false && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: styles.permissionContainer
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: styles.permissionText
+  }, "Autorisation cam\xE9ra refus\xE9e. Activez-la dans les param\xE8tres pour continuer."), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
+    style: styles.permissionButton,
+    onPress: requestPermissionAgain
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: styles.permissionButtonText
+  }, "R\xE9essayer"))), hasPermission === true && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: [styles.cameraWrapper, {
       width: cameraPreviewWidth
     }],
@@ -273,7 +319,6 @@ function CustomCamera(_ref) {
       console.log("Camera wrapper layout updated:", layout);
     }
   }, /*#__PURE__*/_react["default"].createElement(_expoCamera.CameraView, {
-    key: cameraViewMountKey,
     style: styles.camera,
     facing: "back",
     ref: cameraRef,
@@ -286,10 +331,9 @@ function CustomCamera(_ref) {
     // 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, {
-    source: require('../src/assets/loadingCamera.gif'),
-    style: styles.loadingGif,
-    resizeMode: "contain"
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.ActivityIndicator, {
+    size: "large",
+    color: PRIMARY_GREEN
   })), /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: styles.touchBlocker,
     pointerEvents: "auto"
@@ -308,8 +352,8 @@ function CustomCamera(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
     style: styles.button,
     onPress: takePicture,
-    disabled: !isReady || loadingBeforeCapture
-  })));
+    disabled: !isReady || loadingBeforeCapture || !hasPermission
+  }))));
 }
 var PRIMARY_GREEN = '#198754';
 var DEEP_BLACK = '#0B0B0B';
@@ -321,6 +365,30 @@ var styles = _reactNative.StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center'
   },
+  permissionContainer: {
+    flex: 1,
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 24
+  },
+  permissionText: {
+    marginTop: 12,
+    fontSize: 14,
+    color: GLOW_WHITE,
+    textAlign: 'center'
+  },
+  permissionButton: {
+    marginTop: 16,
+    backgroundColor: PRIMARY_GREEN,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 8
+  },
+  permissionButtonText: {
+    color: 'white',
+    fontWeight: '600'
+  },
   cameraWrapper: {
     aspectRatio: 9 / 16,
     borderRadius: 30,
@@ -343,10 +411,6 @@ var styles = _reactNative.StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center'
   }),
-  loadingGif: {
-    width: 100,
-    height: 100
-  },
   touchBlocker: _objectSpread(_objectSpread({}, _reactNative.StyleSheet.absoluteFillObject), {}, {
     zIndex: 21,
     backgroundColor: 'transparent'

package/dist/ImageCropper.js

@@ -49,6 +49,15 @@ var ImageCropper = function ImageCropper(_ref) {
   var _useWindowDimensions = (0, _reactNative.useWindowDimensions)(),
     windowWidth = _useWindowDimensions.width;
   var cameraPreviewWidth = Math.min(windowWidth, CAMERA_PREVIEW_MAX_WIDTH);
+  var guessExtensionFromUri = function guessExtensionFromUri(uri) {
+    if (!uri || typeof uri !== 'string') return null;
+    var match = uri.match(/\.([a-zA-Z0-9]+)(?:[?#].*)?$/);
+    if (!match) return null;
+    var ext = match[1].toLowerCase();
+    // Keep only common image extensions
+    if (['jpg', 'jpeg', 'png', 'webp', 'heic', 'heif'].includes(ext)) return ext;
+    return null;
+  };
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     image = _useState2[0],
@@ -253,7 +262,6 @@ var ImageCropper = function ImageCropper(_ref) {
   var rotationInProgressRef = (0, _react.useRef)(false); // block duplicate taps immediately
   var lastValidPosition = (0, _react.useRef)(null);
   var insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  var openCameraTimeoutRef = (0, _react.useRef)(null);
 
   // ✅ NEW ARCH: mobile does NOT export the final crop.
 
@@ -262,17 +270,8 @@ var ImageCropper = function ImageCropper(_ref) {
   var enableRotation = true; // rotation resets crop box so it is re-initialized on rotated image.
 
   (0, _react.useEffect)(function () {
-    // If a previous open was scheduled, cancel it.
-    if (openCameraTimeoutRef.current) {
-      clearTimeout(openCameraTimeoutRef.current);
-      openCameraTimeoutRef.current = null;
-    }
     if (openCameraFirst) {
-      // Delay opening the camera so the prior session can fully release.
-      openCameraTimeoutRef.current = setTimeout(function () {
-        setShowCustomCamera(true);
-        openCameraTimeoutRef.current = null;
-      }, 800);
+      setShowCustomCamera(true);
     } else if (initialImage) {
       setImage(initialImage);
       sourceImageUri.current = initialImage;
@@ -286,12 +285,6 @@ var ImageCropper = function ImageCropper(_ref) {
       hasInitializedCropBox.current = false;
       imageSource.current = null;
     }
-    return function () {
-      if (openCameraTimeoutRef.current) {
-        clearTimeout(openCameraTimeoutRef.current);
-        openCameraTimeoutRef.current = null;
-      }
-    };
   }, [openCameraFirst, initialImage]);
 
   // ✅ REFACTORISATION : Stocker uniquement les dimensions originales (pas de calcul théorique)
@@ -1494,7 +1487,7 @@ var ImageCropper = function ImageCropper(_ref) {
   }, "Reset")), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
     style: _ImageCropperStyles["default"].button,
     onPress: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-      var _cameraFrameData$curr4, actualImageWidth, actualImageHeight, isCoverMode, captured, layout, contentRect, displayedWidth, displayedHeight, scale, coverOffsetX, coverOffsetY, scaledWidth, scaledHeight, originalUri, cropMeta, imagePoints, minX, minY, maxX, maxY, cropX, cropY, cropEndX, cropEndY, cropWidth, cropHeight, bbox, polygon, name, _t2;
+      var _cameraFrameData$curr4, actualImageWidth, actualImageHeight, isCoverMode, captured, layout, contentRect, displayedWidth, displayedHeight, scale, coverOffsetX, coverOffsetY, scaledWidth, scaledHeight, originalUri, cropMeta, imagePoints, minX, minY, maxX, maxY, cropX, cropY, cropEndX, cropEndY, cropWidth, cropHeight, bbox, polygon, ext, safeExt, name, _t2;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
@@ -1635,7 +1628,9 @@ var ImageCropper = function ImageCropper(_ref) {
                 console.error("Error computing crop meta:", cropError);
               }
             }
-            name = "IMAGE XTK".concat(Date.now());
+            ext = guessExtensionFromUri(originalUri) || 'jpg';
+            safeExt = ext === 'jpeg' ? 'jpg' : ext;
+            name = "IMAGE_XTK_".concat(Date.now(), ".").concat(safeExt);
             if (onConfirm) {
               onConfirm(originalUri, name, cropMeta);
             }
@@ -1688,10 +1683,9 @@ var ImageCropper = function ImageCropper(_ref) {
     animationType: "fade"
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: _ImageCropperStyles["default"].loadingOverlay
-  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Image, {
-    source: require('../src/assets/loadingCamera.gif'),
-    style: _ImageCropperStyles["default"].loadingGif,
-    resizeMode: "contain"
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.ActivityIndicator, {
+    size: "large",
+    color: PRIMARY_GREEN
   }))));
 };
 var _default = exports["default"] = ImageCropper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-expo-cropper",
-  "version": "1.2.47",
+  "version": "1.2.48",
   "description": "Recadrage polygonal d'images.",
   "main": "index.js",
   "author": "PCS AGRI",
@@ -47,7 +47,7 @@
   "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"
+  "build": "node ./node_modules/@babel/cli/bin/babel.js src --out-dir dist"
 },
   "devDependencies": {
     "@babel/cli": "^7.28.3",

package/src/CustomCamera.js

@@ -6,8 +6,8 @@ import {
   TouchableOpacity,
   Alert,
   SafeAreaView,
-  Image,
   Platform,
+  ActivityIndicator,
   useWindowDimensions,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -22,8 +22,6 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
   const [isReady, setIsReady] = useState(false);
   const [loadingBeforeCapture, setLoadingBeforeCapture] = useState(false);
   const [hasPermission, setHasPermission] = useState(null);
-  // Force a fresh native CameraView instance per "open" to avoid stale/cached preview.
-  const [cameraViewMountKey] = useState(() => `${Date.now()}-${Math.random().toString(16).slice(2)}`);
   const cameraRef = useRef(null);
   const cameraWrapperRef = useRef(null);
   const insets = useSafeAreaInsets();
@@ -37,6 +35,15 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
     })();
   }, []);
 
+  const requestPermissionAgain = async () => {
+    try {
+      const { status } = await Camera.requestCameraPermissionsAsync();
+      setHasPermission(status === 'granted');
+    } catch (e) {
+      setHasPermission(false);
+    }
+  };
+
   // Helper function to wait for multiple render cycles (works on iOS)
   const waitForRender = (cycles = 5) => {
     return new Promise((resolve) => {
@@ -104,6 +111,14 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
   }, [cameraWrapperLayout]);
 
   const takePicture = async () => {
+    if (!hasPermission) {
+      Alert.alert(
+        "Permission requise",
+        "Veuillez autoriser l'accès à la caméra pour prendre une photo."
+      );
+      return;
+    }
+
     if (cameraRef.current) {
       try {
           // Show loading after a delay (using setImmediate for iOS compatibility)
@@ -125,7 +140,8 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
 
             // ✅ CRITICAL: skipProcessing preserves original resolution and avoids interpolation
             // This ensures pixel-perfect quality and prevents premature resizing
-            skipProcessing: true,
+            // NOTE: Some Android devices are unstable with skipProcessing; keep it off there.
+            skipProcessing: Platform.OS === 'ios',
 
             // Include EXIF metadata (orientation, camera settings, etc.)
             exif: true,
@@ -200,71 +216,88 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
 
   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
-          key={cameraViewMountKey}
-          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 && (
+      {hasPermission === null && (
+        <View style={styles.permissionContainer}>
+          <ActivityIndicator size="large" color={PRIMARY_GREEN} />
+          <Text style={styles.permissionText}>Demande d'autorisation caméra...</Text>
+        </View>
+      )}
+
+      {hasPermission === false && (
+        <View style={styles.permissionContainer}>
+          <Text style={styles.permissionText}>
+            Autorisation caméra refusée. Activez-la dans les paramètres pour continuer.
+          </Text>
+          <TouchableOpacity style={styles.permissionButton} onPress={requestPermissionAgain}>
+            <Text style={styles.permissionButtonText}>Réessayer</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+
+      {hasPermission === true && (
+        <>
           <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>
+            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}>
+                  <ActivityIndicator size="large" color={PRIMARY_GREEN} />
+                </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 || !hasPermission}
+            />
+          </View>
+        </>
+      )}
     </SafeAreaView>
   );
 }
@@ -280,6 +313,30 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  permissionContainer: {
+    flex: 1,
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 24,
+  },
+  permissionText: {
+    marginTop: 12,
+    fontSize: 14,
+    color: GLOW_WHITE,
+    textAlign: 'center',
+  },
+  permissionButton: {
+    marginTop: 16,
+    backgroundColor: PRIMARY_GREEN,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 8,
+  },
+  permissionButtonText: {
+    color: 'white',
+    fontWeight: '600',
+  },
   cameraWrapper: {
     aspectRatio: 9 / 16,
     borderRadius: 30,
@@ -305,10 +362,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  loadingGif: {
-    width: 100,
-    height: 100,
-  },
   touchBlocker: {
     ...StyleSheet.absoluteFillObject,
     zIndex: 21,

package/src/ImageCropper.js

@@ -17,6 +17,16 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
   const { width: windowWidth } = useWindowDimensions();
   const cameraPreviewWidth = Math.min(windowWidth, CAMERA_PREVIEW_MAX_WIDTH);
 
+  const guessExtensionFromUri = (uri) => {
+    if (!uri || typeof uri !== 'string') return null;
+    const match = uri.match(/\.([a-zA-Z0-9]+)(?:[?#].*)?$/);
+    if (!match) return null;
+    const ext = match[1].toLowerCase();
+    // Keep only common image extensions
+    if (['jpg', 'jpeg', 'png', 'webp', 'heic', 'heif'].includes(ext)) return ext;
+    return null;
+  };
+
   const [image, setImage] = useState(null);
   const [points, setPoints] = useState([]);
   const [showResult, setShowResult] = useState(false);
@@ -141,7 +151,6 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
   const rotationInProgressRef = useRef(false); // block duplicate taps immediately
   const lastValidPosition = useRef(null);
   const insets = useSafeAreaInsets();
-  const openCameraTimeoutRef = useRef(null);
   
   // ✅ NEW ARCH: mobile does NOT export the final crop.
 
@@ -154,39 +163,22 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
 
 
   useEffect(() => {
-    // If a previous open was scheduled, cancel it.
-    if (openCameraTimeoutRef.current) {
-      clearTimeout(openCameraTimeoutRef.current);
-      openCameraTimeoutRef.current = null;
-    }
-
-    if (openCameraFirst) {
-      // Delay opening the camera so the prior session can fully release.
-      openCameraTimeoutRef.current = setTimeout(() => {
-        setShowCustomCamera(true);
-        openCameraTimeoutRef.current = null;
-      }, 800);
-    } 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;
-      // ✅ CRITICAL: Reset initialization guard for new image
-      hasInitializedCropBox.current = false;
-      imageSource.current = null;
-    }
-
-    return () => {
-      if (openCameraTimeoutRef.current) {
-        clearTimeout(openCameraTimeoutRef.current);
-        openCameraTimeoutRef.current = null;
-      }
-    };
-  }, [openCameraFirst, initialImage]);
+  if (openCameraFirst) {
+  setShowCustomCamera(true);
+} 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;
+  // ✅ CRITICAL: Reset initialization guard for new image
+  hasInitializedCropBox.current = false;
+  imageSource.current = null;
+}
+}, [openCameraFirst, initialImage]);
 
 
   // ✅ REFACTORISATION : Stocker uniquement les dimensions originales (pas de calcul théorique)
@@ -1392,7 +1384,9 @@ const rotatePreviewImage = async (degrees) => {
                             }
                           }
                           
-                          const name = `IMAGE XTK${Date.now()}`;
+                          const ext = guessExtensionFromUri(originalUri) || 'jpg';
+                          const safeExt = ext === 'jpeg' ? 'jpg' : ext;
+                          const name = `IMAGE_XTK_${Date.now()}.${safeExt}`;
                           if (onConfirm) {
                             onConfirm(originalUri, name, cropMeta);
                           }
@@ -1449,14 +1443,10 @@ const rotatePreviewImage = async (degrees) => {
             )}
 
             <Modal visible={isLoading} transparent animationType="fade">
-        <View style={styles.loadingOverlay}>
-          <Image
-            source={require('../src/assets/loadingCamera.gif')}
-            style={styles.loadingGif}
-            resizeMode="contain"
-          />
-        </View>
-      </Modal>
+              <View style={styles.loadingOverlay}>
+                <ActivityIndicator size="large" color={PRIMARY_GREEN} />
+              </View>
+            </Modal>
     </View>
   );
 };