fix: fix safe area overlapping issue with navigation bar (#296)

Author: stelselim

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

@@ -6,7 +6,11 @@ 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.
+-   We fixed the issue where navigation buttons were being overlapped due to improper safe area handling.
+
+## [3.1.0] - 2025-4-25
+
+-   We fixed the issue where the header is going outside of page in some android versions.
 
 ### Changed
 

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

@@ -1,7 +1,7 @@
 {
   "name": "safe-area-view-native",
   "widgetName": "SafeAreaView",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

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

@@ -3,33 +3,18 @@ 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";
-import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
 import { View } from "react-native";
 
-export function useSafeBottomTabBarHeight(): number {
-    try {
-        const height = useBottomTabBarHeight();
-        return height;
-    } catch (e) {
-        return 0;
-    }
-}
-
 export const SafeAreaView = (props: SafeAreaViewProps<SafeAreaViewStyle>): JSX.Element => {
     const styles = flattenStyles(defaultSafeAreaViewStyle, props.style);
-    const tabBarHeight = useSafeBottomTabBarHeight();
 
-    const isBottomBarActive = tabBarHeight > 0;
     return (
-        <SafeAreaViewComponent
-            edges={isBottomBarActive ? ["top", "left", "right"] : undefined}
-            style={{ flex: 1, ...{ backgroundColor: styles.container.backgroundColor } }}
-            pointerEvents={"box-none"}
-            testID={props.name}
-        >
-            <View style={styles.container} pointerEvents={"box-none"}>
-                {props.content}
-            </View>
-        </SafeAreaViewComponent>
+        <View style={{ flex: 1, backgroundColor: styles.container.backgroundColor }}>
+            <SafeAreaViewComponent style={{ flex: 1 }} pointerEvents={"box-none"} testID={props.name}>
+                <View style={styles.container} pointerEvents={"box-none"}>
+                    {props.content}
+                </View>
+            </SafeAreaViewComponent>
+        </View>
     );
 };

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

yarn.lock

@@ -19939,4 +19939,4 @@ __metadata:
     readable-stream: "npm:^3.4.0"
   checksum: 10/57705f3b6d85735c6c64040800b10ee3738720a36492b3ca299603493574f0a4afd2f18f5fc7b5e910e5452cc8add3b4ff908fab5d4b897e109e9db46150cfbc
   languageName: node
-  linkType: hard
+  linkType: hard