react-native-expo-cropper 1.2.52 → 1.3.53

package/dist/CustomCamera.js

@@ -9,6 +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");
+var _vectorIcons = require("@expo/vector-icons");
 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; }
@@ -29,7 +30,7 @@ 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,
+    onCancel = _ref.onCancel,
     _ref$instructionText = _ref.instructionText,
     instructionText = _ref$instructionText === void 0 ? 'Place the tray inside the green box' : _ref$instructionText;
   var _useWindowDimensions = (0, _reactNative.useWindowDimensions)(),
@@ -320,9 +321,7 @@ function CustomCamera(_ref) {
       });
       console.log("Camera wrapper layout updated:", layout);
     }
-  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
-    style: styles.cameraInstruction
-  }, instructionText), /*#__PURE__*/_react["default"].createElement(_expoCamera.CameraView, {
+  }, /*#__PURE__*/_react["default"].createElement(_expoCamera.CameraView, {
     style: styles.camera,
     facing: "back",
     ref: cameraRef,
@@ -333,7 +332,11 @@ function CustomCamera(_ref) {
     // ✅ Ensure camera uses native aspect ratio (typically 4:3 for most devices)
     // The wrapper constrains the view, but capture uses full sensor resolution
     // This ensures preview matches what will be captured
-  }), loadingBeforeCapture && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+  }), /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
+    style: [styles.topBar, styles.topBarCentered]
+  }, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, {
+    style: [styles.topBarTitle, styles.topBarCenteredTitle]
+  }, instructionText)), loadingBeforeCapture && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: styles.loadingOverlay
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.ActivityIndicator, {
     size: "large",
@@ -350,18 +353,26 @@ function CustomCamera(_ref) {
     }]
   })), /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: [styles.buttonContainer, {
-      bottom: ((insets === null || insets === void 0 ? void 0 : insets.bottom) || 0) + 16,
+      bottom: ((insets === null || insets === void 0 ? void 0 : insets.bottom) || 0) + 12,
       marginBottom: 0
     }]
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
-    style: styles.button,
+    style: [styles.captureButton, (!isReady || loadingBeforeCapture || !hasPermission) && {
+      opacity: 0.55
+    }],
     onPress: takePicture,
     disabled: !isReady || loadingBeforeCapture || !hasPermission
-  }))));
+  }, /*#__PURE__*/_react["default"].createElement(_vectorIcons.Ionicons, {
+    name: "camera-outline",
+    size: 26,
+    color: "#121212"
+  })))));
 }
