v2

.gitignore

@@ -60,3 +60,7 @@ index.ios.bundle
 
 # generated by bob
 lib/
+
+# Expo
+web-build
+.expo

android/src/main/java/com/th3rdwave/safeareacontext/EdgeInsets.java

@@ -1,19 +1,19 @@
 package com.th3rdwave.safeareacontext;
 
 /* package */ class EdgeInsets {
-  public float top;
-  public float right;
-  public float bottom;
-  public float left;
+  float top;
+  float right;
+  float bottom;
+  float left;
 
-  public EdgeInsets(float top, float right, float bottom, float left) {
+  EdgeInsets(float top, float right, float bottom, float left) {
     this.top = top;
     this.right = right;
     this.bottom = bottom;
     this.left = left;
   }
 
-  public boolean equalsToEdgeInsets(EdgeInsets other) {
+  boolean equalsToEdgeInsets(EdgeInsets other) {
     if (this == other) {
       return true;
     }

android/src/main/java/com/th3rdwave/safeareacontext/InsetsChangeEvent.java

@@ -2,19 +2,20 @@ package com.th3rdwave.safeareacontext;
 
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.WritableMap;
-import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.events.Event;
 import com.facebook.react.uimanager.events.RCTEventEmitter;
 
 /* package */  class InsetsChangeEvent extends Event<InsetsChangeEvent> {
-  public static final String EVENT_NAME = "topInsetsChange";
+  static final String EVENT_NAME = "topInsetsChange";
 
   private EdgeInsets mInsets;
+  private Rect mFrame;
 
-  protected InsetsChangeEvent(int viewTag, EdgeInsets insets) {
+  InsetsChangeEvent(int viewTag, EdgeInsets insets, Rect frame) {
     super(viewTag);
 
     mInsets = insets;
+    mFrame = frame;
   }
 
   @Override
@@ -25,7 +26,8 @@ import com.facebook.react.uimanager.events.RCTEventEmitter;
   @Override
   public void dispatch(RCTEventEmitter rctEventEmitter) {
     WritableMap event = Arguments.createMap();
-    event.putMap("insets", SafeAreaUtils.edgeInsetsToJsMap(mInsets));
+    event.putMap("insets", SerializationUtils.edgeInsetsToJsMap(mInsets));
+    event.putMap("frame", SerializationUtils.rectToJsMap(mFrame));
     rctEventEmitter.receiveEvent(getViewTag(), getEventName(), event);
   }
 }

android/src/main/java/com/th3rdwave/safeareacontext/Rect.java

@@ -0,0 +1,22 @@
+package com.th3rdwave.safeareacontext;
+
+/* package */ class Rect {
+  float x;
+  float y;
+  float width;
+  float height;
+
+  Rect(float x, float y, float width, float height) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+
+  boolean equalsToRect(Rect other) {
+    if (this == other) {
+      return true;
+    }
+    return this.x == other.x && this.y == other.y && this.width == other.width && this.height == other.height;
+  }
+}

android/src/main/java/com/th3rdwave/safeareacontext/SafeAreaUtils.java

@@ -4,41 +4,18 @@ import android.graphics.Rect;
 import android.os.Build;
 import android.view.Surface;
 import android.view.View;
+import android.view.ViewGroup;
 import android.view.WindowInsets;
 import android.view.WindowManager;
 
-import com.facebook.react.bridge.Arguments;
-import com.facebook.react.bridge.WritableMap;
-import com.facebook.react.common.MapBuilder;
-import com.facebook.react.uimanager.PixelUtil;
-
-import java.util.Map;
-
 import androidx.annotation.Nullable;
 
 /* package */ class SafeAreaUtils {
-  static WritableMap edgeInsetsToJsMap(EdgeInsets insets) {
-    WritableMap insetsMap = Arguments.createMap();
-    insetsMap.putDouble("top", PixelUtil.toDIPFromPixel(insets.top));
-    insetsMap.putDouble("right", PixelUtil.toDIPFromPixel(insets.right));
-    insetsMap.putDouble("bottom", PixelUtil.toDIPFromPixel(insets.bottom));
-    insetsMap.putDouble("left", PixelUtil.toDIPFromPixel(insets.left));
-    return insetsMap;
-  }
-
-  static Map<String, Float> edgeInsetsToJavaMap(EdgeInsets insets) {
-    return MapBuilder.of(
-        "top",
-        PixelUtil.toDIPFromPixel(insets.top),
-        "right",
-        PixelUtil.toDIPFromPixel(insets.right),
-        "bottom",
-        PixelUtil.toDIPFromPixel(insets.bottom),
-        "left",
-        PixelUtil.toDIPFromPixel(insets.left));
-  }
-
-  static @Nullable EdgeInsets getSafeAreaInsets(WindowManager windowManager, View rootView) {
+  static @Nullable EdgeInsets getSafeAreaInsets(
+      WindowManager windowManager,
+      View rootView,
+      View view
+  ) {
     // Window insets are parts of the window that are covered by system views (status bar,
     // navigation bar, notches). There are no apis the get these values for android < M so we
     // do a best effort polyfill.
@@ -73,17 +50,24 @@ import androidx.annotation.Nullable;
           rotation == Surface.ROTATION_270 ? navbarHeight : 0);
     }
 
-    // Calculate the part of the root view that overlaps with window insets.
-    View contentView = rootView.findViewById(android.R.id.content);
+    // Calculate the part of the view that overlaps with window insets.
     float windowWidth = rootView.getWidth();
     float windowHeight = rootView.getHeight();
     Rect visibleRect = new Rect();
-    contentView.getGlobalVisibleRect(visibleRect);
+    view.getGlobalVisibleRect(visibleRect);
 
     windowInsets.top = Math.max(windowInsets.top - visibleRect.top, 0);
     windowInsets.left = Math.max(windowInsets.left - visibleRect.left, 0);
-    windowInsets.bottom = Math.max(visibleRect.top + contentView.getHeight() + windowInsets.bottom - windowHeight, 0);
-    windowInsets.right = Math.max(visibleRect.left + contentView.getWidth() + windowInsets.right - windowWidth, 0);
+    windowInsets.bottom = Math.max(visibleRect.top + view.getHeight() + windowInsets.bottom - windowHeight, 0);
+    windowInsets.right = Math.max(visibleRect.left + view.getWidth() + windowInsets.right - windowWidth, 0);
     return windowInsets;
   }
+
+  static com.th3rdwave.safeareacontext.Rect getFrame(ViewGroup rootView, View view) {
+    Rect offset = new Rect();
+    view.getDrawingRect(offset);
+    rootView.offsetDescendantRectToMyCoords(view, offset);
+
+    return new com.th3rdwave.safeareacontext.Rect(offset.left, offset.top, view.getWidth(), view.getHeight());
+  }
 }

android/src/main/java/com/th3rdwave/safeareacontext/SafeAreaView.java

@@ -1,12 +1,9 @@
 package com.th3rdwave.safeareacontext;
 
+import android.annotation.SuppressLint;
 import android.content.Context;
-import android.graphics.Rect;
-import android.os.Build;
-import android.view.Surface;
-import android.view.View;
+import android.view.ViewGroup;
 import android.view.ViewTreeObserver;
-import android.view.WindowInsets;
 import android.view.WindowManager;
 
 import com.facebook.infer.annotation.Assertions;
@@ -14,14 +11,16 @@ import com.facebook.react.views.view.ReactViewGroup;
 
 import androidx.annotation.Nullable;
 
+@SuppressLint("ViewConstructor")
 public class SafeAreaView extends ReactViewGroup implements ViewTreeObserver.OnGlobalLayoutListener {
   public interface OnInsetsChangeListener {
-    void onInsetsChange(SafeAreaView view, EdgeInsets insets);
+    void onInsetsChange(SafeAreaView view, EdgeInsets insets, Rect frame);
   }
 
   private @Nullable OnInsetsChangeListener mInsetsChangeListener;
   private final WindowManager mWindowManager;
   private @Nullable EdgeInsets mLastInsets;
+  private @Nullable Rect mLastFrame;
 
   public SafeAreaView(Context context, WindowManager windowManager) {
     super(context);
@@ -30,10 +29,16 @@ public class SafeAreaView extends ReactViewGroup implements ViewTreeObserver.OnG
   }
 
   private void maybeUpdateInsets() {
-    EdgeInsets edgeInsets = SafeAreaUtils.getSafeAreaInsets(mWindowManager, getRootView());
-    if (edgeInsets != null && (mLastInsets == null || !mLastInsets.equalsToEdgeInsets(edgeInsets))) {
-      Assertions.assertNotNull(mInsetsChangeListener).onInsetsChange(this, edgeInsets);
+    EdgeInsets edgeInsets = SafeAreaUtils.getSafeAreaInsets(mWindowManager, getRootView(), this);
+    Rect frame = SafeAreaUtils.getFrame((ViewGroup) getRootView(), this);
+    if (edgeInsets != null &&
+        (mLastInsets == null ||
+            mLastFrame == null ||
+            !mLastInsets.equalsToEdgeInsets(edgeInsets) ||
+            !mLastFrame.equalsToRect(frame))) {
+      Assertions.assertNotNull(mInsetsChangeListener).onInsetsChange(this, edgeInsets, frame);
       mLastInsets = edgeInsets;
+      mLastFrame = frame;
     }
   }
 

android/src/main/java/com/th3rdwave/safeareacontext/SafeAreaViewManager.java

@@ -3,6 +3,7 @@ package com.th3rdwave.safeareacontext;
 import android.app.Activity;
 import android.content.Context;
 import android.view.View;
+import android.view.ViewGroup;
 import android.view.WindowManager;
 
 import com.facebook.react.bridge.ReactApplicationContext;
@@ -46,8 +47,8 @@ public class SafeAreaViewManager extends ViewGroupManager<SafeAreaView> {
         reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
     view.setOnInsetsChangeListener(new SafeAreaView.OnInsetsChangeListener() {
       @Override
-      public void onInsetsChange(SafeAreaView view, EdgeInsets insets) {
-        dispatcher.dispatchEvent(new InsetsChangeEvent(view.getId(), insets));
+      public void onInsetsChange(SafeAreaView view, EdgeInsets insets, Rect frame) {
+        dispatcher.dispatchEvent(new InsetsChangeEvent(view.getId(), insets, frame));
       }
     });
   }
@@ -67,18 +68,27 @@ public class SafeAreaViewManager extends ViewGroupManager<SafeAreaView> {
       return null;
     }
 
-    View decorView = activity.getWindow().getDecorView();
+    ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
     if (decorView == null) {
       return null;
     }
 
-    EdgeInsets insets = SafeAreaUtils.getSafeAreaInsets(mWindowManager, decorView);
+    View contentView = decorView.findViewById(android.R.id.content);
+    EdgeInsets insets = SafeAreaUtils.getSafeAreaInsets(
+        mWindowManager,
+        decorView,
+        contentView);
+    Rect frame = SafeAreaUtils.getFrame(decorView, contentView);
     if (insets == null) {
       return null;
     }
     return MapBuilder.<String, Object>of(
-        "initialWindowSafeAreaInsets",
-        SafeAreaUtils.edgeInsetsToJavaMap(insets));
+        "initialWindowMetrics",
+        MapBuilder.<String, Object>of(
+            "insets",
+            SerializationUtils.edgeInsetsToJavaMap(insets),
+            "frame",
+            SerializationUtils.rectToJavaMap(frame)));
 
   }
 }

android/src/main/java/com/th3rdwave/safeareacontext/SerializationUtils.java

@@ -0,0 +1,52 @@
+package com.th3rdwave.safeareacontext;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.PixelUtil;
+
+import java.util.Map;
+
+/* package */ class SerializationUtils {
+  static WritableMap edgeInsetsToJsMap(EdgeInsets insets) {
+    WritableMap insetsMap = Arguments.createMap();
+    insetsMap.putDouble("top", PixelUtil.toDIPFromPixel(insets.top));
+    insetsMap.putDouble("right", PixelUtil.toDIPFromPixel(insets.right));
+    insetsMap.putDouble("bottom", PixelUtil.toDIPFromPixel(insets.bottom));
+    insetsMap.putDouble("left", PixelUtil.toDIPFromPixel(insets.left));
+    return insetsMap;
+  }
+
+  static Map<String, Float> edgeInsetsToJavaMap(EdgeInsets insets) {
+    return MapBuilder.of(
+        "top",
+        PixelUtil.toDIPFromPixel(insets.top),
+        "right",
+        PixelUtil.toDIPFromPixel(insets.right),
+        "bottom",
+        PixelUtil.toDIPFromPixel(insets.bottom),
+        "left",
+        PixelUtil.toDIPFromPixel(insets.left));
+  }
+
+  static WritableMap rectToJsMap(Rect rect) {
+    WritableMap rectMap = Arguments.createMap();
+    rectMap.putDouble("x", PixelUtil.toDIPFromPixel(rect.x));
+    rectMap.putDouble("y", PixelUtil.toDIPFromPixel(rect.y));
+    rectMap.putDouble("width", PixelUtil.toDIPFromPixel(rect.width));
+    rectMap.putDouble("height", PixelUtil.toDIPFromPixel(rect.height));
+    return rectMap;
+  }
+
+  static Map<String, Float> rectToJavaMap(Rect rect) {
+    return MapBuilder.of(
+        "x",
+        PixelUtil.toDIPFromPixel(rect.x),
+        "y",
+        PixelUtil.toDIPFromPixel(rect.y),
+        "width",
+        PixelUtil.toDIPFromPixel(rect.width),
+        "height",
+        PixelUtil.toDIPFromPixel(rect.height));
+  }
+}

android/src/main/java/com/th3rdwave/safeareacontext/WindowChangeEvent.java

@@ -0,0 +1,30 @@
+package com.th3rdwave.safeareacontext;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+/* package */  class WindowChangeEvent extends Event<WindowChangeEvent> {
+  private static final String EVENT_NAME = "topWindowChange";
+
+  private Rect mFrame;
+
+  WindowChangeEvent(int viewTag, Rect frame) {
+    super(viewTag);
+
+    mFrame = frame;
+  }
+
+  @Override
+  public String getEventName() {
+    return EVENT_NAME;
+  }
+
+  @Override
+  public void dispatch(RCTEventEmitter rctEventEmitter) {
+    WritableMap event = Arguments.createMap();
+    event.putMap("frame", SerializationUtils.rectToJsMap(mFrame));
+    rctEventEmitter.receiveEvent(getViewTag(), getEventName(), event);
+  }
+}

example/App.tsx

@@ -1,47 +1,82 @@
 import * as React from 'react';
-import { View, Text, StatusBar } from 'react-native';
+import { View, Text, StatusBar, ScrollView } from 'react-native';
 
 // import { SafeAreaProvider, useSafeArea } from 'react-native-safe-area-context'; in your app.
 import {
   SafeAreaProvider,
-  useSafeArea,
-  initialWindowSafeAreaInsets,
+  useSafeAreaInsets,
+  initialWindowMetrics,
+  useSafeAreaFrame,
 } from '../src';
 
+const DataView = ({ data }: { data: object | null | undefined }) => (
+  <Text style={{ fontSize: 16, lineHeight: 24, color: '#292929' }}>
+    {data == null
+      ? 'null'
+      : Object.entries(data)
+          .map(([key, value]) => `${key}: ${value}`)
+          .join('\n')}
+  </Text>
+);
+
+const Card = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => (
+  <View style={{ padding: 16, backgroundColor: 'white', marginBottom: 4 }}>
+    <Text
+      style={{
+        fontSize: 20,
+        fontWeight: 'bold',
+        marginBottom: 16,
+        color: '#292929',
+      }}
+    >
+      {title}
+    </Text>
+    {children}
+  </View>
+);
+
+const BORDER_WIDTH = 8;
+
 const Screen = () => {
-  const insets = useSafeArea();
+  const insets = useSafeAreaInsets();
+  const frame = useSafeAreaFrame();
 
   return (
     <>
-      <StatusBar
-        barStyle="dark-content"
-        translucent
-        backgroundColor="transparent"
-      />
+      <StatusBar barStyle="dark-content" backgroundColor="transparent" />
       <View
         style={{
-          flex: 1,
+          width: frame.width,
+          height: frame.height,
           backgroundColor: 'red',
-          paddingTop: insets.top,
-          paddingLeft: insets.left,
-          paddingBottom: insets.bottom,
-          paddingRight: insets.right,
+          paddingTop: insets.top - BORDER_WIDTH,
+          paddingLeft: insets.left - BORDER_WIDTH,
+          paddingBottom: insets.bottom - BORDER_WIDTH,
+          paddingRight: insets.right - BORDER_WIDTH,
+          borderColor: 'blue',
+          borderWidth: BORDER_WIDTH,
         }}
       >
-        <View
-          style={{
-            flex: 1,
-            backgroundColor: 'white',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <Text>Insets: {JSON.stringify(insets, null, 2)}</Text>
-          <Text>
-            Initial insets:{' '}
-            {JSON.stringify(initialWindowSafeAreaInsets, null, 2)}
-          </Text>
-        </View>
+        <ScrollView style={{ flex: 1, backgroundColor: '#eee' }}>
+          <Card title="Provider insets">
+            <DataView data={insets} />
+          </Card>
+          <Card title="Provider frame">
+            <DataView data={frame} />
+          </Card>
+          <Card title="Initial window insets">
+            <DataView data={initialWindowMetrics?.insets} />
+          </Card>
+          <Card title="Initial window frame">
+            <DataView data={initialWindowMetrics?.frame} />
+          </Card>
+        </ScrollView>
       </View>
     </>
   );
@@ -49,8 +84,10 @@ const Screen = () => {
 
 export default function App() {
   return (
-    <SafeAreaProvider>
-      <Screen />
-    </SafeAreaProvider>
+    <View style={{ marginTop: 0, flex: 1 }}>
+      <SafeAreaProvider>
+        <Screen />
+      </SafeAreaProvider>
+    </View>
   );
 }

example/android/app/src/main/java/com/safeareaviewexample/MainActivity.java

@@ -1,9 +1,16 @@
 package com.safeareaviewexample;
 
+import android.os.Bundle;
+import android.view.View;
+import android.view.WindowManager;
+
 import com.facebook.react.ReactActivity;
 
 public class MainActivity extends ReactActivity {
 
+    private static final boolean TEST_TRANSLUCENT_STATUS_BAR = true;
+    private static final boolean TEST_TRANSLUCENT_NAVBAR = true;
+
     /**
      * Returns the name of the main component registered from JavaScript.
      * This is used to schedule rendering of the component.
@@ -12,4 +19,20 @@ public class MainActivity extends ReactActivity {
     protected String getMainComponentName() {
         return "SafeAreaViewExample";
     }
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+
+        if (TEST_TRANSLUCENT_STATUS_BAR) {
+            getWindow().getDecorView().setSystemUiVisibility(
+                View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
+        }
+        if (TEST_TRANSLUCENT_NAVBAR) {
+            getWindow().setFlags(
+                WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
+                WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
+        }
+
+    }
 }

example/android/app/src/main/res/values-v28/styles.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
+    </style>
+</resources>

example/app.json

@@ -2,7 +2,7 @@
   "name": "SafeAreaViewExample",
   "displayName": "SafeAreaViewExample",
   "expo": {
-    "entryPoint": "node_modules/expo/AppEntry",
+    "entryPoint": "./example/index",
     "name": "react-native-safe-area-context",
     "slug": "react-native-safe-area-context",
     "version": "0.1.0",

example/index.expo.js

@@ -0,0 +1,5 @@
+import registerRootComponent from 'expo/build/launch/registerRootComponent';
+
+import App from './App';
+
+registerRootComponent(App);

example/index.js

@@ -2,4 +2,6 @@ import { AppRegistry } from 'react-native';
 import App from './App';
 import { name as appName } from './app.json';
 
+console.log('HEJADWDWD');
+
 AppRegistry.registerComponent(appName, () => App);

ios/SafeAreaView/RNCSafeAreaView.m

@@ -16,6 +16,7 @@ static BOOL UIEdgeInsetsEqualToEdgeInsetsWithThreshold(UIEdgeInsets insets1, UIE
 @implementation RNCSafeAreaView
 {
   UIEdgeInsets _currentSafeAreaInsets;
+  CGRect _currentFrame;
   BOOL _initialInsetsSent;
 }
 
@@ -75,13 +76,19 @@ static BOOL UIEdgeInsetsEqualToEdgeInsetsWithThreshold(UIEdgeInsets insets1, UIE
   }
 
   UIEdgeInsets safeAreaInsets = [self realOrEmulateSafeAreaInsets];
+  CGRect frame = [self convertRect:self.bounds toView:nil];
 
-  if (_initialInsetsSent && UIEdgeInsetsEqualToEdgeInsetsWithThreshold(safeAreaInsets, _currentSafeAreaInsets, 1.0 / RCTScreenScale())) {
+  if (
+    _initialInsetsSent &&
+    UIEdgeInsetsEqualToEdgeInsetsWithThreshold(safeAreaInsets, _currentSafeAreaInsets, 1.0 / RCTScreenScale()) &&
+    CGRectEqualToRect(frame, _currentFrame)
+  ) {
     return;
   }
 
   _initialInsetsSent = YES;
   _currentSafeAreaInsets = safeAreaInsets;
+  _currentFrame = frame;
 
   self.onInsetsChange(@{
     @"insets": @{
@@ -89,7 +96,13 @@ static BOOL UIEdgeInsetsEqualToEdgeInsetsWithThreshold(UIEdgeInsets insets1, UIE
       @"right": @(safeAreaInsets.right),
       @"bottom": @(safeAreaInsets.bottom),
       @"left": @(safeAreaInsets.left),
-    }
+    },
+    @"frame": @{
+      @"x": @(frame.origin.x),
+      @"y": @(frame.origin.y),
+      @"width": @(frame.size.width),
+      @"height": @(frame.size.height),
+    },
   });
 }
 

ios/SafeAreaView/RNCSafeAreaViewManager.m

@@ -24,11 +24,19 @@ RCT_EXPORT_VIEW_PROPERTY(onInsetsChange, RCTBubblingEventBlock)
     UIWindow* window = [[UIApplication sharedApplication] keyWindow];
     UIEdgeInsets safeAreaInsets = window.safeAreaInsets;
     return @{
-      @"initialWindowSafeAreaInsets": @{
-        @"top": @(safeAreaInsets.top),
-        @"right": @(safeAreaInsets.right),
-        @"bottom": @(safeAreaInsets.bottom),
-        @"left": @(safeAreaInsets.left),
+      @"initialWindowMetrics": @{
+        @"insets": @{
+          @"top": @(safeAreaInsets.top),
+          @"right": @(safeAreaInsets.right),
+          @"bottom": @(safeAreaInsets.bottom),
+          @"left": @(safeAreaInsets.left),
+        },
+        @"frame": @{
+          @"x": @(window.frame.origin.x),
+          @"y": @(window.frame.origin.y),
+          @"width": @(window.frame.size.width),
+          @"height": @(window.frame.size.height),
+        },
       }
     };
   } else {

package.json

@@ -48,6 +48,7 @@
     "@types/jest": "^25.2.1",
     "@types/react": "^16.9.34",
     "@types/react-native": "^0.62.5",
+    "@types/react-dom": "^16.9.7",
     "@types/react-test-renderer": "^16.9.2",
     "@typescript-eslint/eslint-plugin": "^2.30.0",
     "@typescript-eslint/parser": "^2.30.0",

src/InitialWindowSafeAreaInsets.web.ts

@@ -1,4 +0,0 @@
-import { EdgeInsets } from './SafeArea.types';
-
-const initialWindowSafeAreaInsets: EdgeInsets | null = null;
-export default initialWindowSafeAreaInsets;

src/NativeSafeAreaView.web.tsx

@@ -2,6 +2,14 @@ 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',
@@ -37,8 +45,14 @@ export default function NativeSafeAreaView({
         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 } });
+      onInsetsChange({ nativeEvent: { insets, frame } });
     };
     element.addEventListener(getSupportedTransitionEvent(), onEnd);
     onEnd();

src/SafeArea.types.ts

@@ -7,7 +7,19 @@ export interface EdgeInsets {
   left: number;
 }
 
-export type InsetChangedEvent = NativeSyntheticEvent<{ insets: EdgeInsets }>;
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface Metrics {
+  insets: EdgeInsets;
+  frame: Rect;
+}
+
+export type InsetChangedEvent = NativeSyntheticEvent<Metrics>;
 
 export type InsetChangeNativeCallback = (event: InsetChangedEvent) => void;
 

src/SafeAreaContext.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import NativeSafeAreaView from './NativeSafeAreaView';
+import { EdgeInsets, InsetChangedEvent, Metrics, Rect } from './SafeArea.types';
+
+export const SafeAreaInsetsContext = React.createContext<EdgeInsets | null>(
+  null,
+);
+
+export const SafeAreaFrameContext = React.createContext<Rect | null>(null);
+
+export interface SafeAreaViewProps {
+  children?: React.ReactNode;
+  initialMetrics?: Metrics | null;
+}
+
+export function SafeAreaProvider({
+  children,
+  initialMetrics,
+}: SafeAreaViewProps) {
+  const parentInsets = useParentSafeAreaInsets();
+  const parentFrame = useParentSafeAreaFrame();
+  const [insets, setInsets] = React.useState<EdgeInsets | null>(
+    initialMetrics?.insets ?? parentInsets ?? null,
+  );
+  const [frame, setFrame] = React.useState<Rect | null>(
+    initialMetrics?.frame ?? parentFrame ?? null,
+  );
+  const onInsetsChange = React.useCallback((event: InsetChangedEvent) => {
+    setInsets(event.nativeEvent.insets);
+    setFrame(event.nativeEvent.frame);
+  }, []);
+
+  return (
+    <NativeSafeAreaView style={styles.fill} onInsetsChange={onInsetsChange}>
+      {insets != null && frame != null ? (
+        <SafeAreaFrameContext.Provider value={frame}>
+          <SafeAreaInsetsContext.Provider value={insets}>
+            {children}
+          </SafeAreaInsetsContext.Provider>
+        </SafeAreaFrameContext.Provider>
+      ) : null}
+    </NativeSafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  fill: { flex: 1 },
+});
+
+function useParentSafeAreaInsets(): EdgeInsets | null {
+  return React.useContext(SafeAreaInsetsContext);
+}
+
+function useParentSafeAreaFrame(): Rect | null {
+  return React.useContext(SafeAreaFrameContext);
+}
+
+export function useSafeAreaInsets(): EdgeInsets {
+  const safeArea = React.useContext(SafeAreaInsetsContext);
+  if (safeArea == null) {
+    throw new Error(
+      'No safe area insets value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.',
+    );
+  }
+  return safeArea;
+}
+
+export function useSafeAreaFrame(): Rect {
+  const frame = React.useContext(SafeAreaFrameContext);
+  if (frame == null) {
+    throw new Error(
+      'No safe area frame value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.',
+    );
+  }
+  return frame;
+}
+
+/**
+ * @deprecated
+ */
+export function useSafeArea(): EdgeInsets {
+  console.warn('useSafeArea is deprecated, use useSafeAreaInsets instead.');
+  return useSafeAreaInsets();
+}

src/SafeAreaView.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { View, ViewProps } from 'react-native';
+import { useSafeAreaInsets } from './SafeAreaContext';
+
+export function SafeAreaView({
+  style,
+  ...rest
+}: ViewProps & { children: React.ReactNode }) {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      style={[
+        {
+          paddingTop: insets.top,
+          paddingRight: insets.right,
+          paddingBottom: insets.bottom,
+          paddingLeft: insets.left,
+        },
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}

src/__tests__/SafeAreaContext-test.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import * as ReactTestRenderer from 'react-test-renderer';
+import NativeSafeAreaView from '../NativeSafeAreaView';
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+  useSafeAreaFrame,
+} from '../SafeAreaContext';
+import { Metrics } from '../SafeArea.types';
+
+const TEST_METRICS_1: Metrics = {
+  insets: { top: 1, left: 2, right: 3, bottom: 4 },
+  frame: { x: 0, y: 0, height: 100, width: 100 },
+};
+const TEST_METRICS_2: Metrics = {
+  insets: { top: 2, left: 3, right: 4, bottom: 5 },
+  frame: { x: 0, y: 0, width: 10, height: 16 },
+};
+
+const PrintInsetsTestView = () => {
+  const insets = useSafeAreaInsets();
+  const frame = useSafeAreaFrame();
+  return (
+    <View
+      style={{
+        paddingTop: insets.top,
+        paddingLeft: insets.left,
+        paddingBottom: insets.bottom,
+        paddingRight: insets.right,
+        top: frame.y,
+        left: frame.y,
+        width: frame.width,
+        height: frame.height,
+      }}
+    />
+  );
+};
+
+describe('SafeAreaProvider', () => {
+  it('renders', () => {
+    const component = ReactTestRenderer.create(<SafeAreaProvider />);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('does not render child until inset values are received', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider>
+        <PrintInsetsTestView />
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('renders child when inset values are received', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider>
+        <PrintInsetsTestView />
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+    const { onInsetsChange } = component.root.findByType(
+      NativeSafeAreaView,
+    ).props;
+    ReactTestRenderer.act(() => {
+      onInsetsChange({
+        nativeEvent: TEST_METRICS_1,
+      });
+    });
+    expect(component).toMatchSnapshot();
+  });
+
+  it('supports setting initial insets', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider initialMetrics={TEST_METRICS_1}>
+        <PrintInsetsTestView />
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('uses parent insets when available', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider initialMetrics={TEST_METRICS_1}>
+        <SafeAreaProvider>
+          <PrintInsetsTestView />
+        </SafeAreaProvider>
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('uses inner insets', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider initialMetrics={TEST_METRICS_1}>
+        <SafeAreaProvider initialMetrics={TEST_METRICS_2}>
+          <PrintInsetsTestView />
+        </SafeAreaProvider>
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('throws when no provider is rendered', () => {
+    // Silence the React error boundary warning; we expect an uncaught error.
+    const consoleErrorMock = jest
+      .spyOn(console, 'error')
+      .mockImplementation((message) => {
+        if (message.startsWith('The above error occured in the ')) {
+          return;
+        }
+      });
+    expect(() => {
+      ReactTestRenderer.create(<PrintInsetsTestView />);
+    }).toThrow(
+      'No safe area insets value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.',
+    );
+
+    consoleErrorMock.mockRestore();
+  });
+});

src/__tests__/SafeAreaView-test.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import * as ReactTestRenderer from 'react-test-renderer';
+import { SafeAreaProvider } from '../SafeAreaContext';
+import { SafeAreaView } from '../SafeAreaView';
+import { Metrics } from '../SafeArea.types';
+
+const INITIAL_METRICS: Metrics = {
+  insets: { top: 1, left: 2, right: 3, bottom: 4 },
+  frame: { x: 0, y: 0, height: 100, width: 100 },
+};
+
+describe('SafeAreaView', () => {
+  it('renders', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider initialMetrics={INITIAL_METRICS}>
+        <SafeAreaView>
+          <View />
+        </SafeAreaView>
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('can override padding styles', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider initialMetrics={INITIAL_METRICS}>
+        <SafeAreaView style={{ paddingTop: 0 }}>
+          <View />
+        </SafeAreaView>
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+});

src/__tests__/__snapshots__/index-test.tsx.snap → src/__tests__/__snapshots__/SafeAreaContext-test.tsx.snap

@@ -45,10 +45,14 @@ exports[`SafeAreaProvider renders child when inset values are received 2`] = `
   <View
     style={
       Object {
-        "bottom": 4,
-        "left": 2,
-        "right": 3,
-        "top": 1,
+        "height": 100,
+        "left": 0,
+        "paddingBottom": 4,
+        "paddingLeft": 2,
+        "paddingRight": 3,
+        "paddingTop": 1,
+        "top": 0,
+        "width": 100,
       }
     }
   />
@@ -67,10 +71,14 @@ exports[`SafeAreaProvider supports setting initial insets 1`] = `
   <View
     style={
       Object {
-        "bottom": 4,
-        "left": 2,
-        "right": 3,
-        "top": 1,
+        "height": 100,
+        "left": 0,
+        "paddingBottom": 4,
+        "paddingLeft": 2,
+        "paddingRight": 3,
+        "paddingTop": 1,
+        "top": 0,
+        "width": 100,
       }
     }
   />
@@ -97,10 +105,14 @@ exports[`SafeAreaProvider uses inner insets 1`] = `
     <View
       style={
         Object {
-          "bottom": 5,
-          "left": 3,
-          "right": 4,
-          "top": 2,
+          "height": 16,
+          "left": 0,
+          "paddingBottom": 5,
+          "paddingLeft": 3,
+          "paddingRight": 4,
+          "paddingTop": 2,
+          "top": 0,
+          "width": 10,
         }
       }
     />
@@ -128,69 +140,17 @@ exports[`SafeAreaProvider uses parent insets when available 1`] = `
     <View
       style={
         Object {
-          "bottom": 4,
-          "left": 2,
-          "right": 3,
-          "top": 1,
-        }
-      }
-    />
-  </RNCSafeAreaView>
-</RNCSafeAreaView>
-`;
-
-exports[`SafeAreaView can override padding styles 1`] = `
-<RNCSafeAreaView
-  onInsetsChange={[Function]}
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
-  <View
-    style={
-      Array [
-        Object {
+          "height": 100,
+          "left": 0,
           "paddingBottom": 4,
           "paddingLeft": 2,
           "paddingRight": 3,
           "paddingTop": 1,
-        },
-        Object {
-          "paddingTop": 0,
-        },
-      ]
-    }
-  >
-    <View />
-  </View>
-</RNCSafeAreaView>
-`;
-
-exports[`SafeAreaView renders 1`] = `
-<RNCSafeAreaView
-  onInsetsChange={[Function]}
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
-  <View
-    style={
-      Array [
-        Object {
-          "paddingBottom": 4,
-          "paddingLeft": 2,
-          "paddingRight": 3,
-          "paddingTop": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View />
-  </View>
+          "top": 0,
+          "width": 100,
+        }
+      }
+    />
+  </RNCSafeAreaView>
 </RNCSafeAreaView>
 `;

src/__tests__/__snapshots__/SafeAreaView-test.tsx.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SafeAreaView can override padding styles 1`] = `
+<RNCSafeAreaView
+  onInsetsChange={[Function]}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "paddingBottom": 4,
+          "paddingLeft": 2,
+          "paddingRight": 3,
+          "paddingTop": 1,
+        },
+        Object {
+          "paddingTop": 0,
+        },
+      ]
+    }
+  >
+    <View />
+  </View>
+</RNCSafeAreaView>
+`;
+
+exports[`SafeAreaView renders 1`] = `
+<RNCSafeAreaView
+  onInsetsChange={[Function]}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "paddingBottom": 4,
+          "paddingLeft": 2,
+          "paddingRight": 3,
+          "paddingTop": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View />
+  </View>
+</RNCSafeAreaView>
+`;

src/__tests__/index-test.tsx

@@ -1,169 +0,0 @@
-import * as React from 'react';
-import * as ReactTestRenderer from 'react-test-renderer';
-import { View, UIManager } from 'react-native';
-import { SafeAreaProvider, SafeAreaView, useSafeArea } from '../index';
-import NativeSafeAreaView from '../NativeSafeAreaView';
-
-const PrintInsetsTestView = () => {
-  const insets = useSafeArea();
-  return (
-    <View
-      style={{
-        top: insets.top,
-        left: insets.left,
-        bottom: insets.bottom,
-        right: insets.right,
-      }}
-    />
-  );
-};
-
-describe('SafeAreaProvider', () => {
-  it('renders', () => {
-    const component = ReactTestRenderer.create(<SafeAreaProvider />);
-    expect(component).toMatchSnapshot();
-  });
-
-  it('does not render child until inset values are received', () => {
-    const component = ReactTestRenderer.create(
-      <SafeAreaProvider>
-        <PrintInsetsTestView />
-      </SafeAreaProvider>,
-    );
-    expect(component).toMatchSnapshot();
-  });
-
-  it('renders child when inset values are received', () => {
-    const component = ReactTestRenderer.create(
-      <SafeAreaProvider>
-        <PrintInsetsTestView />
-      </SafeAreaProvider>,
-    );
-    expect(component).toMatchSnapshot();
-    const { onInsetsChange } = component.root.findByType(
-      NativeSafeAreaView,
-    ).props;
-    ReactTestRenderer.act(() => {
-      onInsetsChange({
-        nativeEvent: { insets: { top: 1, left: 2, right: 3, bottom: 4 } },
-      });
-    });
-    expect(component).toMatchSnapshot();
-  });
-
-  it('supports setting initial insets', () => {
-    const component = ReactTestRenderer.create(
-      <SafeAreaProvider
-        initialSafeAreaInsets={{ top: 1, left: 2, right: 3, bottom: 4 }}
-      >
-        <PrintInsetsTestView />
-      </SafeAreaProvider>,
-    );
-    expect(component).toMatchSnapshot();
-  });
-
-  it('uses parent insets when available', () => {
-    const component = ReactTestRenderer.create(
-      <SafeAreaProvider
-        initialSafeAreaInsets={{ top: 1, left: 2, right: 3, bottom: 4 }}
-      >
-        <SafeAreaProvider>
-          <PrintInsetsTestView />
-        </SafeAreaProvider>
-      </SafeAreaProvider>,
-    );
-    expect(component).toMatchSnapshot();
-  });
-
-  it('uses inner insets', () => {
-    const component = ReactTestRenderer.create(
-      <SafeAreaProvider
-        initialSafeAreaInsets={{ top: 1, left: 2, right: 3, bottom: 4 }}
-      >
-        <SafeAreaProvider
-          initialSafeAreaInsets={{ top: 2, left: 3, right: 4, bottom: 5 }}
-        >
-          <PrintInsetsTestView />
-        </SafeAreaProvider>
-      </SafeAreaProvider>,
-    );
-    expect(component).toMatchSnapshot();
-  });
-
-  it('throws when no provider is rendered', () => {
-    // Silence the React error boundary warning; we expect an uncaught error.
-    const consoleErrorMock = jest
-      .spyOn(console, 'error')
-      .mockImplementation(message => {
-        if (message.startsWith('The above error occured in the ')) {
-          return;
-        }
-      });
-    expect(() => {
-      ReactTestRenderer.create(<PrintInsetsTestView />);
-    }).toThrow(
-      'No safe area value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.',
-    );
-
-    consoleErrorMock.mockRestore();
-  });
-});
-
-describe('SafeAreaView', () => {
-  it('renders', () => {
-    const component = ReactTestRenderer.create(
-      <SafeAreaProvider
-        initialSafeAreaInsets={{ top: 1, left: 2, right: 3, bottom: 4 }}
-      >
-        <SafeAreaView>
-          <View />
-        </SafeAreaView>
-      </SafeAreaProvider>,
-    );
-    expect(component).toMatchSnapshot();
-  });
-
-  it('can override padding styles', () => {
-    const component = ReactTestRenderer.create(
-      <SafeAreaProvider
-        initialSafeAreaInsets={{ top: 1, left: 2, right: 3, bottom: 4 }}
-      >
-        <SafeAreaView style={{ paddingTop: 0 }}>
-          <View />
-        </SafeAreaView>
-      </SafeAreaProvider>,
-    );
-    expect(component).toMatchSnapshot();
-  });
-});
-
-describe('initialWindowSafeAreaInsets', () => {
-  it('is null when no view config is available', () => {
-    jest.resetModules();
-    expect(require('../index').initialWindowSafeAreaInsets).toBe(null);
-  });
-
-  it('it uses the constant provided by the view config', () => {
-    jest.resetModules();
-    const testInsets = {
-      top: 20,
-      left: 0,
-      right: 0,
-      bottom: 0,
-    };
-    UIManager.getViewManagerConfig = jest.fn(name => {
-      if (name === 'RNCSafeAreaView') {
-        return {
-          Commands: {},
-          Constants: {
-            initialWindowSafeAreaInsets: testInsets,
-          },
-        };
-      }
-      return { Commands: {} };
-    });
-
-    expect(require('../index').initialWindowSafeAreaInsets).toBe(testInsets);
-    expect(UIManager.getViewManagerConfig).toBeCalledWith('RNCSafeAreaView');
-  });
-});

src/__tests__/initialWindowMetrics-test.tsx

@@ -0,0 +1,41 @@
+import { UIManager } from 'react-native';
+import { Metrics } from '../SafeArea.types';
+
+describe('initialWindowMetrics', () => {
+  it('is null when no view config is available', () => {
+    jest.resetModules();
+    expect(require('../initialWindowMetrics').initialWindowMetrics).toBe(null);
+  });
+
+  it('it uses the constant provided by the view config', () => {
+    jest.resetModules();
+    const testMetrics: Metrics = {
+      insets: {
+        top: 20,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      },
+      frame: {
+        x: 0,
+        y: 0,
+        height: 100,
+        width: 100,
+      },
+    };
+    UIManager.getViewManagerConfig = jest.fn((name) => {
+      if (name === 'RNCSafeAreaView') {
+        return {
+          Commands: {},
+          Constants: {
+            initialWindowMetrics: testMetrics,
+          },
+        };
+      }
+      return { Commands: {} };
+    });
+
+    expect(require('../index').initialWindowMetrics).toBe(testMetrics);
+    expect(UIManager.getViewManagerConfig).toBeCalledWith('RNCSafeAreaView');
+  });
+});

src/index.tsx

@@ -1,80 +1,4 @@
-import * as React from 'react';
-import { StyleSheet, View, ViewProps } from 'react-native';
-import { EdgeInsets as EdgeInsetsT, InsetChangedEvent } from './SafeArea.types';
-import NativeSafeAreaView from './NativeSafeAreaView';
-
-export { default as initialWindowSafeAreaInsets } from './InitialWindowSafeAreaInsets';
-
-export const SafeAreaContext = React.createContext<EdgeInsetsT | null>(null);
-
-export interface SafeAreaViewProps {
-  children?: React.ReactNode;
-  initialSafeAreaInsets?: EdgeInsetsT | null;
-}
-
-export function SafeAreaProvider({
-  children,
-  initialSafeAreaInsets,
-}: SafeAreaViewProps) {
-  const parentInsets = useParentSafeArea();
-  const [insets, setInsets] = React.useState<EdgeInsetsT | null | undefined>(
-    initialSafeAreaInsets || parentInsets,
-  );
-  const onInsetsChange = React.useCallback((event: InsetChangedEvent) => {
-    setInsets(event.nativeEvent.insets);
-  }, []);
-
-  return (
-    <NativeSafeAreaView style={styles.fill} onInsetsChange={onInsetsChange}>
-      {insets != null ? (
-        <SafeAreaContext.Provider value={insets}>
-          {children}
-        </SafeAreaContext.Provider>
-      ) : null}
-    </NativeSafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  fill: { flex: 1 },
-});
-
-export const SafeAreaConsumer = SafeAreaContext.Consumer;
-
-function useParentSafeArea(): React.ContextType<typeof SafeAreaContext> {
-  return React.useContext(SafeAreaContext);
-}
-
-export function useSafeArea(): EdgeInsetsT {
-  const safeArea = React.useContext(SafeAreaContext);
-  if (safeArea == null) {
-    throw new Error(
-      'No safe area value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.',
-    );
-  }
-  return safeArea;
-}
-
-export function SafeAreaView({
-  style,
-  ...rest
-}: ViewProps & { children: React.ReactNode }) {
-  const insets = useSafeArea();
-
-  return (
-    <View
-      style={[
-        {
-          paddingTop: insets.top,
-          paddingRight: insets.right,
-          paddingBottom: insets.bottom,
-          paddingLeft: insets.left,
-        },
-        style,
-      ]}
-      {...rest}
-    />
-  );
-}
-
-export type EdgeInsets = EdgeInsetsT;
+export * from './SafeAreaContext';
+export * from './SafeAreaView';
+export * from './initialWindowMetrics';
+export * from './SafeArea.types';

src/InitialWindowSafeAreaInsets.ts → src/initialWindowMetrics.ts

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

src/initialWindowMetrics.web.ts

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

yarn.lock

@@ -1617,6 +1617,13 @@
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.1.tgz#937fab3194766256ee09fcd40b781740758617e7"
   integrity sha512-lhbQXx9HKZAPgBkISrBcmAcMpZsmpe/Cd/hY7LGZS5OfkySUBItnPZHgQPssWYUET8elF+yCFBbP1Q0RZPTdaw==
 
+"@types/react-dom@^16.9.7":
+  version "16.9.7"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.7.tgz#60844d48ce252d7b2dccf0c7bb937130e27c0cd2"
+  integrity sha512-GHTYhM8/OwUCf254WO5xqR/aqD3gC9kSTLpopWGpQLpnw23jk44RvMHsyUSEplvRJZdHxhJGMMLF0kCPYHPhQA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-native@^0.62.5":
   version "0.62.5"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.62.5.tgz#605c2d31485c515ee18b62e8b29ffdbba404a443"
@@ -1732,11 +1739,6 @@ abab@^2.0.0:
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
   integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==
 
-abbrev@1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
-
 abort-controller@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
@@ -1913,19 +1915,6 @@ anymatch@^3.0.3:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-aproba@^1.0.3:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
-  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
-
-are-we-there-yet@~1.1.2:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
-  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
-  dependencies:
-    delegates "^1.0.0"
-    readable-stream "^2.0.6"
-
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -2481,11 +2470,6 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-chownr@^1.1.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
-  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
-
 ci-info@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
@@ -2715,11 +2699,6 @@ connect@^3.6.5:
     parseurl "~1.3.3"
     utils-merge "1.0.1"
 
-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
-  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
-
 convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
@@ -2882,13 +2861,6 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
-debug@^3.2.6:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
-  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
-  dependencies:
-    ms "^2.1.1"
-
 debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
@@ -2925,11 +2897,6 @@ deep-assign@^3.0.0:
   dependencies:
     is-obj "^1.0.0"
 
-deep-extend@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
-  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
-
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -3005,11 +2972,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
-delegates@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
-  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
-
 denodeify@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/denodeify/-/denodeify-1.2.1.tgz#3a36287f5034e699e7577901052c2e6c94251631"
@@ -3025,11 +2987,6 @@ destroy@~1.0.4:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
-detect-libc@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
-
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
@@ -3963,13 +3920,6 @@ fs-extra@^8.1.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-minipass@^1.2.5:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
-  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
-  dependencies:
-    minipass "^2.6.0"
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -3998,20 +3948,6 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-gauge@~2.7.3:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
-  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
-  dependencies:
-    aproba "^1.0.3"
-    console-control-strings "^1.0.0"
-    has-unicode "^2.0.0"
-    object-assign "^4.1.0"
-    signal-exit "^3.0.0"
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
-    wide-align "^1.1.0"
-
 gensync@^1.0.0-beta.1:
   version "1.0.0-beta.1"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
@@ -4177,11 +4113,6 @@ has-symbols@^1.0.0, has-symbols@^1.0.1:
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
   integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
 
-has-unicode@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
-  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
-
 has-value@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
@@ -4277,20 +4208,13 @@ hyphenate-style-name@^1.0.2, hyphenate-style-name@^1.0.3:
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
   integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
 
-iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-ignore-walk@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
-  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
-  dependencies:
-    minimatch "^3.0.4"
-
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@@ -4358,11 +4282,6 @@ inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@~2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-ini@~1.3.0:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
-  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
-
 inline-style-prefixer@^5.1.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-5.1.2.tgz#e5a5a3515e25600e016b71e39138971228486c33"
@@ -6051,21 +5970,6 @@ minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
-  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
-
-minizlib@^1.2.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
-  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
-  dependencies:
-    minipass "^2.9.0"
-
 mixin-deep@^1.2.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
@@ -6074,7 +5978,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@^0.5.0, mkdirp@^0.5.1:
+mkdirp@^0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
@@ -6133,15 +6037,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-needle@^2.2.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.1.tgz#14af48732463d7475696f937626b1b993247a56a"
-  integrity sha512-x/gi6ijr4B7fwl6WYL9FwlCvRQKGlUNvnceho8wxkwXqN8jvVmmmATTmZPRRG7b/yC1eode26C2HO9jl78Du9g==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -6186,22 +6081,6 @@ node-notifier@^6.0.0:
     shellwords "^0.1.1"
     which "^1.3.1"
 
-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-releases@^1.1.53:
   version "1.1.53"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
@@ -6217,14 +6096,6 @@ noop-fn@^1.0.0:
   resolved "https://registry.yarnpkg.com/noop-fn/-/noop-fn-1.0.0.tgz#5f33d47f13d2150df93e0cb036699e982f78ffbf"
   integrity sha1-XzPUfxPSFQ35PgywNmmemC94/78=
 
-nopt@^4.0.1:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
-  integrity sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==
-  dependencies:
-    abbrev "1"
-    osenv "^0.1.4"
-
 normalize-css-color@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/normalize-css-color/-/normalize-css-color-1.0.2.tgz#02991e97cccec6623fe573afbbf0de6a1f3e9f8d"
@@ -6266,27 +6137,6 @@ normalize-url@^4.1.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
   integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
 
-npm-bundled@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
-  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
-  dependencies:
-    npm-normalize-package-bin "^1.0.1"
-
-npm-normalize-package-bin@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
-  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
-
-npm-packlist@^1.1.6:
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
-  integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
-  dependencies:
-    ignore-walk "^3.0.1"
-    npm-bundled "^1.0.1"
-    npm-normalize-package-bin "^1.0.1"
-
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -6301,16 +6151,6 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
-npmlog@^4.0.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
-  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
-  dependencies:
-    are-we-there-yet "~1.1.2"
-    console-control-strings "~1.1.0"
-    gauge "~2.7.3"
-    set-blocking "~2.0.0"
-
 nullthrows@^1.1.0, nullthrows@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
@@ -6488,11 +6328,6 @@ ora@^3.4.0:
     strip-ansi "^5.2.0"
     wcwidth "^1.0.1"
 
-os-homedir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
-  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
-
 os-locale@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
@@ -6507,14 +6342,6 @@ os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-osenv@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
-  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
-  dependencies:
-    os-homedir "^1.0.0"
-    os-tmpdir "^1.0.0"
-
 p-cancelable@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc"
@@ -6908,16 +6735,6 @@ range-parser@~1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-rc@^1.2.7:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
-  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
-  dependencies:
-    deep-extend "^0.6.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
 react-devtools-core@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.6.0.tgz#2443b3c6fac78b801702af188abc6d83d56224e6"
@@ -7043,7 +6860,7 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-readable-stream@^2.0.1, readable-stream@^2.0.6, readable-stream@^2.2.2, readable-stream@~2.3.6:
+readable-stream@^2.0.1, readable-stream@^2.2.2, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -7297,7 +7114,7 @@ rimraf@2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^2.5.4, rimraf@^2.6.1:
+rimraf@^2.5.4:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -7394,7 +7211,7 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-sax@^1.2.1, sax@^1.2.4:
+sax@^1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -7414,7 +7231,7 @@ scheduler@0.19.1, scheduler@^0.19.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -7463,7 +7280,7 @@ serve-static@^1.13.1:
     parseurl "~1.3.3"
     send "0.17.1"
 
-set-blocking@^2.0.0, set-blocking@~2.0.0:
+set-blocking@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
@@ -7769,7 +7586,7 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
+string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
   integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
@@ -7896,11 +7713,6 @@ strip-json-comments@^3.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.0.tgz#7638d31422129ecf4457440009fba03f9f9ac180"
   integrity sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==
 
-strip-json-comments@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
-  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
-
 sudo-prompt@^9.0.0:
   version "9.2.1"
   resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-9.2.1.tgz#77efb84309c9ca489527a4e749f287e6bdd52afd"
@@ -7955,19 +7767,6 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
-tar@^4.4.2:
-  version "4.4.13"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
-  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
-  dependencies:
-    chownr "^1.1.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.8.6"
-    minizlib "^1.2.1"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.3"
-
 temp@0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/temp/-/temp-0.8.3.tgz#e0c6bc4d26b903124410e4fed81103014dfc1f59"
@@ -8493,13 +8292,6 @@ which@^2.0.1, which@^2.0.2:
   dependencies:
     isexe "^2.0.0"
 
-wide-align@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
-  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
-  dependencies:
-    string-width "^1.0.2 || 2"
-
 word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
@@ -8642,11 +8434,6 @@ yallist@^2.1.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
   integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
-yallist@^3.0.0, yallist@^3.0.3:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
-  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
-
 yaml@^1.7.2:
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.9.2.tgz#f0cfa865f003ab707663e4f04b3956957ea564ed"