[MOO-1762]: dependency update for new rn architecture (#236)

Author: karahanharunn

configs/e2e/native_dependencies.json

@@ -1,21 +1,21 @@
 {
-    "react-native-maps": "0.31.1",
+    "react-native-maps": "1.14.0",
     "react-native-geocoder": "0.5.0",
     "react-native-device-info": "13.0.0",
     "react-native-action-button": "2.8.5",
     "react-native-material-menu": "1.2.0",
     "react-native-linear-gradient": "2.5.6",
-    "@react-native-community/netinfo": "5.9.7",
+    "@react-native-community/netinfo": "11.4.1",
     "react-native-svg": "15.7.1",
     "react-native-system-navigation-bar": "2.6.3",
     "react-native-video": "5.2.1",
     "@react-native-async-storage/async-storage": "2.0.0",
     "react-native-camera": "3.40.0",
-    "react-native-view-shot": "3.1.2",
-    "react-native-blob-util": "0.16.2",
+    "react-native-view-shot": "4.0.3",
+    "react-native-blob-util": "0.21.2",
     "react-native-file-viewer": "2.1.5",
     "react-native-localize": "3.2.1",
-    "react-native-image-picker": "5.0.1",
+    "react-native-image-picker": "7.2.3",
     "react-native-permissions": "4.1.5",
-    "react-native-webview": "11.26.1"
+    "react-native-webview": "13.13.2"
 }

package.json

@@ -100,7 +100,8 @@
     "react-dom": "18.2.0",
     "react-native": "0.75.4",
     "@prettier/plugin-xml": "2.2.0",
-    "@types/react-native": "0.73.0"
+    "@types/react-native": "0.73.0",
+    "cheerio": "1.0.0-rc.12"
   },
   "packageManager": "[email protected]"
 }

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

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+-   We migrated from react-native-inappbrowser-reborn to @swan-io/react-native-browser to prevent issues for next rn upgrade.
+
+-   We migrated from @react-native-community/cameraroll to @react-native-camera-roll/camera-roll to prevent issues for next rn upgrade.
+
+-   We also updated several dependencies such as react-native-blob-util, react-native-image-picker to their latest version.
+
 ## [9.3.2] Native Mobile Resources - 2025-3-24
 
 ## [5.1.1] Maps

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

@@ -26,16 +26,16 @@
     "release:marketplace": "node ../../../scripts/release/marketplaceRelease.js"
   },
   "dependencies": {
-    "@react-native-community/cameraroll": "4.0.1",
+    "@react-native-camera-roll/camera-roll": "7.4.0",
     "@react-native-community/push-notification-ios": "1.10.1",
     "@react-native-firebase/messaging": "17.3.0",
+    "@swan-io/react-native-browser": "^0.4.1",
     "fbjs": "3.0.4",
     "mime": "3.0.0",
-    "react-native-blob-util": "0.16.2",
+    "react-native-blob-util": "0.21.2",
     "react-native-device-info": "13.0.0",
     "react-native-file-viewer": "2.1.5",
-    "react-native-image-picker": "5.0.1",
-    "react-native-inappbrowser-reborn": "3.4.0",
+    "react-native-image-picker": "7.2.3",
     "react-native-localize": "3.2.1",
     "react-native-permissions": "4.1.5",
     "react-native-push-notification": "8.1.1",

packages/jsActions/mobile-resources-native/src/camera/SaveToPictureLibrary.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 { saveToCameraRoll } from "@react-native-community/cameraroll";
+import { CameraRoll } from "@react-native-camera-roll/camera-roll";
 
 // BEGIN EXTRA CODE
 // END EXTRA CODE
@@ -31,7 +31,13 @@ export async function SaveToPictureLibrary(picture?: mendix.lib.MxObject): Promi
     const changedDate = picture.get("changedDate") as number;
     const url = mx.data.getDocumentUrl(guid, changedDate);
 
-    return saveToCameraRoll(url);
+    // Save the file as a photo to the camera roll.
+    try {
+        const savedUri = await CameraRoll.saveToCameraRoll(url, "auto");
+        return Promise.resolve(savedUri.node.image.uri);
+    } catch (error) {
+        return Promise.reject(error);
+    }
 
     // END USER CODE
 }

packages/jsActions/mobile-resources-native/src/camera/TakePicture.ts

@@ -56,7 +56,7 @@ export async function TakePicture(
     }
 
     // V3 dropped the feature of providing an action sheet so users can decide on which action to take, camera or library.