-var PRIMARY_GREEN = '#198754';
-var DEEP_BLACK = '#0B0B0B';
-var GLOW_WHITE = 'rgba(255, 255, 255, 0.85)';
+var PRIMARY_GREEN = '#689F38';
+var ACCENT_GREEN = '#689F38';
+var DEEP_BLACK = '#060708';
+var GLOW_WHITE = 'rgba(255, 255, 255, 0.9)';
+var GLASS = 'rgba(20,22,26,0.9)';
 var styles = _reactNative.StyleSheet.create({
   outerContainer: {
     flex: 1,
@@ -384,10 +395,12 @@ var styles = _reactNative.StyleSheet.create({
   },
   permissionButton: {
     marginTop: 16,
-    backgroundColor: PRIMARY_GREEN,
+    backgroundColor: GLASS,
     paddingHorizontal: 16,
     paddingVertical: 10,
-    borderRadius: 8
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.12)'
   },
   permissionButtonText: {
     color: 'white',
@@ -395,7 +408,7 @@ var styles = _reactNative.StyleSheet.create({
   },
   cameraWrapper: {
     aspectRatio: 9 / 16,
-    borderRadius: 30,
+    borderRadius: 0,
     overflow: 'hidden',
     alignItems: 'center',
     justifyContent: 'center',
@@ -403,30 +416,29 @@ var styles = _reactNative.StyleSheet.create({
   },
   cameraInstruction: {
     position: 'absolute',
-    top: 8,
-    left: 12,
-    right: 12,
+    bottom: 170,
+    left: 18,
+    right: 18,
     textAlign: 'center',
-    color: GLOW_WHITE,
-    fontSize: 14,
-    fontWeight: '600',
+    color: 'rgba(255,255,255,0.82)',
+    fontSize: 13,
+    fontWeight: '500',
     zIndex: 10,
-    textShadowColor: 'rgba(0, 0, 0, 0.7)',
+    textShadowColor: 'rgba(0, 0, 0, 0.6)',
     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',
-    borderWidth: 4,
-    borderColor: PRIMARY_GREEN,
-    borderRadius: 5,
-    backgroundColor: 'rgba(0, 0, 0, 0.1)'
+    borderWidth: 2,
+    borderColor: ACCENT_GREEN,
+    borderRadius: 2,
+    backgroundColor: 'rgba(158, 249, 107, 0.08)'
   },
   loadingOverlay: _objectSpread(_objectSpread({}, _reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
@@ -438,45 +450,142 @@ var styles = _reactNative.StyleSheet.create({
     zIndex: 21,
     backgroundColor: 'transparent'
   }),
-  cancelIcon: {
-    position: 'absolute',
-    top: 20,
-    left: 20,
-    backgroundColor: PRIMARY_GREEN,
-    borderRadius: 5,
-    padding: 8
-  },
   buttonContainer: {
     position: 'absolute',
     bottom: 0,
-    marginBottom: 20,
-    flexDirection: 'row',
+    left: 0,
+    right: 0,
+    marginBottom: 8,
+    alignItems: 'center',
     justifyContent: 'center'
   },
-  button: {
-    width: 80,
-    height: 80,
-    borderRadius: 50,
-    backgroundColor: GLOW_WHITE,
-    borderWidth: 5,
-    borderColor: PRIMARY_GREEN,
+  captureButton: {
+    marginTop: 10,
+    width: 68,
+    height: 68,
+    borderRadius: 20,
+    backgroundColor: ACCENT_GREEN,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    shadowColor: ACCENT_GREEN,
+    shadowOpacity: 0.42,
+    shadowRadius: 10,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    elevation: 8
   },
-  text: {
-    fontSize: 18,
-    color: GLOW_WHITE
+  topBar: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 18
   },
-  container: {
-    flex: 1,
-    backgroundColor: DEEP_BLACK,
+  topBarCentered: {
     justifyContent: 'center',
     alignItems: 'center',
-    padding: 20
+    paddingHorizontal: 0
   },
-  iconText: {
-    fontSize: 18,
-    color: GLOW_WHITE,
-    fontWeight: '600'
+  topIconButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 12,
+    backgroundColor: 'rgba(0,0,0,0.35)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  topBarTitle: {
+    color: ACCENT_GREEN,
+    fontSize: 30,
+    fontWeight: '700',
+    letterSpacing: 0.3
+  },
+  topBarCenteredTitle: {
+    width: '100%',
+    textAlign: 'center',
+    paddingHorizontal: 18
+  },
+  detectBadge: {
+    position: 'absolute',
+    top: 76,
+    left: 18,
+    zIndex: 20,
+    backgroundColor: 'rgba(40, 44, 50, 0.82)',
+    borderRadius: 16,
+    paddingHorizontal: 14,
+    paddingVertical: 10
+  },
+  detectBadgeText: {
+    color: 'rgba(255,255,255,0.78)',
+    fontSize: 12,
+    fontWeight: '700',
+    letterSpacing: 1.6,
+    textTransform: 'uppercase'
+  },
+  cornerHandle: {
+    position: 'absolute',
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: '#DFFFD0',
+    borderWidth: 2,
+    borderColor: ACCENT_GREEN,
+    shadowColor: ACCENT_GREEN,
+    shadowOpacity: 0.55,
+    shadowRadius: 10,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    elevation: 8,
+    zIndex: 25
+  },
+  dockLabel: {
+    marginTop: 10,
+    marginBottom: 10,
+    color: 'rgba(255,255,255,0.63)',
+    textAlign: 'center',
+    fontSize: 12,
+    letterSpacing: 3.2,
+    textTransform: 'uppercase'
+  },
+  dock: {
+    height: 76,
+    width: '92%',
+    borderRadius: 22,
+    backgroundColor: 'rgba(27,30,35,0.92)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.08)',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    paddingHorizontal: 12
+  },
+  dockButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  dockButtonActive: {
+    width: 74,
+    height: 52,
+    borderRadius: 16,
+    backgroundColor: ACCENT_GREEN,
+    shadowColor: ACCENT_GREEN,
+    shadowOpacity: 0.4,
+    shadowRadius: 10,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    elevation: 8
   }
 });