Added web support

Demo https://safearea.netlify.com

example/app.json

@@ -1,4 +1,15 @@
 {
   "name": "SafeAreaViewExample",
-  "displayName": "SafeAreaViewExample"
-}
+  "displayName": "SafeAreaViewExample",
+  "expo": {
+    "entryPoint": "node_modules/expo/AppEntry",
+    "name": "react-native-safe-area-context",
+    "slug": "react-native-safe-area-context",
+    "version": "0.1.0",
+    "platforms": ["android", "ios", "web"],
+    "web": {
+      "display": "fullscreen",
+      "barStyle": "black-translucent"
+    }
+  }
+}

package.json

@@ -1,8 +1,10 @@
 {
   "name": "react-native-safe-area-context",
   "version": "0.1.0",
-  "description": "A flexible way to handle safe area, also works on Android.",
-  "main": "src/index.tsx",
+  "description": "A flexible way to handle safe area, also works on Android and web.",
+  "main": "src/index",
+  "module": "src/index",
+  "sideEffects": false,
   "files": [
     "/android",
     "!/android/build",
@@ -11,6 +13,9 @@
     "/*.podspec"
   ],
   "author": "Janic Duplessis <janicduplessis@gmail.com>",
+  "contributors": [
+    "Evan Bacon <bacon@expo.io> (https://github.com/evanbacon)"
+  ],
   "homepage": "https://github.com/th3rdwave/react-native-safe-area-context#readme",
   "license": "MIT",
   "scripts": {
@@ -23,6 +28,8 @@
   "keywords": [
     "react-native",
     "react native",
+    "react-native-web",
+    "expo-web",
     "safe area",
     "view"
   ],
@@ -38,10 +45,13 @@
     "eslint": "5.16.0",
     "eslint-config-prettier": "^4.2.0",
     "eslint-plugin-prettier": "3.0.1",
+    "expo": "^34.0.4",
     "metro-react-native-babel-preset": "^0.55.0",
     "prettier": "^1.18.2",
     "react": "^16.8.3",
+    "react-dom": "^16.9.0",
     "react-native": "^0.60.5",
+    "react-native-web": "^0.11.7",
     "typescript": "^3.5.3"
   },
   "repository": {

src/NativeSafeAreaView.tsx

@@ -0,0 +1,3 @@
+import { requireNativeComponent } from 'react-native';
+
+export default requireNativeComponent('RNCSafeAreaView');

src/NativeSafeAreaView.web.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { ViewStyle, View } from 'react-native';
+
+import { InsetChangeNativeCallback } from './SafeArea.types';
+
+interface NativeSafeAreaViewProps {
+  children?: React.ReactNode;
+  style: ViewStyle;
+  onInsetsChange: InsetChangeNativeCallback;
+}
+
+enum CSSTransitions {
+  WebkitTransition = 'webkitTransitionEnd',
+  Transition = 'transitionEnd',
+  MozTransition = 'transitionend',
+  MSTransition = 'msTransitionEnd',
+  OTransition = 'oTransitionEnd',
+}
+
+export default function NativeSafeAreaView({
+  children,
+  style,
+  onInsetsChange,
+}: NativeSafeAreaViewProps) {
+  const element = createContextElement();
+  document.body.appendChild(element);
+
+  const onEnd = () => {
+    const {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+    } = 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,
+    };
+
+    console.log('onEnd');
+    // @ts-ignore: missing properties
+    onInsetsChange({ nativeEvent: { insets } });
+  };
+  React.useEffect(() => {
+    console.log(
+      'SUPPORTED_TRANSITION_EVENT',
+      SUPPORTED_TRANSITION_EVENT,
+      SUPPORTED_ENV,
+    );
+    element.addEventListener(SUPPORTED_TRANSITION_EVENT, onEnd);
+    onEnd();
+    return () => {
+      document.body.removeChild(element);
+      element.removeEventListener(SUPPORTED_TRANSITION_EVENT, onEnd);
+    };
+  }, [onInsetsChange]);
+
+  return <View style={style}>{children}</View>;
+}
+
+const SUPPORTED_TRANSITION_EVENT: string = (() => {
+  const element = document.createElement('invalidtype');
+
+  for (const key in CSSTransitions) {
+    if (element.style[key] !== undefined) {
+      return CSSTransitions[key];
+    }
+  }
+  return CSSTransitions.Transition;
+})();
+
+const SUPPORTED_ENV: 'constant' | 'env' = (() => {
+  // @ts-ignore: Property 'CSS' does not exist on type 'Window'.ts(2339)
+  const { CSS } = window;
+  if (
+    CSS &&
+    CSS.supports &&
+    CSS.supports('top: constant(safe-area-inset-top)')
+  ) {
+    return 'constant';
+  }
+  return 'env';
+})();
+
+function getInset(side: string): string {
+  return `${SUPPORTED_ENV}(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/SafeArea.types.ts

@@ -0,0 +1,12 @@
+import { NativeSyntheticEvent } from 'react-native';
+
+export interface EdgeInsets {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export type InsetChangedEvent = NativeSyntheticEvent<{ insets: EdgeInsets }>;
+
+export type InsetChangeNativeCallback = (event: InsetChangedEvent) => void;

src/index.tsx

@@ -1,18 +1,7 @@
 import * as React from 'react';
-import {
-  requireNativeComponent,
-  NativeSyntheticEvent,
-  StyleSheet,
-} from 'react-native';
-
-const NativeSafeAreaView = requireNativeComponent('RNCSafeAreaView');
-
-export interface EdgeInsets {
-  top: number;
-  right: number;
-  bottom: number;
-  left: number;
-}
+import { StyleSheet } from 'react-native';
+import { EdgeInsets, InsetChangedEvent } from './SafeArea.types';
+import NativeSafeAreaView from './NativeSafeAreaView';
 
 const SafeAreaContext = React.createContext<EdgeInsets | null>(null);
 
@@ -22,12 +11,9 @@ export interface SafeAreaViewProps {
 
 export function SafeAreaProvider({ children }: SafeAreaViewProps) {
   const [insets, setInsets] = React.useState<EdgeInsets | null>(null);
-  const onInsetsChange = React.useCallback(
-    (event: NativeSyntheticEvent<{ insets: EdgeInsets }>) => {
-      setInsets(event.nativeEvent.insets);
-    },
-    [],
-  );
+  const onInsetsChange = React.useCallback((event: InsetChangedEvent) => {
+    setInsets(event.nativeEvent.insets);
+  }, []);
 
   return (
     <NativeSafeAreaView style={styles.fill} onInsetsChange={onInsetsChange}>
@@ -55,3 +41,5 @@ export function useSafeArea(): EdgeInsets {
   }
   return safeArea;
 }
+
+export { EdgeInsets };

tsconfig.json

@@ -10,7 +10,7 @@
     "module": "commonjs",
     "strict": true,
     "moduleResolution": "node",
-    "lib": ["es2015", "es2016", "esnext"],
+    "lib": ["dom", "es2015", "es2016", "esnext"],
     "jsx": "react-native"
   },
   "exclude": ["node_modules"]