MOO-1598 - main | fix: replaced safe area view package from another reliable third party (#211)

Author: UrazAkgultan

packages/pluggableWidgets/safe-area-view-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## Fixed
+
+-   We fixed the issue where the user closed popup, safe area view wasn't working properly.
+
 ## [2.3.0] - 2024-12-3
 
 ### Changed

packages/pluggableWidgets/safe-area-view-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "safe-area-view-native",
   "widgetName": "SafeAreaView",
-  "version": "2.3.0",
+  "version": "3.0.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": "4.11.0"
   },
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "~10.0.1",

packages/pluggableWidgets/safe-area-view-native/src/SafeAreaView.tsx

@@ -1,5 +1,6 @@
 import { createElement } from "react";
-import { SafeAreaView as ReactSaveAreaView, View } from "react-native";
+import { View } from "react-native";
+import { SafeAreaView as ReactSaveAreaView } from "react-native-safe-area-context";
 import { flattenStyles } from "@mendix/piw-native-utils-internal";
 
 import { SafeAreaViewStyle, defaultSafeAreaViewStyle } from "./ui/Styles";

packages/pluggableWidgets/safe-area-view-native/src/__tests__/__snapshots__/SafeAreaView.spec.tsx.snap

@@ -1,7 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Safe area view renders with content 1`] = `
-<View
+<RNCSafeAreaView
+  edges={
+    {
+      "bottom": "additive",
+      "left": "additive",
+      "right": "additive",
+      "top": "additive",
+    }
+  }
   pointerEvents="box-none"
   style={
     {
@@ -23,11 +31,19 @@ exports[`Safe area view renders with content 1`] = `
       Content
     </Text>
   </View>
-</View>
+</RNCSafeAreaView>
 `;
 
 exports[`Safe area view renders with custom styling 1`] = `
-<View
+<RNCSafeAreaView
+  edges={
+    {
+      "bottom": "additive",
+      "left": "additive",
+      "right": "additive",
+      "top": "additive",
+    }
+  }
   pointerEvents="box-none"
   style={
     {
@@ -50,11 +66,19 @@ exports[`Safe area view renders with custom styling 1`] = `
       Content
     </Text>
   </View>
-</View>
+</RNCSafeAreaView>
 `;
 
 exports[`Safe area view renders without content 1`] = `
-<View
+<RNCSafeAreaView
+  edges={
+    {
+      "bottom": "additive",
+      "left": "additive",
+      "right": "additive",
+      "top": "additive",
+    }
+  }
   pointerEvents="box-none"
   style={
     {
@@ -72,5 +96,5 @@ exports[`Safe area view renders without content 1`] = `
       }
     }
   />
-</View>
+</RNCSafeAreaView>
 `;

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

yarn.lock

@@ -16031,6 +16031,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-safe-area-context@npm:4.11.0":
+  version: 4.11.0
+  resolution: "react-native-safe-area-context@npm:4.11.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10/f2e616ad3087ebf1ad34f90f4eadc2d6865d3d56bba83bcfb9d04020b4344d892e347b7f55dcd996c4d2edf21b589a5ce710a52e62a7bd86597ed34d130599b2
+  languageName: node
+  linkType: hard
+
 "react-native-schedule-exact-alarm-permission@npm:^0.1.3":
   version: 0.1.4
   resolution: "react-native-schedule-exact-alarm-permission@npm:0.1.4"
@@ -16994,6 +17004,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:4.11.0"
   languageName: unknown
   linkType: soft