-    const nativeVersionMajor = NativeModules.ImagePickerManager.showImagePicker ? 2 : 4;
+    const nativeVersionMajor = NativeModules?.ImagePickerManager?.showImagePicker ? 2 : 4;
     const RNPermissions = nativeVersionMajor === 4 ? (await import("react-native-permissions")).default : null;
 
     try {

packages/jsActions/mobile-resources-native/src/camera/TakePictureAdvanced.ts

@@ -62,7 +62,7 @@ export async function TakePictureAdvanced(
     }
 
     // V3 dropped the feature of providing an action sheet so users can decide on which action to take, camera or library.
-    const nativeVersionMajor = NativeModules.ImagePickerManager.showImagePicker ? 2 : 4;
+    const nativeVersionMajor = NativeModules?.ImagePickerManager?.showImagePicker ? 2 : 4;
     const RNPermissions = nativeVersionMajor === 4 ? (await import("react-native-permissions")).default : null;
     const resultObject = await createMxObject("NativeMobileResources.ImageMetaData");
 

packages/jsActions/mobile-resources-native/src/platform/OpenInAppBrowser.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 InAppBrowser, { InAppBrowserOptions } from "react-native-inappbrowser-reborn";
+import { openBrowser } from "@swan-io/react-native-browser";
 
 // BEGIN EXTRA CODE
 // END EXTRA CODE
@@ -25,21 +25,23 @@ export async function OpenInAppBrowser(
 ): Promise<void> {
     // BEGIN USER CODE
     // Documentation https://github.com/proyecto26/react-native-inappbrowser
-
     if (!url) {
-        return Promise.reject(new Error("Input parameter 'Url' is required"));
+        return Promise.reject(new Error("Input parameter 'url' is required"));
     }
 
-    const options: InAppBrowserOptions = {
-        toolbarColor,
-        preferredBarTintColor: toolbarColor,
-        dismissButtonStyle: iosDismissButtonStyle,
-        showTitle: androidShowTitle
+    const options = {
+        barTintColor: toolbarColor, // iOS toolbar color
+        controlTintColor: toolbarColor, // iOS control buttons color
+        dismissButtonStyle: iosDismissButtonStyle, // iOS dismiss button style
+        showTitle: androidShowTitle // Android show title
     };
 
-    await InAppBrowser.open(url, options);
-
-    return Promise.resolve();
+    try {
+        await openBrowser(url, options);
+        return Promise.resolve();
+    } catch (error) {
+        return Promise.reject(error);
+    }
 
     // END USER CODE
 }

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

@@ -36,4 +36,4 @@
     "mendix": "~10.0.9976",
     "rollup": "^2.79.2"
   }
-}
+}

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-community/netinfo from version v5.9.7 to v11.4.1.
+
 ## [4.1.0] - 2024-12-3
 
 ### Changed

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

@@ -1,7 +1,7 @@
 {
   "name": "app-events-native",
   "widgetName": "AppEvents",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@mendix/piw-native-utils-internal": "*",
-    "@react-native-community/netinfo": "5.9.7"
+    "@react-native-community/netinfo": "11.4.1"
   },
   "devDependencies": {
     "@mendix/piw-utils-internal": "*",

packages/pluggableWidgets/app-events-native/src/AppEvents.tsx

@@ -33,7 +33,7 @@ export class AppEvents extends Component<Props> {
         }
 
         if (this.props.onOnlineAction || this.props.onOfflineAction) {
-            this.isConnected = (await NetInfo.fetch()).isConnected;
+            this.isConnected = Boolean((await NetInfo.fetch()).isConnected);
             this.unsubscribeNetworkEventListener = NetInfo.addEventListener(this.onConnectionChangeHandler);
         }
 
@@ -94,7 +94,7 @@ export class AppEvents extends Component<Props> {
             this.lastOnOffline = Date.now();
         }
 
-        this.isConnected = nextState.isConnected;
+        this.isConnected = Boolean(nextState.isConnected);
     }
 }
 

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="4.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="AppEvents" version="5.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="AppEvents.xml" />
         </widgetFiles>

packages/pluggableWidgets/bottom-sheet-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   Rewrote all bottomsheet widgets (customModalSheet, ExpandingDrawer, and NativeBottomSheet) using @gorhom/bottom-sheet.
+
 ## [4.0.1] - 2025-2-7
 
 ### Changed

packages/pluggableWidgets/bottom-sheet-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bottom-sheet-native",
   "widgetName": "BottomSheet",
-  "version": "4.0.1",
+  "version": "5.0.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -19,13 +19,13 @@
     "version": "yarn release"
   },
   "dependencies": {
+    "@gorhom/bottom-sheet": "5.1.1",
     "@mendix/piw-native-utils-internal": "*",
     "@mendix/piw-utils-internal": "*",
-    "react-native-actionsheet": "^2.4.2",
+    "@shopify/flash-list": "1.7.3",
     "react-native-device-info": "13.0.0",
-    "react-native-modal": "^13.0.1",
-    "react-native-reanimated": "^1.0.1",
-    "reanimated-bottom-sheet": "^1.0.0-alpha.19"
+    "react-native-gesture-handler": "2.24.0",
+    "react-native-reanimated": "3.16.1"
   },
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "~10.0.1",

packages/pluggableWidgets/bottom-sheet-native/src/__tests__/BottomSheet.spec.tsx

@@ -15,8 +15,6 @@ jest.mock("react-native/Libraries/Utilities/Platform", () => ({
     select: jest.fn(dict => dict.ios)
 }));
 
-jest.mock("react-native-reanimated", () => jest.requireActual("react-native-reanimated/mock"));
-
 const defaultProps: BottomSheetProps<BottomSheetStyle> = {
     name: "bottom-sheet-test",
     style: [],

packages/pluggableWidgets/bottom-sheet-native/src/__tests__/__snapshots__/BottomSheet.spec.tsx.snap

@@ -103,4 +103,4 @@ exports[`Bottom sheet renders a expanding fullscreen with custom styles 1`] = `
 </View>
 `;
 
-exports[`Bottom sheet renders a native bottom action sheet for ios (Basic modal) 1`] = `null`;
+exports[`Bottom sheet renders a native bottom action sheet for ios (Basic modal) 1`] = `<View />`;