react-native-expo-cropper 1.0.13 → 1.0.14

package/lib/ImageCropper.js

@@ -35,6 +35,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var ImageCropper = function ImageCropper(_ref) {
   var onConfirm = _ref.onConfirm,
+    onCrop = _ref.onCrop,
     openCameraFirst = _ref.openCameraFirst,
     initialImage = _ref.initialImage,
     addheight = _ref.addheight;
@@ -97,29 +98,6 @@ var ImageCropper = function ImageCropper(_ref) {
       }
     });
   }, [image]);
-  var initializeCropBox = function initializeCropBox() {
-    var _imageMeasure$current = imageMeasure.current,
-      width = _imageMeasure$current.width,
-      height = _imageMeasure$current.height;
-    // if (width === 0 || height === 0 || points.length > 0) return;
-    var boxWidth = width * 0.6;
-    var boxHeight = height * 0.6;
-    var centerX = width / 2;
-    var centerY = height / 2;
-    setPoints([{
-      x: centerX - boxWidth / 2,
-      y: centerY - boxHeight / 2
-    }, {
-      x: centerX + boxWidth / 2,
-      y: centerY - boxHeight / 2
-    }, {
-      x: centerX + boxWidth / 2,
-      y: centerY + boxHeight / 2
-    }, {
-      x: centerX - boxWidth / 2,
-      y: centerY + boxHeight / 2
-    }]);
-  };
   var onImageLayout = function onImageLayout(e) {
     var layout = e.nativeEvent.layout;
     imageMeasure.current = {
@@ -208,6 +186,31 @@ var ImageCropper = function ImageCropper(_ref) {
     // setPoints([]);
     initializeCropBox();
   };
+  var SCREEN_WIDTH = _reactNative.Dimensions.get('window').width;
+  var SCREEN_HEIGHT = _reactNative.Dimensions.get('window').height;
+  var initializeCropBox = function initializeCropBox() {
+    var _imageMeasure$current = imageMeasure.current,
+      width = _imageMeasure$current.width,
+      height = _imageMeasure$current.height;
+    // if (width === 0 || height === 0 || points.length > 0) return;
+    var boxWidth = width * 0.6;
+    var boxHeight = height * 0.6;
+    var centerX = width / 2;
+    var centerY = height / 2;
+    setPoints([{
+      x: centerX - boxWidth / 2,
+      y: centerY - boxHeight / 2
+    }, {
+      x: centerX + boxWidth / 2,
+      y: centerY - boxHeight / 2
+    }, {
+      x: centerX + boxWidth / 2,
+      y: centerY + boxHeight / 2
+    }, {
+      x: centerX - boxWidth / 2,
+      y: centerY + boxHeight / 2
+    }]);
+  };
   return /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: _ImageCropperStyles["default"].container
   }, showCustomCamera ? /*#__PURE__*/_react["default"].createElement(_CustomCamera["default"], {
@@ -227,52 +230,85 @@ var ImageCropper = function ImageCropper(_ref) {
     style: _ImageCropperStyles["default"].buttonText
   }, "Reset")), image && /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
     style: _ImageCropperStyles["default"].button,
-    onPress: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-      var capturedUri, enhancedUri, name, _t;
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.p = _context.n) {
+    onPress: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+      var name, finalUri, capturePromise, timeoutPromise, callback, _t;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
           case 0:
-            // setShowFullScreenCapture(true); 
-            setIsLoading(true);
+            // Do NOT show loading modal during confirm to avoid UI stalls
             setShowResult(true);
-            _context.p = 1;
-            _context.n = 2;
+            if (viewRef.current) {
+              _context2.n = 1;
+              break;
+            }
+            console.error('View ref not ready for capture');
+            alert('Vue non prête pour la capture');
+            setShowResult(false);
+            return _context2.a(2);
+          case 1:
+            name = "IMAGE XTK".concat(Date.now(), ".png");
+            finalUri = null;
+            _context2.p = 2;
+            _context2.n = 3;
             return new Promise(function (resolve) {
               return requestAnimationFrame(resolve);
             });
-          case 2:
-            _context.n = 3;
-            return (0, _reactNativeViewShot.captureRef)(viewRef, {
-              format: 'png',
-              quality: 1
-            });
           case 3:
-            capturedUri = _context.v;
-            _context.n = 4;
-            return (0, _ImageProcessor.enhanceImage)(capturedUri, addheight);
+            _context2.n = 4;
+            return new Promise(function (resolve) {
+              return _reactNative.InteractionManager.runAfterInteractions(resolve);
+            });
           case 4:
-            enhancedUri = _context.v;
-            name = "IMAGE XTK".concat(Date.now(), ".png");
-            if (onConfirm) {
-              onConfirm(enhancedUri, name);
-            }
-            _context.n = 6;
-            break;
+            capturePromise = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+              var capturedUri;
+              return _regenerator().w(function (_context) {
+                while (1) switch (_context.n) {
+                  case 0:
+                    _context.n = 1;
+                    return (0, _reactNativeViewShot.captureRef)(viewRef.current, {
+                      format: 'png',
+                      quality: 1,
+                      result: 'tmpfile'
+                    });
+                  case 1:
+                    capturedUri = _context.v;
+                    return _context.a(2, (0, _ImageProcessor.enhanceImage)(capturedUri, addheight));
+                }
+              }, _callee);
+            }))();
+            timeoutPromise = new Promise(function (_, reject) {
+              return setTimeout(function () {
+                return reject(new Error('Capture timed out'));
+              }, 7000);
+            });
+            _context2.n = 5;
+            return Promise.race([capturePromise, timeoutPromise]);
           case 5:
