Safe area view conditional edges

Author: Harun.Karahan

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

@@ -21,6 +21,7 @@
   "dependencies": {
     "@mendix/piw-native-utils-internal": "*",
     "@mendix/piw-utils-internal": "*",
+    "@react-navigation/bottom-tabs": "6.6.1",
     "react-native-safe-area-context": "5.2.0"
   },
   "devDependencies": {

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

@@ -1,16 +1,28 @@
 import { createElement } from "react";
-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";
+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={["top", "left", "right"]}
+            edges={isBottomBarActive ? ["top", "left", "right"] : undefined}
             style={{ flex: 1, ...{ backgroundColor: styles.container.backgroundColor } }}
             pointerEvents={"box-none"}
             testID={props.name}

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

@@ -6,6 +6,10 @@ import { SafeAreaViewStyle } from "../ui/Styles";
 import { Text } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 
+jest.mock("@react-navigation/bottom-tabs", () => ({
+    useBottomTabBarHeight: jest.fn(() => 50)
+}));
+
 describe("Safe area view", () => {
     let defaultProps: SafeAreaViewProps<SafeAreaViewStyle>;
 

yarn.lock

@@ -3222,6 +3222,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-navigation/bottom-tabs@npm:6.6.1":
+  version: 6.6.1
+  resolution: "@react-navigation/bottom-tabs@npm:6.6.1"
+  dependencies:
+    "@react-navigation/elements": "npm:^1.3.31"
+    color: "npm:^4.2.3"
+    warn-once: "npm:^0.1.0"
+  peerDependencies:
+    "@react-navigation/native": ^6.0.0
+    react: "*"
+    react-native: "*"
+    react-native-safe-area-context: ">= 3.0.0"
+    react-native-screens: ">= 3.0.0"
+  checksum: 10/572f67c1ea26ac52a0c599064957ec6ac5cd0eee810d2e3cd5b4f4beb1016fbd5c5e8eb54c4d62836e1afe90c5ef922b31a288f41e0c442123dcfc417aa8fd7f
+  languageName: node
+  linkType: hard
+
+"@react-navigation/elements@npm:^1.3.31":
+  version: 1.3.31
+  resolution: "@react-navigation/elements@npm:1.3.31"
+  peerDependencies:
+    "@react-navigation/native": ^6.0.0
+    react: "*"
+    react-native: "*"
+    react-native-safe-area-context: ">= 3.0.0"
+  checksum: 10/379b3657300f9ab8043979f1ecaea95dce96253903db8d6954468e39dc7cf0710cc08345fa6625071a1505b6442a395e0e20bde39c0b997fd90fea370275fc08
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-alias@npm:^3.1.5":
   version: 3.1.9
   resolution: "@rollup/plugin-alias@npm:3.1.9"
@@ -5857,7 +5886,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:~1.1.4":
+"color-name@npm:^1.0.0, color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
   checksum: 10/b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610
@@ -5880,6 +5909,26 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"color-string@npm:^1.9.0":
+  version: 1.9.1
+  resolution: "color-string@npm:1.9.1"
+  dependencies:
+    color-name: "npm:^1.0.0"
+    simple-swizzle: "npm:^0.2.2"
+  checksum: 10/72aa0b81ee71b3f4fb1ac9cd839cdbd7a011a7d318ef58e6cb13b3708dca75c7e45029697260488709f1b1c7ac4e35489a87e528156c1e365917d1c4ccb9b9cd
+  languageName: node
+  linkType: hard
+
+"color@npm:^4.2.3":
+  version: 4.2.3
+  resolution: "color@npm:4.2.3"
+  dependencies:
+    color-convert: "npm:^2.0.1"
+    color-string: "npm:^1.9.0"
+  checksum: 10/b23f5e500a79ea22428db43d1a70642d983405c0dd1f95ef59dbdb9ba66afbb4773b334fa0b75bb10b0552fd7534c6b28d4db0a8b528f91975976e70973c0152
+  languageName: node
+  linkType: hard
+
 "colord@npm:^2.9.1":
   version: 2.9.3
   resolution: "colord@npm:2.9.3"
@@ -9190,6 +9239,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-arrayish@npm:^0.3.1":
+  version: 0.3.2
+  resolution: "is-arrayish@npm:0.3.2"
+  checksum: 10/81a78d518ebd8b834523e25d102684ee0f7e98637136d3bdc93fd09636350fa06f1d8ca997ea28143d4d13cb1b69c0824f082db0ac13e1ab3311c10ffea60ade
+  languageName: node
+  linkType: hard
+
 "is-async-function@npm:^2.0.0":
   version: 2.1.1
   resolution: "is-async-function@npm:2.1.1"
@@ -15272,6 +15328,7 @@ __metadata:
     "@mendix/piw-native-utils-internal": "npm:*"
     "@mendix/piw-utils-internal": "npm:*"
     "@mendix/pluggable-widgets-tools": "npm:~10.0.1"
+    "@react-navigation/bottom-tabs": "npm:6.6.1"
     eslint: "npm:^7.32.0"
     react-native-safe-area-context: "npm:5.2.0"
   languageName: unknown
@@ -15706,6 +15763,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simple-swizzle@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "simple-swizzle@npm:0.2.2"
+  dependencies:
+    is-arrayish: "npm:^0.3.1"
+  checksum: 10/c6dffff17aaa383dae7e5c056fbf10cf9855a9f79949f20ee225c04f06ddde56323600e0f3d6797e82d08d006e93761122527438ee9531620031c08c9e0d73cc
+  languageName: node
+  linkType: hard
+
 "sisteransi@npm:^1.0.5":
   version: 1.0.5
   resolution: "sisteransi@npm:1.0.5"
@@ -17612,7 +17678,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warn-once@npm:0.1.1":
+"warn-once@npm:0.1.1, warn-once@npm:^0.1.0":
   version: 0.1.1
   resolution: "warn-once@npm:0.1.1"
   checksum: 10/e6a5a1f5a8dba7744399743d3cfb571db4c3947897875d4962a7c5b1bf2195ab4518c838cb4cea652e71729f21bba2e98dc75686f5fccde0fabbd894e2ed0c0d