react-native-expo-cropper 1.2.51 → 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

@@ -50,7 +50,9 @@ var ImageCropper = function ImageCropper(_ref) {
     _ref$confirmText = _ref.confirmText,
     confirmText = _ref$confirmText === void 0 ? 'Confirm' : _ref$confirmText,
     _ref$resetText = _ref.resetText,
-    resetText = _ref$resetText === void 0 ? 'Reset' : _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;
@@ -1228,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-expo-cropper",
-  "version": "1.2.51",
+  "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

@@ -22,6 +22,7 @@ const ImageCropper = ({
   onCancel,
   confirmText = 'Confirm',
   resetText = 'Reset',
+  cameraInstructionText = 'Place the tray inside the green box',
 }) => {
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
 
@@ -1053,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) {