Skip to content

Commit 8efa87e

Browse files
Safe area view conditional edges (#275)
2 parents 3a0f4a5 + 56d8302 commit 8efa87e

File tree

4 files changed

+87
-4
lines changed

4 files changed

+87
-4
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"dependencies": {
2222
"@mendix/piw-native-utils-internal": "*",
2323
"@mendix/piw-utils-internal": "*",
24+
"@react-navigation/bottom-tabs": "6.6.1",
2425
"react-native-safe-area-context": "5.2.0"
2526
},
2627
"devDependencies": {

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,28 @@
11
import { createElement } from "react";
2-
import { View } from "react-native";
32
import { flattenStyles } from "@mendix/piw-native-utils-internal";
43
import { SafeAreaViewStyle, defaultSafeAreaViewStyle } from "./ui/Styles";
54
import { SafeAreaViewProps } from "../typings/SafeAreaViewProps";
65
import { SafeAreaView as SafeAreaViewComponent } from "react-native-safe-area-context";
6+
import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
7+
import { View } from "react-native";
8+
9+
export function useSafeBottomTabBarHeight(): number {
10+
try {
11+
const height = useBottomTabBarHeight();
12+
return height;
13+
} catch (e) {
14+
return 0;
15+
}
16+
}
717

818
export const SafeAreaView = (props: SafeAreaViewProps<SafeAreaViewStyle>): JSX.Element => {
919
const styles = flattenStyles(defaultSafeAreaViewStyle, props.style);
20+
const tabBarHeight = useSafeBottomTabBarHeight();
1021

22+
const isBottomBarActive = tabBarHeight > 0;
1123
return (
1224
<SafeAreaViewComponent
13-
edges={["top", "left", "right"]}
25+
edges={isBottomBarActive ? ["top", "left", "right"] : undefined}
1426
style={{ flex: 1, ...{ backgroundColor: styles.container.backgroundColor } }}
1527
pointerEvents={"box-none"}
1628
testID={props.name}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import { SafeAreaViewStyle } from "../ui/Styles";
66
import { Text } from "react-native";
77
import { SafeAreaProvider } from "react-native-safe-area-context";
88

9+
jest.mock("@react-navigation/bottom-tabs", () => ({
10+
useBottomTabBarHeight: jest.fn(() => 50)
11+
}));
12+
913
describe("Safe area view", () => {
1014
let defaultProps: SafeAreaViewProps<SafeAreaViewStyle>;
1115

yarn.lock

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3222,6 +3222,35 @@ __metadata:
32223222
languageName: node
32233223
linkType: hard
32243224

3225+
"@react-navigation/bottom-tabs@npm:6.6.1":
3226+
version: 6.6.1
3227+
resolution: "@react-navigation/bottom-tabs@npm:6.6.1"
3228+
dependencies:
3229+
"@react-navigation/elements": "npm:^1.3.31"
3230+
color: "npm:^4.2.3"
3231+
warn-once: "npm:^0.1.0"
3232+
peerDependencies:
3233+
"@react-navigation/native": ^6.0.0
3234+
react: "*"
3235+
react-native: "*"
3236+
react-native-safe-area-context: ">= 3.0.0"
3237+
react-native-screens: ">= 3.0.0"
3238+
checksum: 10/572f67c1ea26ac52a0c599064957ec6ac5cd0eee810d2e3cd5b4f4beb1016fbd5c5e8eb54c4d62836e1afe90c5ef922b31a288f41e0c442123dcfc417aa8fd7f
3239+
languageName: node
3240+
linkType: hard
3241+
3242+
"@react-navigation/elements@npm:^1.3.31":
3243+
version: 1.3.31
3244+
resolution: "@react-navigation/elements@npm:1.3.31"
3245+
peerDependencies:
3246+
"@react-navigation/native": ^6.0.0
3247+
react: "*"
3248+
react-native: "*"
3249+
react-native-safe-area-context: ">= 3.0.0"
3250+
checksum: 10/379b3657300f9ab8043979f1ecaea95dce96253903db8d6954468e39dc7cf0710cc08345fa6625071a1505b6442a395e0e20bde39c0b997fd90fea370275fc08
3251+
languageName: node
3252+
linkType: hard
3253+
32253254
"@rollup/plugin-alias@npm:^3.1.5":
32263255
version: 3.1.9
32273256
resolution: "@rollup/plugin-alias@npm:3.1.9"
@@ -5857,7 +5886,7 @@ __metadata:
58575886
languageName: node
58585887
linkType: hard
58595888

5860-
"color-name@npm:~1.1.4":
5889+
"color-name@npm:^1.0.0, color-name@npm:~1.1.4":
58615890
version: 1.1.4
58625891
resolution: "color-name@npm:1.1.4"
58635892
checksum: 10/b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610
@@ -5880,6 +5909,26 @@ __metadata:
58805909
languageName: unknown
58815910
linkType: soft
58825911

5912+
"color-string@npm:^1.9.0":
5913+
version: 1.9.1
5914+
resolution: "color-string@npm:1.9.1"
5915+
dependencies:
5916+
color-name: "npm:^1.0.0"
5917+
simple-swizzle: "npm:^0.2.2"
5918+
checksum: 10/72aa0b81ee71b3f4fb1ac9cd839cdbd7a011a7d318ef58e6cb13b3708dca75c7e45029697260488709f1b1c7ac4e35489a87e528156c1e365917d1c4ccb9b9cd
5919+
languageName: node
5920+
linkType: hard
5921+
5922+
"color@npm:^4.2.3":
5923+
version: 4.2.3
5924+
resolution: "color@npm:4.2.3"
5925+
dependencies:
5926+
color-convert: "npm:^2.0.1"
5927+
color-string: "npm:^1.9.0"
5928+
checksum: 10/b23f5e500a79ea22428db43d1a70642d983405c0dd1f95ef59dbdb9ba66afbb4773b334fa0b75bb10b0552fd7534c6b28d4db0a8b528f91975976e70973c0152
5929+
languageName: node
5930+
linkType: hard
5931+
58835932
"colord@npm:^2.9.1":
58845933
version: 2.9.3
58855934
resolution: "colord@npm:2.9.3"
@@ -9190,6 +9239,13 @@ __metadata:
91909239
languageName: node
91919240
linkType: hard
91929241

9242+
"is-arrayish@npm:^0.3.1":
9243+
version: 0.3.2
9244+
resolution: "is-arrayish@npm:0.3.2"
9245+
checksum: 10/81a78d518ebd8b834523e25d102684ee0f7e98637136d3bdc93fd09636350fa06f1d8ca997ea28143d4d13cb1b69c0824f082db0ac13e1ab3311c10ffea60ade
9246+
languageName: node
9247+
linkType: hard
9248+
91939249
"is-async-function@npm:^2.0.0":
91949250
version: 2.1.1
91959251
resolution: "is-async-function@npm:2.1.1"
@@ -15272,6 +15328,7 @@ __metadata:
1527215328
"@mendix/piw-native-utils-internal": "npm:*"
1527315329
"@mendix/piw-utils-internal": "npm:*"
1527415330
"@mendix/pluggable-widgets-tools": "npm:~10.0.1"
15331+
"@react-navigation/bottom-tabs": "npm:6.6.1"
1527515332
eslint: "npm:^7.32.0"
1527615333
react-native-safe-area-context: "npm:5.2.0"
1527715334
languageName: unknown
@@ -15706,6 +15763,15 @@ __metadata:
1570615763
languageName: node
1570715764
linkType: hard
1570815765

15766+
"simple-swizzle@npm:^0.2.2":
15767+
version: 0.2.2
15768+
resolution: "simple-swizzle@npm:0.2.2"
15769+
dependencies:
15770+
is-arrayish: "npm:^0.3.1"
15771+
checksum: 10/c6dffff17aaa383dae7e5c056fbf10cf9855a9f79949f20ee225c04f06ddde56323600e0f3d6797e82d08d006e93761122527438ee9531620031c08c9e0d73cc
15772+
languageName: node
15773+
linkType: hard
15774+
1570915775
"sisteransi@npm:^1.0.5":
1571015776
version: 1.0.5
1571115777
resolution: "sisteransi@npm:1.0.5"
@@ -17612,7 +17678,7 @@ __metadata:
1761217678
languageName: node
1761317679
linkType: hard
1761417680

17615-
"warn-once@npm:0.1.1":
17681+
"warn-once@npm:0.1.1, warn-once@npm:^0.1.0":
1761617682
version: 0.1.1
1761717683
resolution: "warn-once@npm:0.1.1"
1761817684
checksum: 10/e6a5a1f5a8dba7744399743d3cfb571db4c3947897875d4962a7c5b1bf2195ab4518c838cb4cea652e71729f21bba2e98dc75686f5fccde0fabbd894e2ed0c0d

0 commit comments

Comments
 (0)