react-native-expo-cropper 1.2.47 → 1.2.49

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'