Moo 1864/safe area view migration (#267)

UrazAkgultan · web-flow · commit 3a0f4a5b1c00 · 2025-06-11T11:06:59.000+02:00
diff --git a/packages/jsActions/mobile-resources-native/package.json b/packages/jsActions/mobile-resources-native/package.json
@@ -54,4 +54,4 @@
     "rimraf": "^4.4.1",
     "rollup": "^2.79.2"
   }
-}
+}
diff --git a/packages/pluggableWidgets/safe-area-view-native/CHANGELOG.md b/packages/pluggableWidgets/safe-area-view-native/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+-   We fixed the issue where the header is going outside of page in some android versions.
+
 ## [3.0.1] - 2025-3-18
 
 ## Fixed
diff --git a/packages/pluggableWidgets/safe-area-view-native/package.json b/packages/pluggableWidgets/safe-area-view-native/package.json
@@ -1,7 +1,7 @@
 {
   "name": "safe-area-view-native",
   "widgetName": "SafeAreaView",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,7 +20,8 @@
   },
   "dependencies": {
     "@mendix/piw-native-utils-internal": "*",
-    "@mendix/piw-utils-internal": "*"
+    "@mendix/piw-utils-internal": "*",
+    "react-native-safe-area-context": "5.2.0"
   },
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "~10.0.1",
diff --git a/packages/pluggableWidgets/safe-area-view-native/src/SafeAreaView.tsx b/packages/pluggableWidgets/safe-area-view-native/src/SafeAreaView.tsx
@@ -1,22 +1,23 @@
 import { createElement } from "react";
-import { SafeAreaView as ReactSaveAreaView, View } from "react-native";
+import { View } from "react-native";
 import { flattenStyles } from "@mendix/piw-native-utils-internal";
-
 import { SafeAreaViewStyle, defaultSafeAreaViewStyle } from "./ui/Styles";
 import { SafeAreaViewProps } from "../typings/SafeAreaViewProps";
+import { SafeAreaView as SafeAreaViewComponent } from "react-native-safe-area-context";
 
 export const SafeAreaView = (props: SafeAreaViewProps<SafeAreaViewStyle>): JSX.Element => {
     const styles = flattenStyles(defaultSafeAreaViewStyle, props.style);
 
     return (
-        <ReactSaveAreaView
+        <SafeAreaViewComponent
+            edges={["top", "left", "right"]}
             style={{ flex: 1, ...{ backgroundColor: styles.container.backgroundColor } }}
             pointerEvents={"box-none"}
             testID={props.name}
         >
             <View style={styles.container} pointerEvents={"box-none"}>
                 {props.content}
             </View>
-        </ReactSaveAreaView>
+        </SafeAreaViewComponent>
     );
 };
diff --git a/packages/pluggableWidgets/safe-area-view-native/src/__tests__/SafeAreaView.spec.tsx b/packages/pluggableWidgets/safe-area-view-native/src/__tests__/SafeAreaView.spec.tsx
@@ -4,6 +4,7 @@ import { SafeAreaView } from "../SafeAreaView";
 import { SafeAreaViewProps } from "../../typings/SafeAreaViewProps";
 import { SafeAreaViewStyle } from "../ui/Styles";
 import { Text } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 describe("Safe area view", () => {
     let defaultProps: SafeAreaViewProps<SafeAreaViewStyle>;
@@ -18,14 +19,20 @@ describe("Safe area view", () => {
 
     it("renders with content", () => {
         const component = render(
-            <SafeAreaView name={defaultProps.name} style={defaultProps.style} content={defaultProps.content} />
+            <SafeAreaProvider>
+                <SafeAreaView name={defaultProps.name} style={defaultProps.style} content={defaultProps.content} />
+            </SafeAreaProvider>
         );
         expect(component.toJSON()).toMatchSnapshot();
     });
 
     it("renders without content", () => {
         delete defaultProps.content;
-        const component = render(<SafeAreaView {...defaultProps} />);
+        const component = render(
+            <SafeAreaProvider>
+                <SafeAreaView {...defaultProps} />
+            </SafeAreaProvider>
+        );
         expect(component.toJSON()).toMatchSnapshot();
     });
 
@@ -36,7 +43,11 @@ describe("Safe area view", () => {
             },
             { container: { backgroundColor: "green" } }
         ];
-        const component = render(<SafeAreaView {...defaultProps} />);
+        const component = render(
+            <SafeAreaProvider>
+                <SafeAreaView {...defaultProps} />
+            </SafeAreaProvider>
+        );
         expect(component.toJSON()).toMatchSnapshot();
     });
 });
