react-native-expo-cropper 1.2.46 → 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; }
@@ -79,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() {
@@ -144,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({
@@ -172,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' && {
@@ -190,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,
@@ -215,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
@@ -232,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
     }],
@@ -279,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"
@@ -301,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';
@@ -314,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,
@@ -336,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],
@@ -1305,31 +1314,6 @@ var ImageCropper = function ImageCropper(_ref) {
     style: _ImageCropperStyles["default"].container
   }, showCustomCamera ? /*#__PURE__*/_react["default"].createElement(_CustomCamera["default"], {
     onPhotoCaptured: function onPhotoCaptured(uri, frameData) {
-      // ✅ Reset refs for new image so second (and later) photos don't use first image's layout (fixes white screen on some devices)
-      originalImageDimensions.current = {
-        width: 0,
-        height: 0
-      };
-      imageDisplayRect.current = {
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-      };
-      displayedImageLayout.current = {
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-      };
-      imageMeasure.current = {
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-      };
-      sourceImageUri.current = uri;
-
       // ✅ CRITICAL FIX: Store green frame coordinates for coordinate conversion
       if (frameData && frameData.greenFrame) {
         cameraFrameData.current = {
@@ -1425,7 +1409,6 @@ var ImageCropper = function ImageCropper(_ref) {
       return hasMovement;
     }
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Image, {
-    key: image,
     source: {
       uri: image
     },
@@ -1504,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:
@@ -1645,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);
             }
@@ -1698,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.46",
+  "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';
@@ -35,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) => {
@@ -102,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)
@@ -123,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,
@@ -198,70 +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
-          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>
   );
 }
@@ -277,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,
@@ -302,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);
@@ -1100,13 +1110,6 @@ const rotatePreviewImage = async (degrees) => {
       {showCustomCamera ? (
         <CustomCamera
           onPhotoCaptured={(uri, frameData) => { 
-            // ✅ Reset refs for new image so second (and later) photos don't use first image's layout (fixes white screen on some devices)
-            originalImageDimensions.current = { width: 0, height: 0 };
-            imageDisplayRect.current = { x: 0, y: 0, width: 0, height: 0 };
-            displayedImageLayout.current = { x: 0, y: 0, width: 0, height: 0 };
-            imageMeasure.current = { x: 0, y: 0, width: 0, height: 0 };
-            sourceImageUri.current = uri;
-
             // ✅ CRITICAL FIX: Store green frame coordinates for coordinate conversion
             if (frameData && frameData.greenFrame) {
               cameraFrameData.current = {
@@ -1204,7 +1207,6 @@ const rotatePreviewImage = async (degrees) => {
                 }}
               >
                 <Image
-                  key={image}
                   source={{ uri: image }}
                   style={styles.image}
                   resizeMode={cameraFrameData.current?.greenFrame ? 'cover' : 'contain'}
@@ -1382,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);
                           }
@@ -1439,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>
   );
 };