-            _context.p = 5;
-            _t = _context.v;
-            console.error("Erreur lors de la capture :", _t);
-            alert("Erreur lors de la capture !");
+            finalUri = _context2.v;
+            _context2.n = 7;
+            break;
           case 6:
-            _context.p = 6;
+            _context2.p = 6;
+            _t = _context2.v;
+            console.error('Erreur lors de la capture :', _t);
+            alert('Erreur lors de la capture !');
+          case 7:
+            _context2.p = 7;
             setShowResult(false);
             setIsLoading(false);
             setShowFullScreenCapture(false);
-            return _context.f(6);
-          case 7:
-            return _context.a(2);
+            return _context2.f(7);
+          case 8:
+            callback = onConfirm || (typeof onCrop === 'function' ? onCrop : null);
+            if (callback && finalUri) {
+              setTimeout(function () {
+                return callback(finalUri, name);
+              }, 0);
+            }
+          case 9:
+            return _context2.a(2);
         }
-      }, _callee, null, [[1, 5, 6, 7]]);
+      }, _callee2, null, [[2, 6, 7, 8]]);
     }))
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
     style: _ImageCropperStyles["default"].buttonText

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-expo-cropper",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Recadrage polygonal d'images.",
   "main": "index.js",
   "author": "PCS AGRI",

package/src/ImageCropper.js

@@ -1,12 +1,12 @@
 import styles from './ImageCropperStyles';
 import React, { useState, useRef, useEffect } from 'react';
-import { Modal,View, Image, Dimensions, TouchableOpacity, Animated, Text } from 'react-native';
+import { Modal,View, Image, Dimensions, TouchableOpacity, Animated, Text, InteractionManager } from 'react-native';
 import Svg, { Path, Circle } from 'react-native-svg';
 import { captureRef } from 'react-native-view-shot';
 import CustomCamera from './CustomCamera';
 import { enhanceImage } from './ImageProcessor';
 
-const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) => {
+const ImageCropper = ({ onConfirm, onCrop, openCameraFirst, initialImage ,addheight}) => {
 
 
   const [image, setImage] = useState(null);
@@ -56,23 +56,6 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
   });
 }, [image]);
 
