react-native-expo-cropper 1.2.50 → 1.2.52

package/dist/CustomCamera.js

@@ -29,7 +29,9 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var CAMERA_PREVIEW_MAX_WIDTH = 500;
 function CustomCamera(_ref) {
   var onPhotoCaptured = _ref.onPhotoCaptured,
-    onFrameCalculated = _ref.onFrameCalculated;
+    onFrameCalculated = _ref.onFrameCalculated,
+    _ref$instructionText = _ref.instructionText,
+    instructionText = _ref$instructionText === void 0 ? 'Place the tray inside the green box' : _ref$instructionText;
   var _useWindowDimensions = (0, _reactNative.useWindowDimensions)(),
     windowWidth = _useWindowDimensions.width;
   var cameraPreviewWidth = Math.min(windowWidth, CAMERA_PREVIEW_MAX_WIDTH);
@@ -318,7 +320,9 @@ function CustomCamera(_ref) {
       });
       console.log("Camera wrapper layout updated:", layout);
     }
-  }, /*#__PURE__*/_react["default"].createElement(_expoCamera.CameraView, {
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: styles.cameraInstruction
+  }, instructionText), /*#__PURE__*/_react["default"].createElement(_expoCamera.CameraView, {
     style: styles.camera,
     facing: "back",
     ref: cameraRef,
@@ -397,6 +401,25 @@ var styles = _reactNative.StyleSheet.create({
     justifyContent: 'center',
     position: 'relative'
   },
+  cameraInstruction: {
+    position: 'absolute',
+    top: 8,
+    left: 12,
+    right: 12,
+    textAlign: 'center',
+    color: GLOW_WHITE,
+    fontSize: 14,
+    fontWeight: '600',
+    zIndex: 10,
+    textShadowColor: 'rgba(0, 0, 0, 0.7)',
+    textShadowOffset: {
+      width: 0,
+      height: 1
+    },
+    textShadowRadius: 2,
+    // Allow camera/scan frame to still receive touches
+    pointerEvents: 'none'
+  },
   camera: _objectSpread({}, _reactNative.StyleSheet.absoluteFillObject),
   scanFrame: {
     position: 'absolute',

package/dist/ImageCropper.js

@@ -45,7 +45,14 @@ var ImageCropper = function ImageCropper(_ref) {
     openCameraFirst = _ref.openCameraFirst,
     initialImage = _ref.initialImage,
     addheight = _ref.addheight,
-    rotationLabel = _ref.rotationLabel;
+    rotationLabel = _ref.rotationLabel,
+    onCancel = _ref.onCancel,
+    _ref$confirmText = _ref.confirmText,
+    confirmText = _ref$confirmText === void 0 ? 'Confirm' : _ref$confirmText,
+    _ref$resetText = _ref.resetText,
+    resetText = _ref$resetText === void 0 ? 'Reset' : _ref$resetText,
+    _ref$cameraInstructio = _ref.cameraInstructionText,
+    cameraInstructionText = _ref$cameraInstructio === void 0 ? 'Place the tray inside the green box' : _ref$cameraInstructio;
   var _useWindowDimensions = (0, _reactNative.useWindowDimensions)(),
     windowWidth = _useWindowDimensions.width,
     windowHeight = _useWindowDimensions.height;
@@ -1223,6 +1230,7 @@ var ImageCropper = function ImageCropper(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: _ImageCropperStyles["default"].container
   }, showCustomCamera ? /*#__PURE__*/_react["default"].createElement(_CustomCamera["default"], {
+    instructionText: cameraInstructionText,
     onPhotoCaptured: function onPhotoCaptured(uri, frameData) {
       // ✅ CRITICAL FIX: Store green frame coordinates for coordinate conversion
       if (frameData && frameData.greenFrame) {
@@ -1388,7 +1396,26 @@ var ImageCropper = function ImageCropper(_ref) {
       paddingHorizontal: Math.round(12 * responsiveScale),
       gap: Math.round(8 * responsiveScale)
     }]
-  }, _reactNative.Platform.OS === 'android' && /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
+    style: [_ImageCropperStyles["default"].rotationButton, {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderColor: 'white',
+      width: Math.round(40 * responsiveScale),
+      height: Math.round(40 * responsiveScale),
+      borderRadius: Math.round(20 * responsiveScale),
+      marginRight: Math.round(6 * responsiveScale)
+    }],
+    onPress: function onPress() {
+      if (onCancel) {
+        onCancel();
+      }
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_vectorIcons.Ionicons, {
+    name: "close",
+    size: Math.round(20 * responsiveScale),
+    color: "white"
+  })), _reactNative.Platform.OS === 'android' && /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
     style: [_ImageCropperStyles["default"].rotationButton, {
       width: Math.round(56 * responsiveScale),
       height: Math.round(48 * responsiveScale),
@@ -1418,7 +1445,7 @@ var ImageCropper = function ImageCropper(_ref) {
     style: [_ImageCropperStyles["default"].buttonText, {
       fontSize: Math.max(14, Math.round(18 * responsiveScale))
     }]
-  }, "Reset")), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
+  }, resetText)), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
     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, ext, safeExt, name, _t2;
       return _regenerator().w(function (_context2) {
@@ -1594,7 +1621,7 @@ var ImageCropper = function ImageCropper(_ref) {
     style: [_ImageCropperStyles["default"].buttonText, {
       fontSize: Math.max(14, Math.round(18 * responsiveScale))
     }]
-  }, "Confirm"))), !showResult && !image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+  }, confirmText))), !showResult && !image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: _ImageCropperStyles["default"].centerButtonsContainer
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
     style: _ImageCropperStyles["default"].welcomeText

