fix: don't use .web extension (#77)

.web extension is not supported by node or webpack by default and using it requires additional configuration. the .native extension is supported by default in metro, so using .native.ts and .ts instead of .ts and .web.ts is better because it needs minimal configuration when using in SSR.

src/InitialWindow.native.ts

@@ -0,0 +1,17 @@
+import { UIManager } from 'react-native';
+import { Metrics } from './SafeArea.types';
+
+const RNCSafeAreaViewConfig = UIManager.getViewManagerConfig(
+  'RNCSafeAreaView',
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+) as any;
+
+export const initialWindowMetrics = (RNCSafeAreaViewConfig != null &&
+RNCSafeAreaViewConfig.Constants != null
+  ? RNCSafeAreaViewConfig.Constants.initialWindowMetrics
+  : null) as Metrics | null;
+
+/**
+ * @deprecated
+ */
+export const initialWindowSafeAreaInsets = initialWindowMetrics?.insets;

src/InitialWindow.ts

@@ -1,17 +1,8 @@
-import { UIManager } from 'react-native';
-import { Metrics } from './SafeArea.types';
+import { EdgeInsets, Metrics } from './SafeArea.types';
 
-const RNCSafeAreaViewConfig = UIManager.getViewManagerConfig(
-  'RNCSafeAreaView',
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-) as any;
-
-export const initialWindowMetrics = (RNCSafeAreaViewConfig != null &&
-RNCSafeAreaViewConfig.Constants != null
-  ? RNCSafeAreaViewConfig.Constants.initialWindowMetrics
-  : null) as Metrics | null;
+export const initialWindowMetrics: Metrics | null = null;
 
 /**
  * @deprecated
  */
-export const initialWindowSafeAreaInsets = initialWindowMetrics?.insets;
+export const initialWindowSafeAreaInsets: EdgeInsets | null = null;

src/InitialWindow.web.ts

@@ -1,8 +0,0 @@
-import { EdgeInsets, Metrics } from './SafeArea.types';
-
-export const initialWindowMetrics: Metrics | null = null;
-
-/**
- * @deprecated
- */
-export const initialWindowSafeAreaInsets: EdgeInsets | null = null;

src/NativeSafeAreaView.native.tsx

@@ -0,0 +1,6 @@
+import { requireNativeComponent } from 'react-native';
+import { NativeSafeAreaViewProps } from './SafeArea.types';
+
+export default requireNativeComponent<NativeSafeAreaViewProps>(
+  'RNCSafeAreaView',
+);

src/NativeSafeAreaView.tsx

@@ -1,6 +1,129 @@
-import { requireNativeComponent } from 'react-native';
+import * as React from 'react';
+import { View } from 'react-native';
 import { NativeSafeAreaViewProps } from './SafeArea.types';
 
-export default requireNativeComponent<NativeSafeAreaViewProps>(
-  'RNCSafeAreaView',
-);
+/**
+ * TODO:
+ * Currently insets and frame are based on the window and are not
+ * relative to the provider view. This is inconsistent with iOS and Android.
+ * However in most cases if the provider view covers the screen this is not
+ * an issue.
+ */
+
+const CSSTransitions: Record<string, string> = {
+  WebkitTransition: 'webkitTransitionEnd',
+  Transition: 'transitionEnd',
+  MozTransition: 'transitionend',
+  MSTransition: 'msTransitionEnd',
+  OTransition: 'oTransitionEnd',
+};
+
+export default function NativeSafeAreaView({
+  children,
+  style,
+  onInsetsChange,
+}: NativeSafeAreaViewProps) {
+  React.useEffect(() => {
+    // Skip for SSR.
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const element = createContextElement();
+    document.body.appendChild(element);
+    const onEnd = () => {
+      const {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+      } = window.getComputedStyle(element);
+
+      const insets = {
+        top: paddingTop ? parseInt(paddingTop, 10) : 0,
+        bottom: paddingBottom ? parseInt(paddingBottom, 10) : 0,
+        left: paddingLeft ? parseInt(paddingLeft, 10) : 0,
+        right: paddingRight ? parseInt(paddingRight, 10) : 0,
+      };
+      const frame = {
+        x: 0,
+        y: 0,
+        width: document.documentElement.offsetWidth,
+        height: document.documentElement.offsetHeight,
+      };
+      // @ts-ignore: missing properties
+      onInsetsChange({ nativeEvent: { insets, frame } });
+    };
+    element.addEventListener(getSupportedTransitionEvent(), onEnd);
+    onEnd();
+    return () => {
+      document.body.removeChild(element);
+      element.removeEventListener(getSupportedTransitionEvent(), onEnd);
+    };
+  }, [onInsetsChange]);
+
+  return <View style={style}>{children}</View>;
+}
+
+let _supportedTransitionEvent: string | null = null;
+function getSupportedTransitionEvent(): string {
+  if (_supportedTransitionEvent !== null) {
+    return _supportedTransitionEvent;
+  }
+  const element = document.createElement('invalidtype');
+
+  _supportedTransitionEvent = CSSTransitions.Transition;
+  for (const key in CSSTransitions) {
+    if (element.style[key as keyof CSSStyleDeclaration] !== undefined) {
+      _supportedTransitionEvent = CSSTransitions[key];
+      break;
+    }
+  }
+  return _supportedTransitionEvent;
+}
+
+type CssEnv = 'constant' | 'env';
+
+let _supportedEnv: CssEnv | null = null;
+function getSupportedEnv(): CssEnv {
+  if (_supportedEnv !== null) {
+    return _supportedEnv;
+  }
+  const { CSS } = window;
+  if (
+    CSS &&
+    CSS.supports &&
+    CSS.supports('top: constant(safe-area-inset-top)')
+  ) {
+    _supportedEnv = 'constant';
+  } else {
+    _supportedEnv = 'env';
+  }
+  return _supportedEnv;
+}
+
+function getInset(side: string): string {
+  return `${getSupportedEnv()}(safe-area-inset-${side})`;
+}
+
+function createContextElement(): HTMLElement {
+  const element = document.createElement('div');
+  const { style } = element;
+  style.position = 'fixed';
+  style.left = '0';
+  style.top = '0';
+  style.width = '0';
+  style.height = '0';
+  style.zIndex = '-1';
+  style.overflow = 'hidden';
+  style.visibility = 'hidden';
+  // Bacon: Anything faster than this and the callback will be invoked too early with the wrong insets
+  style.transitionDuration = '0.05s';
+  style.transitionProperty = 'padding';
+  style.transitionDelay = '0s';
+  style.paddingTop = getInset('top');
+  style.paddingBottom = getInset('bottom');
+  style.paddingLeft = getInset('left');
+  style.paddingRight = getInset('right');
+  return element;
+}