-
-  const initializeCropBox = () => {
-    const { width, height } = imageMeasure.current;
-    // if (width === 0 || height === 0 || points.length > 0) return;
-    const boxWidth = width * 0.6;
-    const boxHeight = height * 0.6;
-    const centerX = width / 2;
-    const centerY = height / 2;
-    setPoints([
-      { x: centerX - boxWidth / 2, y: centerY - boxHeight / 2 },
-      { x: centerX + boxWidth / 2, y: centerY - boxHeight / 2 },
-      { x: centerX + boxWidth / 2, y: centerY + boxHeight / 2 },
-      { x: centerX - boxWidth / 2, y: centerY + boxHeight / 2 },
-    ]);
-  };
-
-
   const onImageLayout = (e) => {
     const layout = e.nativeEvent.layout;
     imageMeasure.current = {
@@ -95,7 +78,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
     if (!image || showResult) return;
     const now = Date.now();
     const { locationX: tapX, locationY: tapY } = e.nativeEvent;
-  
+
     if (lastTap.current && now - lastTap.current < 300) {
       const exists = points.some(p => Math.abs(p.x - tapX) < 15 && Math.abs(p.y - tapY) < 15);
       if (!exists) setPoints([...points, { x: tapX, y: tapY }]);
@@ -112,43 +95,30 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
 
   const handleMove = (e) => {
     if (showResult || selectedPointIndex.current === null) return;
-  
     const { locationX: moveX, locationY: moveY } = e.nativeEvent;
     const width = imageMeasure.current.width;
     const height = imageMeasure.current.height;
-  
+
     const boundedX = Math.max(0, Math.min(moveX, width));
     const boundedY = Math.max(0, Math.min(moveY, height));
-  
+
     const edgeThreshold = 10;
-    const isNearTopOrBottomEdge =
-      boundedY <= edgeThreshold || boundedY >= height - edgeThreshold;
-  
-    const isNearLeftOrRightEdge =
-      boundedX <= edgeThreshold || boundedX >= width - edgeThreshold;
-  
+    const isNearTopOrBottomEdge = boundedY <= edgeThreshold || boundedY >= height - edgeThreshold;
+    const isNearLeftOrRightEdge = boundedX <= edgeThreshold || boundedX >= width - edgeThreshold;
+
     if (isNearTopOrBottomEdge || isNearLeftOrRightEdge) {
       // Reset point to last known position
       if (lastValidPosition.current && selectedPointIndex.current !== null) {
-        setPoints(prev =>
-          prev.map((p, i) =>
-            i === selectedPointIndex.current ? lastValidPosition.current : p
-          )
-        );
+        setPoints(prev => prev.map((p, i) => (i === selectedPointIndex.current ? lastValidPosition.current : p)));
       }
       selectedPointIndex.current = null;
       return;
     }
-  
+
     // Valid move — update point and store as new last valid position
     const updatedPoint = { x: boundedX, y: boundedY };
     lastValidPosition.current = updatedPoint;
-  
-    setPoints(prev =>
-      prev.map((p, i) =>
-        i === selectedPointIndex.current ? updatedPoint : p
-      )
-    );
+    setPoints(prev => prev.map((p, i) => (i === selectedPointIndex.current ? updatedPoint : p)));
   };
 
   const handleRelease = () => {
@@ -161,6 +131,26 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
   };
 
 
+  const SCREEN_WIDTH = Dimensions.get('window').width;
+  const SCREEN_HEIGHT = Dimensions.get('window').height;
+
+  const initializeCropBox = () => {
+    const { width, height } = imageMeasure.current;
+    // if (width === 0 || height === 0 || points.length > 0) return;
+    const boxWidth = width * 0.6;
+    const boxHeight = height * 0.6;
+    const centerX = width / 2;
+    const centerY = height / 2;
+
+    setPoints([
+      { x: centerX - boxWidth / 2, y: centerY - boxHeight / 2 },
+      { x: centerX + boxWidth / 2, y: centerY - boxHeight / 2 },
+      { x: centerX + boxWidth / 2, y: centerY + boxHeight / 2 },
+      { x: centerX - boxWidth / 2, y: centerY + boxHeight / 2 },
+    ]);
+  };
+
+
   return (
     <View style={styles.container}>
 
@@ -183,33 +173,51 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
               <TouchableOpacity
                 style={styles.button}
                   onPress={async () => {
-                        // setShowFullScreenCapture(true); 
-                        setIsLoading(true);
+                        // Do NOT show loading modal during confirm to avoid UI stalls
                         setShowResult(true);
+
+                        if (!viewRef.current) {
+                          console.error('View ref not ready for capture');
+                          alert('Vue non prête pour la capture');
+                          setShowResult(false);
+                          return;
+                        }
+
+                        const name = `IMAGE XTK${Date.now()}.png`;
+                        let finalUri = null;
                         try {
+                          // Yield UI work completely, then perform capture
                           await new Promise((resolve) => requestAnimationFrame(resolve));
-                          const capturedUri = await captureRef(viewRef, {
-                            format: 'png',
-                            quality: 1,
-                          });
+                          await new Promise((resolve) => InteractionManager.runAfterInteractions(resolve));
 
-                        
-                        const enhancedUri = await enhanceImage(capturedUri ,addheight);
-                        const name = `IMAGE XTK${Date.now()}.png`;
+                          const capturePromise = (async () => {
+                            const capturedUri = await captureRef(viewRef.current, {
+                              format: 'png',
+                              quality: 1,
+                              result: 'tmpfile',
+                            });
+                            return enhanceImage(capturedUri, addheight);
+                          })();
+
+                          const timeoutPromise = new Promise((_, reject) =>
+                            setTimeout(() => reject(new Error('Capture timed out')), 7000)
+                          );
+
+                          finalUri = await Promise.race([capturePromise, timeoutPromise]);
+                        } catch (error) {
+                          console.error('Erreur lors de la capture :', error);
+                          alert('Erreur lors de la capture !');
+                        } finally {
+                          setShowResult(false);
+                          setIsLoading(false);
+                          setShowFullScreenCapture(false);
+                        }
 
-                    
-                    if (onConfirm) {
-                      onConfirm(enhancedUri, name);
-                    }
-                  } catch (error) {
-                    console.error("Erreur lors de la capture :", error);
-                    alert("Erreur lors de la capture !");
-                  } finally {
-                    setShowResult(false);
-                    setIsLoading(false);
-                    setShowFullScreenCapture(false);
-                  }
-                }}
+                        const callback = onConfirm || (typeof onCrop === 'function' ? onCrop : null);
+                        if (callback && finalUri) {
+                          setTimeout(() => callback(finalUri, name), 0);
+                        }
+                  }}
   >
     <Text style={styles.buttonText}>Confirm</Text>
   </TouchableOpacity>