react-native-expo-cropper 1.2.49 → 1.2.51

package/dist/ImageCropper.js

@@ -45,7 +45,12 @@ 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;
   var _useWindowDimensions = (0, _reactNative.useWindowDimensions)(),
     windowWidth = _useWindowDimensions.width,
     windowHeight = _useWindowDimensions.height;
@@ -1251,9 +1256,7 @@ var ImageCropper = function ImageCropper(_ref) {
   }, image && /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: _ImageCropperStyles["default"].imageRegion
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
-    style: [_ImageCropperStyles["default"].commonWrapper, {
-      maxHeight: windowHeight * 0.7
-    }],
+    style: _ImageCropperStyles["default"].commonWrapper,
     ref: commonWrapperRef,
     onLayout: onCommonWrapperLayout
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
@@ -1390,7 +1393,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),
@@ -1420,7 +1442,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) {
@@ -1596,7 +1618,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/dist/ImageCropperStyles.js

@@ -30,17 +30,18 @@ var styles = _reactNative.StyleSheet.create({
     flexDirection: 'column',
     minHeight: 0
   },
-  // Wrapper that centers the crop box vertically and horizontally on screen
+  // Wrapper that occupies all space above the buttons
   imageRegion: {
     flex: 1,
     width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center'
+    alignSelf: 'stretch',
+    justifyContent: 'flex-start',
+    alignItems: 'stretch'
   },
-  // Crop preview: responsive box, centered inside imageRegion
+  // Crop preview: fill all available space in imageRegion
   commonWrapper: {
+    flex: 1,
     width: '100%',
-    aspectRatio: 9 / 16,
     overflow: 'hidden',
     alignItems: 'center',
     justifyContent: 'center',

package/package.json

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

package/src/ImageCropper.js

@@ -13,7 +13,16 @@ 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',
+}) => {
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
 
   // Responsive scale: image and UI adapt to small (phone) and large (tablet) screens
@@ -1071,12 +1080,7 @@ const rotatePreviewImage = async (degrees) => {
           {image && (
             <View style={styles.imageRegion}>
               <View
-                style={[
-                  styles.commonWrapper,
-                  {
-                    maxHeight: windowHeight * 0.7,
-                  },
-                ]}
+                style={styles.commonWrapper}
                 ref={commonWrapperRef}
                 onLayout={onCommonWrapperLayout}
               >
@@ -1197,15 +1201,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={[
@@ -1239,7 +1268,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
@@ -1382,7 +1418,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>
           )}

package/src/ImageCropperStyles.js

@@ -25,17 +25,18 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     minHeight: 0,
   },
-  // Wrapper that centers the crop box vertically and horizontally on screen
+  // Wrapper that occupies all space above the buttons
   imageRegion: {
     flex: 1,
     width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
+    alignSelf: 'stretch',
+    justifyContent: 'flex-start',
+    alignItems: 'stretch',
   },
-  // Crop preview: responsive box, centered inside imageRegion
+  // Crop preview: fill all available space in imageRegion
   commonWrapper: {
+    flex: 1,
     width: '100%',
-    aspectRatio: 9 / 16,
     overflow: 'hidden',
     alignItems: 'center',
     justifyContent: 'center',