Browse Source

Fix SSR on web

Janic Duplessis 5 years ago
parent
commit
0b93ef1154
1 changed files with 30 additions and 11 deletions
  1. 30
    11
      src/NativeSafeAreaView.web.tsx

+ 30
- 11
src/NativeSafeAreaView.web.tsx View File

23
   onInsetsChange,
23
   onInsetsChange,
24
 }: NativeSafeAreaViewProps) {
24
 }: NativeSafeAreaViewProps) {
25
   React.useEffect(() => {
25
   React.useEffect(() => {
26
+    // Skip for SSR.
27
+    if (typeof document === 'undefined') {
28
+      return;
29
+    }
30
+
26
     const element = createContextElement();
31
     const element = createContextElement();
27
     document.body.appendChild(element);
32
     document.body.appendChild(element);
28
     const onEnd = () => {
33
     const onEnd = () => {
42
       // @ts-ignore: missing properties
47
       // @ts-ignore: missing properties
43
       onInsetsChange({ nativeEvent: { insets } });
48
       onInsetsChange({ nativeEvent: { insets } });
44
     };
49
     };
45
-    element.addEventListener(SUPPORTED_TRANSITION_EVENT, onEnd);
50
+    element.addEventListener(getSupportedTransitionEvent(), onEnd);
46
     onEnd();
51
     onEnd();
47
     return () => {
52
     return () => {
48
       document.body.removeChild(element);
53
       document.body.removeChild(element);
49
-      element.removeEventListener(SUPPORTED_TRANSITION_EVENT, onEnd);
54
+      element.removeEventListener(getSupportedTransitionEvent(), onEnd);
50
     };
55
     };
51
   }, [onInsetsChange]);
56
   }, [onInsetsChange]);
52
 
57
 
53
   return <View style={style}>{children}</View>;
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
   const element = document.createElement('invalidtype');
66
   const element = document.createElement('invalidtype');
58
 
67
 
68
+  _supportedTransitionEvent = CSSTransitions.Transition;
59
   for (const key in CSSTransitions) {
69
   for (const key in CSSTransitions) {
60
     if (element.style[key] !== undefined) {
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
   // @ts-ignore: Property 'CSS' does not exist on type 'Window'.ts(2339)
85
   // @ts-ignore: Property 'CSS' does not exist on type 'Window'.ts(2339)
69
   const { CSS } = window;
86
   const { CSS } = window;
70
   if (
87
   if (
72
     CSS.supports &&
89
     CSS.supports &&
73
     CSS.supports('top: constant(safe-area-inset-top)')
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
 function getInset(side: string): string {
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
 function createContextElement(): HTMLElement {
103
 function createContextElement(): HTMLElement {