diff --git a/packages/pluggableWidgets/safe-area-view-native/src/__tests__/__snapshots__/SafeAreaView.spec.tsx.snap b/packages/pluggableWidgets/safe-area-view-native/src/__tests__/__snapshots__/SafeAreaView.spec.tsx.snap
@@ -1,76 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Safe area view renders with content 1`] = `
-<View
-  pointerEvents="box-none"
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
-    {
-      "backgroundColor": undefined,
-      "flex": 1,
-    }
-  }
-  testID="safe-area-view-test"
->
-  <View
-    pointerEvents="box-none"
-    style={
+    [
       {
         "flex": 1,
-      }
-    }
-  >
-    <Text>
-      Content
-    </Text>
-  </View>
-</View>
+      },
+      undefined,
+    ]
+  }
+/>
 `;
 
 exports[`Safe area view renders with custom styling 1`] = `
-<View
-  pointerEvents="box-none"
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
-    {
-      "backgroundColor": "green",
-      "flex": 1,
-    }
-  }
-  testID="safe-area-view-test"
->
-  <View
-    pointerEvents="box-none"
-    style={
+    [
       {
-        "backgroundColor": "green",
         "flex": 1,
-      }
-    }
-  >
-    <Text>
-      Content
-    </Text>
-  </View>
-</View>
+      },
+      undefined,
+    ]
+  }
+/>
 `;
 
 exports[`Safe area view renders without content 1`] = `
-<View
-  pointerEvents="box-none"
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
-    {
-      "backgroundColor": undefined,
-      "flex": 1,
-    }
-  }
-  testID="safe-area-view-test"
->
-  <View
-    pointerEvents="box-none"
-    style={
+    [
       {
         "flex": 1,
-      }
-    }
-  />
-</View>
+      },
+      undefined,
+    ]
+  }
+/>
 `;
diff --git a/packages/pluggableWidgets/safe-area-view-native/src/package.xml b/packages/pluggableWidgets/safe-area-view-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="SafeAreaView" version="3.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="SafeAreaView" version="3.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="SafeAreaView.xml" />
         </widgetFiles>
diff --git a/yarn.lock b/yarn.lock
@@ -14317,6 +14317,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-safe-area-context@npm:5.2.0":
+  version: 5.2.0
+  resolution: "react-native-safe-area-context@npm:5.2.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10/0972d6f1e2485b71c148aeabaf9f1bfbc533549c66de7d0ea617f92df0024646324c38dc9062ea0392761b72b0f7b6e605a784c09addce61e105e6737bbde7b0
+  languageName: node
+  linkType: hard
+
 "react-native-schedule-exact-alarm-permission@npm:^0.1.3":
   version: 0.1.5
   resolution: "react-native-schedule-exact-alarm-permission@npm:0.1.5"
@@ -15263,6 +15273,7 @@ __metadata:
     "@mendix/piw-utils-internal": "npm:*"
     "@mendix/pluggable-widgets-tools": "npm:~10.0.1"
     eslint: "npm:^7.32.0"
+    react-native-safe-area-context: "npm:5.2.0"
   languageName: unknown
   linkType: soft
 

Original file line number	Diff line number	Diff line change
`@@ -54,4 +54,4 @@`
`54`	`54`	`"rimraf": "^4.4.1",`
`55`	`55`	`"rollup": "^2.79.2"`
`56`	`56`	`}`
`57`		`-}`
	`57`	`+}`