[MOO-2502] Upgrade react native to v0.88

TEMP-REVERT-BEFORE-MERGE.md

@@ -0,0 +1,33 @@
+# TEMPORARY: revert before merging the React Native 0.88 upgrade
+
+To test the React Native 0.88 upgrade, two dependencies are installed from tarballs in `temp-vendor/`, packed from
+unreleased branches:
+
+-   `@mendix/pluggable-widgets-tools` from
+    [`MxKevinBeqo/widgets-tools#moo/MOO-2499-rn-088`](https://github.com/MxKevinBeqo/widgets-tools/tree/moo/MOO-2499-rn-088)
+    (commit `bfb3b44`), instead of npm.
+-   `mendix-native` from [`mendix/mendix-native#moo/MOO-2500-rn-0.88`](https://github.com/mendix/mendix-native/tree/moo/MOO-2500-rn-0.88)
+    (commit `76aba2e`, version 0.6.2), instead of the
+    [v0.6.0 release](https://github.com/mendix/mendix-native/releases/tag/v0.6.0) that `video-player-native`,
+    `mobile-resources-native` and `nanoflow-actions-native` depend on.
+
+Once versions with React Native 0.88 support are released, undo the following and delete this file.
+
+1. `package.json` → `pnpm.overrides`:
+    - Set `@mendix/pluggable-widgets-tools` back to the released version (it was `11.12.0` before this change) instead
+      of `file:temp-vendor/mendix-pluggable-widgets-tools-11.15.0-moo-2499-rn-088-bfb3b44.tgz`.
+    - Remove the `mendix-native` override, and point the `mendix-native` dependency of the three packages above at the
+      new release.
+2. Delete the `temp-vendor/` folder.
+3. Run `pnpm install` to update `pnpm-lock.yaml`.
+
+## Why tarballs and not git dependencies
+
+CI installs with `pnpm install --frozen-lockfile --ignore-scripts`. A git dependency only gets its compiled output from
+its `prepare`/`prepack` script, which `--ignore-scripts` skips, so every widget build failed with
+`Cannot find module '../dist/commands/audit.js'`. The tarballs ship their compiled output prebuilt, like the published
+packages. To pick up a newer commit of a branch, repack it from a clean checkout of that commit, replace the file and
+update the override:
+
+-   widgets-tools: `pnpm install --frozen-lockfile`, then `pnpm pack` in `packages/pluggable-widgets-tools`.
+-   mendix-native: `yarn install --immutable`, `yarn prepare` and `yarn pack`, the same steps as its release workflow.

configs/e2e/native_dependencies.json

@@ -11,7 +11,7 @@
     "@react-native-async-storage/async-storage": "2.2.0",
     "react-native-vision-camera": "4.7.3",
     "react-native-view-shot": "5.1.0",
-    "react-native-blob-util": "0.24.7",
+    "react-native-blob-util": "0.24.11",
     "react-native-file-viewer-turbo": "0.7.4",
     "react-native-localize": "3.7.0",
     "react-native-image-picker": "7.2.3",

configs/jsactions/rollup.config.mjs

@@ -31,10 +31,11 @@ export default async args => {
         sourceMap: false,
         inlineSources: false,
         target: "es2019",
-        types: ["mendix-client", "react-native"],
+        types: ["mendix-client"],
         allowSyntheticDefaultImports: true,
         compilerOptions: {
             newLine: "CRLF",
+            moduleResolution: "bundler",
             // `react-native-nitro-geolocation` ships no compiled JS; its entry points are `.tsx`
             // (`main: "src/index"`, `browser: "src/index.web.tsx"`). The TS plugin therefore needs
             // `jsx` set to parse those `.tsx` files, otherwise the build fails with

package.json

@@ -45,16 +45,17 @@
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@react-native/babel-preset": "0.84.1",
+    "@react-native/babel-preset": "0.88.0",
+    "@react-native/jest-preset": "0.88.0",
     "@testing-library/react-native": "^13.3.3",
     "@types/big.js": "^6.2.2",
     "@types/concurrently": "^6.4.0",
     "@types/enzyme": "^3.10.19",
     "@types/jasmine": "^3.10.19",
     "@types/mime": "^2.0.3",
     "@types/node": "^20.19.37",
-    "@types/react": "~19.2.14",
-    "@types/react-dom": "~19.2.3",
+    "@types/react": "~19.3.0",
+    "@types/react-dom": "~19.3.0",
     "@types/react-test-renderer": "~19.1.0",
     "@types/shelljs": "^0.8.17",
     "@types/xml2js": "^0.4.14",
@@ -66,7 +67,7 @@
     "lint-staged": "^11.2.6",
     "mendix-client": "^7.15.8",
     "pretty-quick": "^3.3.1",
-    "react-dom": "19.2.3",
+    "react-dom": "19.3.0",
     "recursive-copy": "^2.0.14",
     "ts-node": "^10.9.2"
   },
@@ -80,20 +81,21 @@
   },
   "pnpm": {
     "overrides": {
-      "@mendix/pluggable-widgets-tools": "11.12.0",
+      "@mendix/pluggable-widgets-tools": "file:temp-vendor/mendix-pluggable-widgets-tools-11.15.0-moo-2499-rn-088-bfb3b44.tgz",
+      "mendix-native": "file:temp-vendor/mendix-native-0.6.2-moo-2500-rn-0.88-76aba2e.tgz",
       "@rollup/plugin-typescript": "12.3.0",
       "mendix": "11.8.0",
       "eslint": "9.39.4",
-      "react": "19.2.3",
-      "react-dom": "19.2.3",
-      "react-native": "0.84.1",
-      "@types/react": "~19.2.14",
-      "@types/react-dom": "~19.2.3",
+      "react": "19.3.0",
+      "react-dom": "19.3.0",
+      "react-native": "0.88.0",
+      "@types/react": "~19.3.0",
+      "@types/react-dom": "~19.3.0",
       "@prettier/plugin-xml": "2.2.0",
       "cheerio": "1.0.0-rc.12",
       "typescript": "~5.9.3",
       "rollup": "4.30.1",
-      "react-test-renderer": "19.2.3",
+      "react-test-renderer": "19.3.0",
       "@xmldom/xmldom": ">=0.8.13",
       "flatted": ">=3.4.2",
       "immutable": ">=5.1.5",
@@ -103,10 +105,6 @@
       "svgo": ">=2.8.1",
       "undici": ">=6.24.0",
       "lodash": ">=4.18.0"
-    },
-    "patchedDependencies": {
-      "react-native-gesture-handler@2.31.2": "patches/react-native-gesture-handler+2.31.2.patch",
-      "@mendix/pluggable-widgets-tools@11.12.0": "patches/@mendix__pluggable-widgets-tools@11.12.0.patch"
     }
   },
   "packageManager": "pnpm@10.32.0+sha512.9b2634bb3fed5601c33633f2d92593f506270a3963b8c51d2b2d6a828da615ce4e9deebef9614ccebbc13ac8d3c0f9c9ccceb583c69c8578436fa477dbb20d70"

packages/jsActions/mobile-resources-native/CHANGELOG.md

@@ -15,6 +15,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 -   Fixed an issue where the `TakePicture` and `TakePictureAdvanced` actions failed to capture photos on Android.
 -   Fixed an issue where the `TakePicture` and `TakePictureAdvanced` actions did not properly clean up temporary files.
 -   Replaced @notifee/react-native with react-native-notify-kit library.
+-   Updated react-native from version v0.84.1 to v0.88.0.
+-   Updated react-native-blob-util from version v0.24.7 to v0.24.11.
+-   The [backgroundColor], [translucent] and [networkActivityIndicatorVisible] parameters of the Change status bar action no longer have any effect, because react-native v0.88 removed support for them.
 
 ### Added
 

packages/jsActions/mobile-resources-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mobile-resources-native",
   "moduleName": "Native Mobile Resources",
-  "version": "12.2.0",
+  "version": "13.0.0",
   "license": "Apache-2.0",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "repository": {
@@ -36,7 +36,7 @@
     "fbjs": "3.0.4",
     "mendix-native": "https://github.com/mendix/mendix-native/releases/download/v0.6.0/mendix-native-v0.6.0.tgz",
     "mime": "3.0.0",
-    "react-native-blob-util": "0.24.7",
+    "react-native-blob-util": "0.24.11",
     "react-native-device-info": "15.0.2",
     "react-native-file-viewer-turbo": "0.7.4",
     "react-native-image-picker": "7.2.3",

packages/jsActions/mobile-resources-native/src/platform/ChangeStatusBar.ts

@@ -5,7 +5,7 @@
 // - the code between BEGIN USER CODE and END USER CODE
 // - the code between BEGIN EXTRA CODE and END EXTRA CODE
 // Other code you write will be lost the next time you deploy the project.
-import { Platform, StatusBar, StatusBarAnimation, StatusBarStyle } from "react-native";
+import { StatusBar, StatusBarAnimation, StatusBarStyle } from "react-native";
 
 // BEGIN EXTRA CODE
 // END EXTRA CODE
@@ -41,16 +41,12 @@ export async function ChangeStatusBar(
         StatusBar.setHidden(hidden, animateHideShow);
     }
 
-    if (backgroundColor && Platform.OS === "android") {
-        StatusBar.setBackgroundColor(backgroundColor, animateChanges);
-    }
-
-    if (translucent !== undefined && Platform.OS === "android") {
-        StatusBar.setTranslucent(translucent);
-    }
-
-    if (networkActivityIndicatorVisible && Platform.OS === "ios") {
-        StatusBar.setNetworkActivityIndicatorVisible(networkActivityIndicatorVisible);
+    // React Native 0.88 removed the status bar background color, translucency and network activity
+    // indicator APIs, as apps are always rendered edge-to-edge. These parameters no longer have any effect.
+    if (backgroundColor || translucent || networkActivityIndicatorVisible) {
+        console.warn(
+            "ChangeStatusBar: the 'backgroundColor', 'translucent' and 'networkActivityIndicatorVisible' parameters are no longer supported and will be ignored."
+        );
     }
 
     return Promise.resolve();

packages/jsActions/mobile-resources-native/src/tsconfig.json

@@ -4,8 +4,8 @@
         "outDir": "dist",
         "target": "es2017",
         "lib": ["es2017", "DOM"],
-        "types": ["mendix-client", "big.js", "react-native"],
-        "moduleResolution": "node",
+        "types": ["mendix-client", "big.js"],
+        "moduleResolution": "bundler",
         "sourceMap": false,
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true,

packages/jsActions/nanoflow-actions-native/CHANGELOG.md

@@ -19,6 +19,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 -   Migrated the geolocation actions from `@react-native-community/geolocation` to `react-native-nitro-geolocation`.
 
+### Changed
+
+-   Updated react-native from version v0.84.1 to v0.88.0.
+-   Updated react-native-nitro-modules from version v0.36.1 to v0.36.2.
+
 ## [7.2.0] Nanoflow Commons - 2026-7-3
 
 -   Close offline database connection before navigating between pages with OpenURL nanoflow action.

packages/jsActions/nanoflow-actions-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nanoflow-actions-native",
   "moduleName": "Nanoflow Commons",
-  "version": "7.3.0",
+  "version": "8.0.0",
   "license": "Apache-2.0",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "repository": {
@@ -30,7 +30,7 @@
     "js-base64": "~3.7.2",
     "mendix-native": "https://github.com/mendix/mendix-native/releases/download/v0.6.0/mendix-native-v0.6.0.tgz",
     "react-native-nitro-geolocation": "1.4.3",
-    "react-native-nitro-modules": "0.36.1",
+    "react-native-nitro-modules": "0.36.2",
     "react-native-permissions": "5.5.1",
     "react-native-geocoder": "0.5.0"
   },

packages/jsActions/nanoflow-actions-native/src/tsconfig.json

@@ -4,8 +4,8 @@
         "outDir": "dist",
         "target": "es2017",
         "lib": ["es2017", "DOM"],
-        "types": ["mendix-client", "big.js", "react-native"],
-        "moduleResolution": "node",
+        "types": ["mendix-client", "big.js"],
+        "moduleResolution": "bundler",
         "sourceMap": false,
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true,

packages/modules/atlas-content-native/tsconfig.json

@@ -2,6 +2,7 @@
     "extends": "@mendix/pluggable-widgets-tools/configs/tsconfig.base",
     "compilerOptions": {
         "esModuleInterop": true,
-        "module": "CommonJS"
+        "module": "CommonJS",
+        "moduleResolution": "node"
     }
 }

packages/pluggableWidgets/accordion-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   Updated react-native from version v0.84.1 to v0.88.0.
+
 ## [2.3.0] - 2024-12-3
 
 ### Changed

packages/pluggableWidgets/accordion-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "accordion-native",
   "widgetName": "Accordion",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

packages/pluggableWidgets/accordion-native/src/components/AccordionGroup.tsx

@@ -36,7 +36,7 @@ export function AccordionGroup({
         <View style={style.container}>
             <Pressable
                 style={[style.header.container, icon === "left" && { flexDirection: "row-reverse" }]}
-                onPress={collapsible ? () => onPressGroupHeader(group, index) : null}
+                onPress={collapsible ? () => onPressGroupHeader(group, index) : undefined}
             >
                 {group.headerRenderMode === "text" ? (
                     <Text style={[style.header[group.headerTextRenderMode], { flex: 1 }]}>

packages/pluggableWidgets/accordion-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Accordion" version="2.4.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Accordion" version="2.5.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Accordion.xml" />
         </widgetFiles>

packages/pluggableWidgets/activity-indicator-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   Updated react-native from version v0.84.1 to v0.88.0.
+
 ## [2.3.0] - 2024-12-3
 
 ### Changed

packages/pluggableWidgets/activity-indicator-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "activity-indicator-native",
   "widgetName": "ActivityIndicator",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

packages/pluggableWidgets/activity-indicator-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="ActivityIndicator" version="2.4.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="ActivityIndicator" version="2.5.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="ActivityIndicator.xml" />
         </widgetFiles>

packages/pluggableWidgets/animation-native/CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 
 -   We updated react-native-animatable to 1.4.0.
+-   Updated react-native from version v0.84.1 to v0.88.0.
 
 ## [3.2.0] - 2024-12-3
 

packages/pluggableWidgets/animation-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "animation-native",
   "widgetName": "Animation",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Container for animations",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "author": "Widget Team",

packages/pluggableWidgets/animation-native/src/__tests__/Animation.spec.tsx

@@ -2,10 +2,12 @@ import { Text } from "react-native";
 import { render } from "@testing-library/react-native";
 import { Animation, Props } from "../Animation";
 
-jest.mock("react-native/Libraries/Utilities/Platform", () => ({
-    OS: "ios",
-    select: jest.fn(dict => dict.ios)
-}));
+jest.mock("react-native/Libraries/Utilities/Platform", () => {
+    const Platform = jest.requireActual("react-native/Libraries/Utilities/Platform");
+    Platform.OS = "ios";
+    Platform.default = { ...Platform.default, OS: "ios", select: jest.fn(dict => dict.ios) };
+    return Platform;
+});
 
 const textContent = <Text>Hello</Text>;
 

packages/pluggableWidgets/animation-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Animation" version="3.4.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Animation" version="3.5.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Animation.xml" />
         </widgetFiles>

packages/pluggableWidgets/app-events-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   Updated react-native from version v0.84.1 to v0.88.0.
+
 ## [5.1.0] - 2026-5-15
 
 ### Changed

packages/pluggableWidgets/app-events-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "app-events-native",
   "widgetName": "AppEvents",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

packages/pluggableWidgets/app-events-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="AppEvents" version="5.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="AppEvents" version="5.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="AppEvents.xml" />
         </widgetFiles>

packages/pluggableWidgets/background-gradient-native/CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 
 -   We removed the library of `react-native-linear-gradient` in favor of a react-native View with linear-gradient type background.
+-   Updated react-native from version v0.84.1 to v0.88.0.
 
 ## [2.2.1] - 2026-1-19
 

packages/pluggableWidgets/background-gradient-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "background-gradient-native",
   "widgetName": "BackgroundGradient",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/mendix/native-widgets.git"