src/NativeSafeAreaView.web.tsx

@@ -1,129 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import { NativeSafeAreaViewProps } from './SafeArea.types';
-
-/**
- * TODO:
- * Currently insets and frame are based on the window and are not
- * relative to the provider view. This is inconsistent with iOS and Android.
- * However in most cases if the provider view covers the screen this is not
- * an issue.
- */
-
-const CSSTransitions: Record<string, string> = {
-  WebkitTransition: 'webkitTransitionEnd',
-  Transition: 'transitionEnd',
-  MozTransition: 'transitionend',
-  MSTransition: 'msTransitionEnd',
-  OTransition: 'oTransitionEnd',
-};
-
-export default function NativeSafeAreaView({
-  children,
-  style,
-  onInsetsChange,
-}: NativeSafeAreaViewProps) {
-  React.useEffect(() => {
-    // Skip for SSR.
-    if (typeof document === 'undefined') {
-      return;
-    }
-
-    const element = createContextElement();
-    document.body.appendChild(element);
-    const onEnd = () => {
-      const {
-        paddingTop,
-        paddingBottom,
-        paddingLeft,
-        paddingRight,
-      } = window.getComputedStyle(element);
-
-      const insets = {
-        top: paddingTop ? parseInt(paddingTop, 10) : 0,
-        bottom: paddingBottom ? parseInt(paddingBottom, 10) : 0,
-        left: paddingLeft ? parseInt(paddingLeft, 10) : 0,
-        right: paddingRight ? parseInt(paddingRight, 10) : 0,
-      };
-      const frame = {
-        x: 0,
-        y: 0,
-        width: document.documentElement.offsetWidth,
-        height: document.documentElement.offsetHeight,
-      };
-      // @ts-ignore: missing properties
-      onInsetsChange({ nativeEvent: { insets, frame } });
-    };
-    element.addEventListener(getSupportedTransitionEvent(), onEnd);
-    onEnd();
-    return () => {
-      document.body.removeChild(element);
-      element.removeEventListener(getSupportedTransitionEvent(), onEnd);
-    };
-  }, [onInsetsChange]);
-
-  return <View style={style}>{children}</View>;
-}
-
-let _supportedTransitionEvent: string | null = null;
-function getSupportedTransitionEvent(): string {
-  if (_supportedTransitionEvent !== null) {
-    return _supportedTransitionEvent;
-  }
-  const element = document.createElement('invalidtype');
-
-  _supportedTransitionEvent = CSSTransitions.Transition;
-  for (const key in CSSTransitions) {
-    if (element.style[key as keyof CSSStyleDeclaration] !== undefined) {
-      _supportedTransitionEvent = CSSTransitions[key];
-      break;
-    }
-  }
-  return _supportedTransitionEvent;
-}
-
-type CssEnv = 'constant' | 'env';
-
-let _supportedEnv: CssEnv | null = null;
-function getSupportedEnv(): CssEnv {
-  if (_supportedEnv !== null) {
-    return _supportedEnv;
-  }
-  const { CSS } = window;
-  if (
-    CSS &&
-    CSS.supports &&
-    CSS.supports('top: constant(safe-area-inset-top)')
-  ) {
-    _supportedEnv = 'constant';
-  } else {
-    _supportedEnv = 'env';
-  }
-  return _supportedEnv;
-}
-
-function getInset(side: string): string {
-  return `${getSupportedEnv()}(safe-area-inset-${side})`;
-}
-
-function createContextElement(): HTMLElement {
-  const element = document.createElement('div');
-  const { style } = element;
-  style.position = 'fixed';
-  style.left = '0';
-  style.top = '0';
-  style.width = '0';
-  style.height = '0';
-  style.zIndex = '-1';
-  style.overflow = 'hidden';
-  style.visibility = 'hidden';
-  // Bacon: Anything faster than this and the callback will be invoked too early with the wrong insets
-  style.transitionDuration = '0.05s';
-  style.transitionProperty = 'padding';
-  style.transitionDelay = '0s';
-  style.paddingTop = getInset('top');
-  style.paddingBottom = getInset('bottom');
-  style.paddingLeft = getInset('left');
-  style.paddingRight = getInset('right');
-  return element;
-}