Safe area view conditional edges (#274)

Author: karahanharunn

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

@@ -1,7 +1,7 @@
 {
   "name": "safe-area-view-native",
   "widgetName": "SafeAreaView",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -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": "4.11.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}
@@ -20,4 +32,4 @@ export const SafeAreaView = (props: SafeAreaViewProps<SafeAreaViewStyle>): JSX.E
             </View>
         </SafeAreaViewComponent>
     );
-};
+};

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

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

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.0" 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>

yarn.lock

@@ -4301,6 +4301,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"
@@ -7102,7 +7131,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:^1.1.4, color-name@npm:~1.1.4":
+"color-name@npm:^1.0.0, color-name@npm:^1.1.4, color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
   checksum: 10/b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610
@@ -7126,6 +7155,16 @@ __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-support@npm:^1.1.3":
   version: 1.1.3
   resolution: "color-support@npm:1.1.3"
@@ -7135,6 +7174,16 @@ __metadata:
   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"
@@ -10483,6 +10532,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-bigint@npm:^1.0.1":
   version: 1.0.4
   resolution: "is-bigint@npm:1.0.4"
@@ -16995,6 +17051,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:4.11.0"
   languageName: unknown
@@ -17397,6 +17454,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"
@@ -19315,7 +19381,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