Mendix 11 / native template 19 compatibility (v1.1.3)

.eslintrc.js

@@ -1,5 +1,13 @@
 const base = require("@mendix/pluggable-widgets-tools/configs/eslint.ts.base.json");
 
+// Remove jest/globals env and jest plugin — incompatible with Node 22 / ESLint 8 in this setup
+const { "jest/globals": _jestGlobals, ...envWithoutJest } = base.env;
+const pluginsWithoutJest = (base.plugins || []).filter(p => p !== "jest");
+const rulesWithoutJest = Object.fromEntries(Object.entries(base.rules || {}).filter(([k]) => !k.startsWith("jest/")));
+
 module.exports = {
-    ...base
+    ...base,
+    env: envWithoutJest,
+    plugins: pluginsWithoutJest,
+    rules: rulesWithoutJest
 };

README.md

@@ -12,6 +12,7 @@ VisionCamera is a powerful, high-performance Camera library for React Native.
 ## Requirements
 - Mendix 10.18.3+
 - react-native 0.75.4+
+- Tested with Mendix 10.24 (native template 14.1) and Mendix 11.12 (native template 19.1, react-native 0.84)
 
 ## Development and contribution
 1. Install NPM package dependencies by using: `npm install`. If you use NPM v7.x.x, which can be checked by executing `npm -v`, execute: `npm install --legacy-peer-deps`.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nativevisioncamera",
   "widgetName": "NativeVisionCamera",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Designed from the ground up to provide all features a camera app should have. You have full control over what device is used, and can even configure options such as frame rate, colorspace and more.",
   "copyright": "Groen.dev",
   "author": "Marcus Groen",
@@ -25,19 +25,19 @@
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "10.18.0",
     "@types/big.js": "6.2.2",
-    "@types/react-native-vector-icons": "6.4.14",
     "eslint": "8.49.0",
-    "patch-package": "8.0.0"
+    "patch-package": "8.0.0",
+    "react-native-safe-area-context": "5.7.0",
+    "react-native-svg": "15.15.4"
   },
   "dependencies": {
+    "@mdi/js": "7.4.47",
     "@react-native-community/blur": "4.4.1",
     "@react-navigation/native": "6.1.18",
     "react-native-gesture-handler": "2.20.2",
     "react-native-mmkv": "2.12.2",
     "react-native-reanimated": "1.13.1",
-    "react-native-static-safe-area-insets": "2.2.0",
-    "react-native-vector-icons": "10.2.0",
-    "react-native-vision-camera": "4.6.4"
+    "react-native-vision-camera": "4.7.3"
   },
   "overrides": {
     "react": "18.2.0",

src/Constants.ts

@@ -1,30 +1,31 @@
-import { Dimensions, Platform } from 'react-native';
-import StaticSafeAreaInsets from 'react-native-static-safe-area-insets';
+import type { EdgeInsets } from "react-native-safe-area-context";
 
 export const CONTENT_SPACING = 15;
 
-const SAFE_BOTTOM =
-  Platform.select({
-    ios: StaticSafeAreaInsets.safeAreaInsetsBottom,
-  }) ?? 0;
-
-export const SAFE_AREA_PADDING = {
-  paddingLeft: StaticSafeAreaInsets.safeAreaInsetsLeft + CONTENT_SPACING,
-  paddingTop: StaticSafeAreaInsets.safeAreaInsetsTop + CONTENT_SPACING,
-  paddingRight: StaticSafeAreaInsets.safeAreaInsetsRight + CONTENT_SPACING,
-  paddingBottom: SAFE_BOTTOM + CONTENT_SPACING,
-};
-
 // The maximum zoom _factor_ you should be able to zoom in
 export const MAX_ZOOM_FACTOR = 10;
 
-export const SCREEN_WIDTH = Dimensions.get('window').width;
-export const SCREEN_HEIGHT = Platform.select<number>({
-  android: Dimensions.get('screen').height - StaticSafeAreaInsets.safeAreaInsetsBottom,
-  ios: Dimensions.get('window').height,
-}) as number;
-
 // Button sizes
 export const BUTTON_SIZE = 40;
 export const CAPTURE_BUTTON_SIZE = 78;
-export const BUTTON_ICON_SIZE = 24;
+export const BUTTON_ICON_SIZE = 24;
+
+export interface SafeAreaPadding {
+    paddingLeft: number;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+}
+
+/**
+ * Padding that keeps the controls clear of the safe area (status bar, notch, navigation bar).
+ * Takes the insets from react-native-safe-area-context, which ships with every Mendix native template.
+ */
+export function getSafeAreaPadding(insets: EdgeInsets): SafeAreaPadding {
+    return {
+        paddingLeft: insets.left + CONTENT_SPACING,
+        paddingTop: insets.top + CONTENT_SPACING,
+        paddingRight: insets.right + CONTENT_SPACING,
+        paddingBottom: insets.bottom + CONTENT_SPACING
+    };
+}