[MOO-2436] : Wrapper for react native device info for widgets - Main

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

@@ -17,6 +17,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 -   Fixed iOS orientation change when opening the bottom sheet modal on devices in landscape mode.
 -   Fixed the app becoming unresponsive to touches after a modal bottom sheet (basic or custom rendering) was closed while it was still opening, e.g. when opening and closing it quickly. A sheet whose trigger attribute is set to false while it is opening now also closes once it has opened.
 
+### Changed
+
+-   Removed unnecessary react-native-device-info dependency.
+
 ## [5.3.2] - 2026-8-4
 
 ### Fixed

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

@@ -1,7 +1,7 @@
 {
   "name": "bottom-sheet-native",
   "widgetName": "BottomSheet",
-  "version": "5.3.4",
+  "version": "5.3.5",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -23,7 +23,6 @@
     "@mendix/piw-native-utils-internal": "*",
     "@mendix/piw-utils-internal": "*",
     "@shopify/flash-list": "2.3.1",
-    "react-native-device-info": "15.0.2",
     "react-native-gesture-handler": "2.31.2",
     "react-native-reanimated": "4.3.1",
     "react-native-worklets": "0.8.3"

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

@@ -17,10 +17,6 @@ jest.mock("react-native-reanimated", () => {
     return Reanimated;
 });
 
-jest.mock("react-native-device-info", () => ({
-    getDeviceId: () => "iPhone10,6"
-}));
-
 jest.mock("react-native/Libraries/Utilities/Platform", () => {
     const Platform = jest.requireActual("react-native/Libraries/Utilities/Platform");
     Platform.OS = "ios";

packages/pluggableWidgets/bottom-sheet-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="BottomSheet" version="5.3.4" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="BottomSheet" version="5.3.5" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BottomSheet.xml" />
         </widgetFiles>

packages/pluggableWidgets/bottom-sheet-native/src/ui/Styles.ts

@@ -1,5 +1,4 @@
 import { TextStyle, ViewStyle } from "react-native";
-import DeviceInfo from "react-native-device-info";
 
 export interface ModalItemsStyle {
     container?: ModalItemContainerStyle;
@@ -19,26 +18,3 @@ export interface BottomSheetStyle {
     modal: ViewStyle;
     modalItems: ModalItemsStyle;
 }
-
-const isiPhoneModelWithNotch = (): boolean => {
-    const model = DeviceInfo.getDeviceId();
-    if (model.indexOf("iPhone") !== -1) {
-        switch (model) {
-            case "iPhone10,6": // iPhone X GSM
-            case "iPhone11,2": // iPhone XS
-            case "iPhone11,4": // iPhone XS Max
-            case "iPhone11,6": // iPhone XS Max Global
-            case "iPhone11,8": // Iphone XR
-            case "iPhone12,1": // Iphone 11
-            case "iPhone12,3": // Iphone 11 Pro
-            case "iPhone12,5": // Iphone 11 Pro Max
-                return true;
-            default:
-                return false;
-        }
-    }
-    return false;
-};
-
-export const defaultPaddings = { paddingBottom: isiPhoneModelWithNotch() ? 24 : 0 };
-export const defaultMargins = { marginBottom: isiPhoneModelWithNotch() ? 24 : 0 };

packages/pluggableWidgets/gallery-native/CHANGELOG.md

@@ -15,6 +15,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 -   Added horizontal item sizing options to fit items to their content or divide the Gallery width into configurable columns.
 
+### Changed
+
+-   Migrated device metrics utility to shared package for better code reusability.
+
 ## [2.2.1] - 2026-6-10
 
 ### Changed

packages/pluggableWidgets/gallery-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gallery-native",
   "widgetName": "Gallery",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "A flexible gallery widget that renders columns, rows and layouts.",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "license": "Apache-2.0",
@@ -22,9 +22,9 @@
     "test": "pluggable-widgets-tools test:unit:native"
   },
   "dependencies": {
+    "@mendix/piw-native-utils-internal": "*",
     "@mendix/piw-utils-internal": "*",
-    "@shopify/flash-list": "2.3.1",
-    "react-native-device-info": "15.0.2"
+    "@shopify/flash-list": "2.3.1"
   },
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "*"

packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx

@@ -10,7 +10,7 @@ import {
     useWindowDimensions
 } from "react-native";
 import { ObjectItem, DynamicValue } from "mendix";
-import DeviceInfo from "react-native-device-info";
+import { useDeviceMetrics } from "@mendix/piw-native-utils-internal";
 import { GalleryStyle } from "../ui/Styles";
 import { HorizontalItemSizingEnum, PaginationEnum, ScrollDirectionEnum } from "../../typings/GalleryProps";
 import { isAvailable } from "@mendix/piw-utils-internal";
@@ -39,8 +39,9 @@ export interface GalleryProps<T extends ObjectItem> {
 }
 
 export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElement => {
+    const { isTablet } = useDeviceMetrics();
     const isScrollDirectionVertical = props.scrollDirection === "vertical";
-    const numColumns = DeviceInfo.isTablet() ? props.tabletColumns : props.phoneColumns;
+    const numColumns = isTablet ? props.tabletColumns : props.phoneColumns;
     const firstItemId = props.items?.[0]?.id;
     const lastItemId = props.items?.[props.items.length - 1]?.id;
     const { name, style, itemRenderer } = props;

packages/pluggableWidgets/gallery-native/src/components/__tests__/Gallery.spec.tsx

@@ -3,7 +3,9 @@ import { ObjectItem, GUID, DynamicValue, ValueStatus } from "mendix";
 import { render, fireEvent, act } from "@testing-library/react-native";
 import { Gallery, GalleryProps } from "../Gallery";
 
-jest.mock("react-native-device-info", () => ({ isTablet: jest.fn().mockReturnValue(false) }));
+jest.mock("@mendix/piw-native-utils-internal", () => ({
+    useDeviceMetrics: () => ({ isTablet: false })
+}));
 jest.mock("@shopify/flash-list"); // Mocking FlashList API because it causes issues with the test renderer
 
 const itemWrapperFunction =

packages/pluggableWidgets/gallery-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="Gallery" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Gallery" version="2.3.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Gallery.xml" />
         </widgetFiles>

packages/pluggableWidgets/intro-screen-native/CHANGELOG.md

@@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 -   We fixed an issue where the IntroScreen did not show the slide set by the active slide attribute, and where swiping between slides did not work reliably on slower Android devices.
 
+### Changed
+
+-   Migrated device metrics utility to shared package for better code reusability and removed static iPhone list for notch detection.
+
 ## [4.4.1] - 2026-6-10
 
 ### Changed

packages/pluggableWidgets/intro-screen-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intro-screen-native",
   "widgetName": "IntroScreen",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -22,8 +22,7 @@
     "@mendix/piw-native-utils-internal": "*",
     "@mendix/piw-utils-internal": "*",
     "@react-native-async-storage/async-storage": "2.2.0",
-    "@shopify/flash-list": "2.3.1",
-    "react-native-device-info": "15.0.2"
+    "@shopify/flash-list": "2.3.1"
   },
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "*"

packages/pluggableWidgets/intro-screen-native/src/IntroScreen.tsx

@@ -7,14 +7,14 @@ import { SwipeableContainer } from "./SwipeableContainer";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import deepmerge from "deepmerge";
 import { executeAction } from "@mendix/piw-utils-internal";
+import { useDeviceMetrics } from "@mendix/piw-native-utils-internal";
 
 export function IntroScreen(props: IntroScreenProps<IntroScreenStyle>): JSX.Element {
     const [visible, setVisible] = useState(false);
+    const { hasNotch } = useDeviceMetrics();
+    const notchStyle = hasNotch ? { paginationContainer: { bottom: 22 } } : {};
     const customStyles = props.style ? props.style.filter(o => o != null) : [];
-    const styles =
-        customStyles.length > 0
-            ? deepmerge.all<IntroScreenStyle>([defaultWelcomeScreenStyle, ...customStyles])
-            : defaultWelcomeScreenStyle;
+    const styles = deepmerge.all<IntroScreenStyle>([defaultWelcomeScreenStyle, notchStyle, ...customStyles]);
 
     useEffect(() => {
         let isMounted = true;

packages/pluggableWidgets/intro-screen-native/src/__tests__/IntroScreen.notch.spec.tsx

@@ -6,9 +6,8 @@ import { View } from "react-native";
 import { EditableValueBuilder } from "@mendix/piw-utils-internal";
 import { Big } from "big.js";
 
-jest.mock("react-native-device-info", () => ({
-    hasNotch: jest.fn().mockReturnValue(true),
-    getDeviceId: jest.fn().mockReturnValue("iPhone10,6")
+jest.mock("@mendix/piw-native-utils-internal", () => ({
+    useDeviceMetrics: () => ({ hasNotch: true })
 }));
 
 jest.mock("@react-native-async-storage/async-storage", () => ({

packages/pluggableWidgets/intro-screen-native/src/__tests__/IntroScreen.spec.tsx

@@ -6,9 +6,8 @@ import { View } from "react-native";
 import { EditableValueBuilder } from "@mendix/piw-utils-internal";
 import { Big } from "big.js";
 
-jest.mock("react-native-device-info", () => ({
-    hasNotch: jest.fn(),
-    getDeviceId: jest.fn().mockReturnValue("")
+jest.mock("@mendix/piw-native-utils-internal", () => ({
+    useDeviceMetrics: () => ({ hasNotch: false })
 }));
 
 jest.mock("@react-native-async-storage/async-storage", () => ({
@@ -42,9 +41,8 @@ describe("Intro Screen", () => {
             identifier: ""
         };
 
-        jest.mock("react-native-device-info", () => ({
-            hasNotch: jest.fn(),
-            getDeviceId: jest.fn().mockReturnValue("iPhone")
+        jest.mock("@mendix/piw-native-utils-internal", () => ({
+            useDeviceMetrics: () => ({ hasNotch: false })
         }));
     });
 

packages/pluggableWidgets/intro-screen-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="IntroScreen" version="4.5.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="IntroScreen" version="4.5.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="IntroScreen.xml" />
         </widgetFiles>

packages/pluggableWidgets/intro-screen-native/src/ui/Styles.ts

@@ -1,30 +1,8 @@
 import { Style } from "@mendix/piw-native-utils-internal";
 import { I18nManager, Platform, StyleSheet, TextStyle, ViewStyle } from "react-native";
 import absoluteFillObject = StyleSheet.absoluteFillObject;
-import DeviceInfo from "react-native-device-info";
-
-const isiPhoneModelWithNotch = (): boolean => {
-    const model = DeviceInfo.getDeviceId();
-    if (model.indexOf("iPhone") !== -1) {
-        switch (model) {
-            case "iPhone10,6": // iPhone X GSM
-            case "iPhone11,2": // iPhone XS
-            case "iPhone11,4": // iPhone XS Max
-            case "iPhone11,6": // iPhone XS Max Global
-            case "iPhone11,8": // Iphone XR
-            case "iPhone12,1": // Iphone 11
-            case "iPhone12,3": // Iphone 11 Pro
-            case "iPhone12,5": // Iphone 11 Pro Max
-                return true;
-            default:
-                return false;
-        }
-    }
-    return false;
-};
 
 const isAndroidRTL = I18nManager.isRTL && Platform.OS === "android";
-const isIphoneWithNotch = DeviceInfo.hasNotch() || (Platform.OS === "ios" && isiPhoneModelWithNotch());
 
 const defaultButtonBetweenContainer: ViewStyle = {
     flexDirection: "row",
@@ -91,7 +69,7 @@ export const defaultWelcomeScreenStyle: IntroScreenStyle = {
     },
     paginationContainer: {
         position: "absolute",
-        bottom: isIphoneWithNotch ? 22 : 0,
+        bottom: 0,
         left: 0,
         right: 0,
         justifyContent: "space-between",

packages/tools/piw-native-utils-internal/package.json

@@ -24,6 +24,9 @@
     "prepare": "pnpm build",
     "postinstall": "pnpm build"
   },
+  "dependencies": {
+    "react-native-device-info": "15.0.2"
+  },
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "*",
     "rimraf": "^6.1.2"

packages/tools/piw-native-utils-internal/src/deviceMetrics.ts

@@ -0,0 +1,15 @@
+export interface DeviceMetrics {
+    hasNotch: boolean;
+    isTablet: boolean;
+}
+
+export function useDeviceMetrics(): DeviceMetrics {
+    // Lazy import - only loads react-native-device-info when this function is called
+    // This prevents the module from being bundled during widget build
+    const DeviceInfo = require("react-native-device-info").default;
+
+    return {
+        hasNotch: DeviceInfo.hasNotch(),
+        isTablet: DeviceInfo.isTablet()
+    };
+}

packages/tools/piw-native-utils-internal/src/index.ts

@@ -4,3 +4,4 @@ export { available, toNumber, unavailable } from "./properties";
 export { Slider, SliderProps, RangeSlider, RangeSliderProps, RangeSliderValue } from "./components/Slider";
 export { Bar, BarProps } from "./components/Bar";
 export { Arc, ArcProps, makeArcPath } from "./components/Arc";
+export { useDeviceMetrics, DeviceMetrics } from "./deviceMetrics";