package/package.json

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

package/src/CustomCamera.js

@@ -16,7 +16,11 @@ import { Camera, CameraView } from 'expo-camera';
 // Max width for camera preview on large screens (tablets) so it doesn't stretch full width
 const CAMERA_PREVIEW_MAX_WIDTH = 500;
 
-export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
+export default function CustomCamera({
+  onPhotoCaptured,
+  onFrameCalculated,
+  instructionText = 'Place the tray inside the green box',
+}) {
   const { width: windowWidth } = useWindowDimensions();
   const cameraPreviewWidth = Math.min(windowWidth, CAMERA_PREVIEW_MAX_WIDTH);
   const [isReady, setIsReady] = useState(false);
@@ -250,6 +254,9 @@ export default function CustomCamera({ onPhotoCaptured, onFrameCalculated }) {
               console.log("Camera wrapper layout updated:", layout);
             }}
           >
+            <Text style={styles.cameraInstruction}>
+              {instructionText}
+            </Text>
             <CameraView
               style={styles.camera}
               facing="back"
@@ -345,6 +352,22 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     position: 'relative',
   },
+  cameraInstruction: {
+    position: 'absolute',
+    top: 8,
+    left: 12,
+    right: 12,
+    textAlign: 'center',
+    color: GLOW_WHITE,
+    fontSize: 14,
+    fontWeight: '600',
+    zIndex: 10,
+    textShadowColor: 'rgba(0, 0, 0, 0.7)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 2,
+    // Allow camera/scan frame to still receive touches
+    pointerEvents: 'none',
+  },
   camera: {
     ...StyleSheet.absoluteFillObject,
   },

package/src/ImageCropper.js

@@ -13,7 +13,17 @@ const PRIMARY_GREEN = '#198754';
 // Base dimension for responsive scaling (e.g. ~375pt design width)
 const RESPONSIVE_BASE = 375;
 
-const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rotationLabel }) => {
+const ImageCropper = ({
+  onConfirm,
+  openCameraFirst,
+  initialImage,
+  addheight,
+  rotationLabel,
+  onCancel,
+  confirmText = 'Confirm',
+  resetText = 'Reset',
+  cameraInstructionText = 'Place the tray inside the green box',
+}) => {
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
 
   // Responsive scale: image and UI adapt to small (phone) and large (tablet) screens
@@ -1044,6 +1054,7 @@ const rotatePreviewImage = async (degrees) => {
 
       {showCustomCamera ? (
         <CustomCamera
+          instructionText={cameraInstructionText}
           onPhotoCaptured={(uri, frameData) => { 
             // ✅ CRITICAL FIX: Store green frame coordinates for coordinate conversion
             if (frameData && frameData.greenFrame) {
@@ -1192,15 +1203,40 @@ const rotatePreviewImage = async (degrees) => {
 
           {/* ✅ Buttons positioned as a responsive bottom bar (scale with screen size) */}
           {!showResult && image && (
-            <View style={[
-              styles.buttonContainerBelow,
-              {
-                paddingBottom: Math.max(insets.bottom, Math.round(16 * responsiveScale)),
-                paddingTop: Math.round(12 * responsiveScale),
-                paddingHorizontal: Math.round(12 * responsiveScale),
-                gap: Math.round(8 * responsiveScale),
-              },
-            ]}>
+            <View
+              style={[
+                styles.buttonContainerBelow,
+                {
+                  paddingBottom: Math.max(insets.bottom, Math.round(16 * responsiveScale)),
+                  paddingTop: Math.round(12 * responsiveScale),
+                  paddingHorizontal: Math.round(12 * responsiveScale),
+                  gap: Math.round(8 * responsiveScale),
+                },
+              ]}
+            >
+              {/* Close button: always visible, closes cropper */}
+              <TouchableOpacity
+                style={[
+                  styles.rotationButton,
+                  {
+                    backgroundColor: 'transparent',
+                    borderWidth: 1,
+                    borderColor: 'white',
+                    width: Math.round(40 * responsiveScale),
+                    height: Math.round(40 * responsiveScale),
+                    borderRadius: Math.round(20 * responsiveScale),
+                    marginRight: Math.round(6 * responsiveScale),
+                  },
+                ]}
+                onPress={() => {
+                  if (onCancel) {
+                    onCancel();
+                  }
+                }}
+              >
+                <Ionicons name="close" size={Math.round(20 * responsiveScale)} color="white" />
+              </TouchableOpacity>
+
               {Platform.OS === 'android' && (
                 <TouchableOpacity 
                   style={[
@@ -1234,7 +1270,14 @@ const rotatePreviewImage = async (degrees) => {
                 ]}
                 onPress={handleReset}
               >
-                <Text style={[styles.buttonText, { fontSize: Math.max(14, Math.round(18 * responsiveScale)) }]}>Reset</Text>
+                <Text
+                  style={[
+                    styles.buttonText,
+                    { fontSize: Math.max(14, Math.round(18 * responsiveScale)) },
+                  ]}
+                >
+                  {resetText}
+                </Text>
               </TouchableOpacity>
               
               <TouchableOpacity
@@ -1377,7 +1420,14 @@ const rotatePreviewImage = async (degrees) => {
                   },
                 ]}
               >
-                <Text style={[styles.buttonText, { fontSize: Math.max(14, Math.round(18 * responsiveScale)) }]}>Confirm</Text>
+                <Text
+                  style={[
+                    styles.buttonText,
+                    { fontSize: Math.max(14, Math.round(18 * responsiveScale)) },
+                  ]}
+                >
+                  {confirmText}
+                </Text>
               </TouchableOpacity>
             </View>
           )}