|
@@ -23,6 +23,11 @@ export default function NativeSafeAreaView({
|
23
|
23
|
onInsetsChange,
|
24
|
24
|
}: NativeSafeAreaViewProps) {
|
25
|
25
|
React.useEffect(() => {
|
|
26
|
+ // Skip for SSR.
|
|
27
|
+ if (typeof document === 'undefined') {
|
|
28
|
+ return;
|
|
29
|
+ }
|
|
30
|
+
|
26
|
31
|
const element = createContextElement();
|
27
|
32
|
document.body.appendChild(element);
|
28
|
33
|
const onEnd = () => {
|
|
@@ -42,29 +47,41 @@ export default function NativeSafeAreaView({
|
42
|
47
|
// @ts-ignore: missing properties
|
43
|
48
|
onInsetsChange({ nativeEvent: { insets } });
|
44
|
49
|
};
|
45
|
|
- element.addEventListener(SUPPORTED_TRANSITION_EVENT, onEnd);
|
|
50
|
+ element.addEventListener(getSupportedTransitionEvent(), onEnd);
|
46
|
51
|
onEnd();
|
47
|
52
|
return () => {
|
48
|
53
|
document.body.removeChild(element);
|
49
|
|
- element.removeEventListener(SUPPORTED_TRANSITION_EVENT, onEnd);
|
|
54
|
+ element.removeEventListener(getSupportedTransitionEvent(), onEnd);
|
50
|
55
|
};
|
51
|
56
|
}, [onInsetsChange]);
|
52
|
57
|
|
53
|
58
|
return <View style={style}>{children}</View>;
|
54
|
59
|
}
|
55
|
60
|
|
56
|
|
-const SUPPORTED_TRANSITION_EVENT: string = (() => {
|
|
61
|
+let _supportedTransitionEvent: string | null = null;
|
|
62
|
+function getSupportedTransitionEvent(): string {
|
|
63
|
+ if (_supportedTransitionEvent !== null) {
|
|
64
|
+ return _supportedTransitionEvent;
|
|
65
|
+ }
|
57
|
66
|
const element = document.createElement('invalidtype');
|
58
|
67
|
|
|
68
|
+ _supportedTransitionEvent = CSSTransitions.Transition;
|
59
|
69
|
for (const key in CSSTransitions) {
|
60
|
70
|
if (element.style[key] !== undefined) {
|
61
|
|
- return CSSTransitions[key];
|
|
71
|
+ _supportedTransitionEvent = CSSTransitions[key];
|
|
72
|
+ break;
|
62
|
73
|
}
|
63
|
74
|
}
|
64
|
|
- return CSSTransitions.Transition;
|
65
|
|
-})();
|
|
75
|
+ return _supportedTransitionEvent;
|
|
76
|
+}
|
66
|
77
|
|
67
|
|
-const SUPPORTED_ENV: 'constant' | 'env' = (() => {
|
|
78
|
+type CssEnv = 'constant' | 'env';
|
|
79
|
+
|
|
80
|
+let _supportedEnv: CssEnv | null = null;
|
|
81
|
+function getSupportedEnv(): CssEnv {
|
|
82
|
+ if (_supportedEnv !== null) {
|
|
83
|
+ return _supportedEnv;
|
|
84
|
+ }
|
68
|
85
|
// @ts-ignore: Property 'CSS' does not exist on type 'Window'.ts(2339)
|
69
|
86
|
const { CSS } = window;
|
70
|
87
|
if (
|
|
@@ -72,13 +89,15 @@ const SUPPORTED_ENV: 'constant' | 'env' = (() => {
|
72
|
89
|
CSS.supports &&
|
73
|
90
|
CSS.supports('top: constant(safe-area-inset-top)')
|
74
|
91
|
) {
|
75
|
|
- return 'constant';
|
|
92
|
+ _supportedEnv = 'constant';
|
|
93
|
+ } else {
|
|
94
|
+ _supportedEnv = 'env';
|
76
|
95
|
}
|
77
|
|
- return 'env';
|
78
|
|
-})();
|
|
96
|
+ return _supportedEnv;
|
|
97
|
+}
|
79
|
98
|
|
80
|
99
|
function getInset(side: string): string {
|
81
|
|
- return `${SUPPORTED_ENV}(safe-area-inset-${side})`;
|
|
100
|
+ return `${getSupportedEnv()}(safe-area-inset-${side})`;
|
82
|
101
|
}
|
83
|
102
|
|
84
|
103
|
function createContextElement(): HTMLElement {
|