.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.

.eslintrc.js

@@ -1,12 +1,3 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
 const typescriptEslintRecommended = require('@typescript-eslint/eslint-plugin/dist/configs/recommended.json');
 const typescriptEslintPrettier = require('eslint-config-prettier/@typescript-eslint');
 

.gitignore

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

README.md

@@ -96,10 +96,10 @@ function App() {
 Usage with hooks api:
 
 ```js
-import { useSafeArea } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 function HookComponent() {
-  const insets = useSafeArea();
+  const insets = useSafeAreaInsets();
 
   return <View style={{ paddingTop: insets.top }} />;
 }
@@ -108,14 +108,14 @@ function HookComponent() {
 Usage with consumer api:
 
 ```js
-import { SafeAreaConsumer } from 'react-native-safe-area-context';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 
 class ClassComponent extends React.Component {
   render() {
     return (
-      <SafeAreaConsumer>
+      <SafeAreaInsetsContext.Consumer>
         {insets => <View style={{ paddingTop: insets.top }} />}
-      </SafeAreaConsumer>
+      </SafeAreaInsetsContext.Consumer>
     );
   }
 }
@@ -137,21 +137,21 @@ function SomeComponent() {
 
 ### Web SSR
 
-If you are doing server side rendering on the web you can use `initialSafeAreaInsets` to inject insets value based on the device the user has, or simply pass zero values. Since insets measurement is async it will break rendering your page content otherwise.
+If you are doing server side rendering on the web you can use `initialMetrics` to inject insets and frame value based on the device the user has, or simply pass zero values. Since insets measurement is async it will break rendering your page content otherwise.
 
 ### Optimization
 
-To speed up the initial render, you can import `initialWindowSafeAreaInsets` from this package and set as the `initialSafeAreaInsets` prop on the provider as described in Web SSR. You cannot do this if your provider remounts, or you are using `react-native-navigation`.
+To speed up the initial render, you can import `initialWindowMetrics` from this package and set as the `initialMetrics` prop on the provider as described in Web SSR. You cannot do this if your provider remounts, or you are using `react-native-navigation`.
 
 ```js
 import {
   SafeAreaProvider,
-  initialWindowSafeAreaInsets
+  initialWindowMetrics
 } from 'react-native-safe-area-context';
 
 function App() {
   return (
-    <SafeAreaProvider initialSafeAreaInsets={initialWindowSafeAreaInsets}>
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
       ...
     </SafeAreaProvider>
   );

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

@@ -2,88 +2,71 @@ package com.th3rdwave.safeareacontext;
 
 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 android.support.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) {
-    // 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.
-    EdgeInsets windowInsets;
+  private static @Nullable EdgeInsets getRootWindowInsetsCompat(View rootView) {
     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
       WindowInsets insets = rootView.getRootWindowInsets();
       if (insets == null) {
         return null;
       }
-      windowInsets = new EdgeInsets(
+      return new EdgeInsets(
           insets.getSystemWindowInsetTop(),
           insets.getSystemWindowInsetRight(),
           insets.getSystemWindowInsetBottom(),
           insets.getSystemWindowInsetLeft());
     } else {
-      int rotation = windowManager.getDefaultDisplay().getRotation();
-      int statusBarHeight = 0;
-      int resourceId = rootView.getResources().getIdentifier("status_bar_height", "dimen", "android");
-      if (resourceId > 0) {
-        statusBarHeight = rootView.getResources().getDimensionPixelSize(resourceId);
-      }
-      int navbarHeight = 0;
-      resourceId = rootView.getResources().getIdentifier("navigation_bar_height", "dimen", "android");
-      if (resourceId > 0) {
-        navbarHeight = rootView.getResources().getDimensionPixelSize(resourceId);
-      }
+      Rect visibleRect = new Rect();
+      rootView.getWindowVisibleDisplayFrame(visibleRect);
+      return new EdgeInsets(
+          visibleRect.top,
+          rootView.getWidth() - visibleRect.right,
+          rootView.getHeight() - visibleRect.bottom,
+          visibleRect.left);
+    }
+  }
 
-      windowInsets = new EdgeInsets(
-          statusBarHeight,
-          rotation == Surface.ROTATION_90 ? navbarHeight : 0,
-          rotation == Surface.ROTATION_0 || rotation == Surface.ROTATION_180 ? navbarHeight : 0,
-          rotation == Surface.ROTATION_270 ? navbarHeight : 0);
+  static @Nullable EdgeInsets getSafeAreaInsets(View rootView, View view) {
+    EdgeInsets windowInsets = getRootWindowInsetsCompat(rootView);
+    if (windowInsets == null) {
+      return null;
     }
 
-    // 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 @Nullable com.th3rdwave.safeareacontext.Rect getFrame(ViewGroup rootView, View view) {
+    // This can happen while the view gets unmounted.
+    if (view.getParent() == null) {
+      return null;
+    }
+    Rect offset = new Rect();
+    view.getDrawingRect(offset);
+    try {
+      rootView.offsetDescendantRectToMyCoords(view, offset);
+    } catch (IllegalArgumentException ex) {
+      // This can throw if the view is not a descendant of rootView. This should not
+      // happen but avoid potential crashes.
+      ex.printStackTrace();
+      return null;
+    }
+
+    return new com.th3rdwave.safeareacontext.Rect(offset.left, offset.top, view.getWidth(), view.getHeight());
+  }
 }

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

@@ -1,39 +1,40 @@
 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;
 import com.facebook.react.views.view.ReactViewGroup;
 
 import android.support.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) {
+  public SafeAreaView(Context context) {
     super(context);
-
-    mWindowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
   }
 
   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(getRootView(), this);
+    Rect frame = SafeAreaUtils.getFrame((ViewGroup) getRootView(), this);
+    if (edgeInsets != null && frame != 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

@@ -1,9 +1,8 @@
 package com.th3rdwave.safeareacontext;
 
 import android.app.Activity;
-import android.content.Context;
 import android.view.View;
-import android.view.WindowManager;
+import android.view.ViewGroup;
 
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.common.MapBuilder;
@@ -19,13 +18,11 @@ import android.support.annotation.Nullable;
 
 public class SafeAreaViewManager extends ViewGroupManager<SafeAreaView> {
   private final ReactApplicationContext mContext;
-  private final WindowManager mWindowManager;
 
   public SafeAreaViewManager(ReactApplicationContext context) {
     super();
 
     mContext = context;
-    mWindowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
   }
 
   @Override
@@ -37,7 +34,7 @@ public class SafeAreaViewManager extends ViewGroupManager<SafeAreaView> {
   @Override
   @NonNull
   public SafeAreaView createViewInstance(@NonNull ThemedReactContext context) {
-    return new SafeAreaView(context, mWindowManager);
+    return new SafeAreaView(context);
   }
 
   @Override
@@ -46,8 +43,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 +64,24 @@ 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);
-    if (insets == null) {
+    View contentView = decorView.findViewById(android.R.id.content);
+    EdgeInsets insets = SafeAreaUtils.getSafeAreaInsets(decorView, contentView);
+    Rect frame = SafeAreaUtils.getFrame(decorView, contentView);
+    if (insets == null || frame == 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));
+  }
+}

babel.config.js

@@ -1,3 +1,13 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        alias: {
+          'react-native-safe-area-context': './src',
+        },
+      },
+    ],
+  ],
 };

example/App.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { View, Text, StatusBar } from 'react-native';
-
-// import { SafeAreaProvider, useSafeArea } from 'react-native-safe-area-context'; in your app.
-import {
-  SafeAreaProvider,
-  useSafeArea,
-  initialWindowSafeAreaInsets,
-} from '../src';
-
-const Screen = () => {
-  const insets = useSafeArea();
-
-  return (
-    <>
-      <StatusBar
-        barStyle="dark-content"
-        translucent
-        backgroundColor="transparent"
-      />
-      <View
-        style={{
-          flex: 1,
-          backgroundColor: 'red',
-          paddingTop: insets.top,
-          paddingLeft: insets.left,
-          paddingBottom: insets.bottom,
-          paddingRight: insets.right,
-        }}
-      >
-        <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>
-      </View>
-    </>
-  );
-};
-
-export default function App() {
-  return (
-    <SafeAreaProvider>
-      <Screen />
-    </SafeAreaProvider>
-  );
-}

example/android/app/build.gradle

@@ -15,10 +15,12 @@ import com.android.build.OutputFile
  *   // the name of the generated asset file containing your JS bundle
  *   bundleAssetName: "index.android.bundle",
  *
- *   // the entry file for bundle generation
+ *   // the entry file for bundle generation. If none specified and
+ *   // "index.android.js" exists, it will be used. Otherwise "index.js" is
+ *   // default. Can be overridden with ENTRY_FILE environment variable.
  *   entryFile: "index.android.js",
  *
- *   // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format
+ *   // https://reactnative.dev/docs/performance#enable-the-ram-format
  *   bundleCommand: "ram-bundle",
  *
  *   // whether to bundle JS and assets in debug mode
@@ -148,12 +150,13 @@ android {
         }
         release {
             // Caution! In production, you need to generate your own keystore file.
-            // see https://facebook.github.io/react-native/docs/signed-apk-android.
+            // see https://reactnative.dev/docs/signed-apk-android.
             signingConfig signingConfigs.debug
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }
     }
+
     // applicationVariants are e.g. debug, release
     applicationVariants.all { variant ->
         variant.outputs.each { output ->
@@ -181,8 +184,20 @@ android {
 
 dependencies {
     implementation fileTree(dir: "libs", include: ["*.jar"])
+    //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+"  // From node_modules
 
+    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
+    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
+      exclude group:'com.facebook.fbjni'
+    }
+    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
+        exclude group:'com.facebook.flipper'
+    }
+    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
+        exclude group:'com.facebook.flipper'
+    }
+
     if (enableHermes) {
       def hermesPath = "../../../node_modules/hermesvm/android/";
       debugImplementation files(hermesPath + "hermes-debug.aar")
@@ -191,6 +206,11 @@ dependencies {
       implementation jscFlavor
     }
 
+    implementation project(":react-native-community-async-storage")
+    implementation project(":react-native-gesture-handler")
+    implementation project(":react-native-reanimated")
+    implementation project(":react-native-screens")
+
     implementation project(":react-native-safe-area-context")
 }
 

example/android/app/src/debug/java/com/safeareaviewexample/ReactNativeFlipper.java

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
+ * directory of this source tree.
+ */
+package com.safeareaviewexample;
+import android.content.Context;
+import com.facebook.flipper.android.AndroidFlipperClient;
+import com.facebook.flipper.android.utils.FlipperUtils;
+import com.facebook.flipper.core.FlipperClient;
+import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
+import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
+import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
+import com.facebook.flipper.plugins.inspector.DescriptorMapping;
+import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
+import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
+import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
+import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
+import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.modules.network.NetworkingModule;
+import okhttp3.OkHttpClient;
+public class ReactNativeFlipper {
+  public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
+    if (FlipperUtils.shouldEnableFlipper(context)) {
+      final FlipperClient client = AndroidFlipperClient.getInstance(context);
+      client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
+      client.addPlugin(new ReactFlipperPlugin());
+      client.addPlugin(new DatabasesFlipperPlugin(context));
+      client.addPlugin(new SharedPreferencesFlipperPlugin(context));
+      client.addPlugin(CrashReporterPlugin.getInstance());
+      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
+      NetworkingModule.setCustomClientBuilder(
+          new NetworkingModule.CustomClientBuilder() {
+            @Override
+            public void apply(OkHttpClient.Builder builder) {
+              builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
+            }
+          });
+      client.addPlugin(networkFlipperPlugin);
+      client.start();
+      // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
+      // Hence we run if after all native modules have been initialized
+      ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
+      if (reactContext == null) {
+        reactInstanceManager.addReactInstanceEventListener(
+            new ReactInstanceManager.ReactInstanceEventListener() {
+              @Override
+              public void onReactContextInitialized(ReactContext reactContext) {
+                reactInstanceManager.removeReactInstanceEventListener(this);
+                reactContext.runOnNativeModulesQueueThread(
+                    new Runnable() {
+                      @Override
+                      public void run() {
+                        client.addPlugin(new FrescoFlipperPlugin());
+                      }
+                    });
+              }
+            });
+      } else {
+        client.addPlugin(new FrescoFlipperPlugin());
+      }
+    }
+  }
+}

example/android/app/src/main/AndroidManifest.xml

@@ -13,7 +13,8 @@
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
+        android:launchMode="singleTask"
         android:windowSoftInputMode="adjustResize">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />

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

@@ -1,9 +1,19 @@
 package com.safeareaviewexample;
 
+import android.os.Bundle;
+import android.view.View;
+import android.view.WindowManager;
+
 import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.ReactRootView;
+import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 
 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 +22,30 @@ public class MainActivity extends ReactActivity {
     protected String getMainComponentName() {
         return "SafeAreaViewExample";
     }
+
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+      return new ReactActivityDelegate(this, getMainComponentName()) {
+        @Override
+        protected ReactRootView createRootView() {
+          return new RNGestureHandlerEnabledRootView(MainActivity.this);
+        }
+      };
+    }
+
+    @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/java/com/safeareaviewexample/MainApplication.java

@@ -1,14 +1,21 @@
 package com.safeareaviewexample;
 
 import android.app.Application;
+import android.content.Context;
 
 import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
 import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
+import com.swmansion.rnscreens.RNScreensPackage;
+import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
+import com.swmansion.reanimated.ReanimatedPackage;
+import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
 
+import java.lang.reflect.InvocationTargetException;
 import java.util.Arrays;
 import java.util.List;
 
@@ -24,6 +31,10 @@ public class MainApplication extends Application implements ReactApplication {
     protected List<ReactPackage> getPackages() {
       return Arrays.asList(
           new MainReactPackage(),
+          new RNScreensPackage(),
+          new RNGestureHandlerPackage(),
+          new ReanimatedPackage(),
+          new AsyncStoragePackage(),
           new SafeAreaContextPackage());
     }
 
@@ -42,5 +53,37 @@ public class MainApplication extends Application implements ReactApplication {
   public void onCreate() {
     super.onCreate();
     SoLoader.init(this, /* native exopackage */ false);
+    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+  }
+
+  /**
+   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
+   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+   *
+   * @param context
+   * @param reactInstanceManager
+   */
+  private static void initializeFlipper(
+      Context context, ReactInstanceManager reactInstanceManager) {
+    if (BuildConfig.DEBUG) {
+      try {
+        /*
+         We use reflection here to pick up the class that initializes Flipper,
+         since Flipper library is not available in release mode
+        */
+        Class<?> aClass = Class.forName("com.safeareaviewexample.ReactNativeFlipper");
+        aClass
+            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
+            .invoke(null, context, reactInstanceManager);
+      } catch (ClassNotFoundException e) {
+        e.printStackTrace();
+      } catch (NoSuchMethodException e) {
+        e.printStackTrace();
+      } catch (IllegalAccessException e) {
+        e.printStackTrace();
+      } catch (InvocationTargetException e) {
+        e.printStackTrace();
+      }
+    }
   }
 }

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/android/build.gradle

@@ -2,19 +2,17 @@
 
 buildscript {
     ext {
-        buildToolsVersion = "28.0.3"
+        buildToolsVersion = "29.0.2"
         minSdkVersion = 16
-        compileSdkVersion = 28
-        targetSdkVersion = 28
-        supportLibVersion = "28.0.0"
+        compileSdkVersion = 29
+        targetSdkVersion = 29
     }
     repositories {
         google()
         jcenter()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:3.4.1")
-
+        classpath("com.android.tools.build:gradle:3.5.3")
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
     }
@@ -34,5 +32,6 @@ allprojects {
 
         google()
         jcenter()
+        maven { url 'https://www.jitpack.io' }
     }
 }

example/android/gradle.properties

@@ -17,5 +17,11 @@
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
 
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
 android.useAndroidX=true
+# Automatically convert third-party libraries to use AndroidX
 android.enableJetifier=true
+# Version of flipper SDK to use with React Native
+FLIPPER_VERSION=0.33.1

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

example/android/gradlew

@@ -7,7 +7,7 @@
 # you may not use this file except in compliance with the License.
 # You may obtain a copy of the License at
 #
-#      http://www.apache.org/licenses/LICENSE-2.0
+#      https://www.apache.org/licenses/LICENSE-2.0
 #
 # Unless required by applicable law or agreed to in writing, software
 # distributed under the License is distributed on an "AS IS" BASIS,
@@ -125,8 +125,8 @@ if $darwin; then
     GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
 fi
 
-# For Cygwin, switch paths to Windows format before running java
-if $cygwin ; then
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
     APP_HOME=`cygpath --path --mixed "$APP_HOME"`
     CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
     JAVACMD=`cygpath --unix "$JAVACMD"`
@@ -154,19 +154,19 @@ if $cygwin ; then
         else
             eval `echo args$i`="\"$arg\""
         fi
-        i=$((i+1))
+        i=`expr $i + 1`
     done
     case $i in
-        (0) set -- ;;
-        (1) set -- "$args0" ;;
-        (2) set -- "$args0" "$args1" ;;
-        (3) set -- "$args0" "$args1" "$args2" ;;
-        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
-        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
-        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
-        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
-        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
-        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+        0) set -- ;;
+        1) set -- "$args0" ;;
+        2) set -- "$args0" "$args1" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
     esac
 fi
 
@@ -175,14 +175,9 @@ save () {
     for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
     echo " "
 }
-APP_ARGS=$(save "$@")
+APP_ARGS=`save "$@"`
 
 # Collect all arguments for the java command, following the shell quoting and substitution rules
 eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
 
-# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
-if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
-  cd "$(dirname "$0")"
-fi
-
 exec "$JAVACMD" "$@"

example/android/gradlew.bat

@@ -5,7 +5,7 @@
 @rem you may not use this file except in compliance with the License.
 @rem You may obtain a copy of the License at
 @rem
-@rem      http://www.apache.org/licenses/LICENSE-2.0
+@rem      https://www.apache.org/licenses/LICENSE-2.0
 @rem
 @rem Unless required by applicable law or agreed to in writing, software
 @rem distributed under the License is distributed on an "AS IS" BASIS,
@@ -29,6 +29,9 @@ if "%DIRNAME%" == "" set DIRNAME=.
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
 @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
 

example/android/settings.gradle

@@ -3,3 +3,12 @@ include ':app'
 
 include ':react-native-safe-area-context'
 project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../../android')
+
+include ':react-native-community-async-storage'
+project(':react-native-community-async-storage').projectDir = new File(rootProject.projectDir, '../../node_modules/@react-native-community/async-storage/android')
+include ':react-native-gesture-handler'
+project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../../node_modules/react-native-gesture-handler/android')
+include ':react-native-reanimated'
+project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../../node_modules/react-native-reanimated/android')
+include ':react-native-screens'
+project(':react-native-screens').projectDir = new File(rootProject.projectDir, '../../node_modules/react-native-screens/android')

example/app.json

@@ -2,7 +2,7 @@
   "name": "SafeAreaViewExample",
   "displayName": "SafeAreaViewExample",
   "expo": {
-    "entryPoint": "node_modules/expo/AppEntry",
+    "entryPoint": "./example/index.expo",
     "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 './src/App';
+
+registerRootComponent(App);

example/index.js

@@ -1,5 +1,5 @@
 import { AppRegistry } from 'react-native';
-import App from './App';
+import App from './src/App';
 import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

example/ios/Podfile

@@ -1,37 +1,20 @@
-platform :ios, '9.0'
+$root_path = "../.."
+$node_modules = "#{$root_path}/node_modules"
+$react_native_path = "#{$node_modules}/react-native"
 
-target 'SafeAreaViewExample' do
-  # Pods for SafeAreaViewExample
-  pod 'FBLazyVector', :path => "../../node_modules/react-native/Libraries/FBLazyVector"
-  pod 'FBReactNativeSpec', :path => "../../node_modules/react-native/Libraries/FBReactNativeSpec"
-  pod 'RCTRequired', :path => "../../node_modules/react-native/Libraries/RCTRequired"
-  pod 'RCTTypeSafety', :path => "../../node_modules/react-native/Libraries/TypeSafety"
-  pod 'React', :path => '../../node_modules/react-native/'
-  pod 'React-Core', :path => '../../node_modules/react-native/'
-  pod 'React-CoreModules', :path => '../../node_modules/react-native/React/CoreModules'
-  pod 'React-Core/DevSupport', :path => '../../node_modules/react-native/'
-  pod 'React-RCTActionSheet', :path => '../../node_modules/react-native/Libraries/ActionSheetIOS'
-  pod 'React-RCTAnimation', :path => '../../node_modules/react-native/Libraries/NativeAnimation'
-  pod 'React-RCTBlob', :path => '../../node_modules/react-native/Libraries/Blob'
-  pod 'React-RCTImage', :path => '../../node_modules/react-native/Libraries/Image'
-  pod 'React-RCTLinking', :path => '../../node_modules/react-native/Libraries/LinkingIOS'
-  pod 'React-RCTNetwork', :path => '../../node_modules/react-native/Libraries/Network'
-  pod 'React-RCTSettings', :path => '../../node_modules/react-native/Libraries/Settings'
-  pod 'React-RCTText', :path => '../../node_modules/react-native/Libraries/Text'
-  pod 'React-RCTVibration', :path => '../../node_modules/react-native/Libraries/Vibration'
-  pod 'React-Core/RCTWebSocket', :path => '../../node_modules/react-native/'
+require_relative "#{$node_modules}/react-native/scripts/react_native_pods"
+require_relative "#{$node_modules}/@react-native-community/cli-platform-ios/native_modules"
 
-  pod 'React-cxxreact', :path => '../../node_modules/react-native/ReactCommon/cxxreact'
-  pod 'React-jsi', :path => '../../node_modules/react-native/ReactCommon/jsi'
-  pod 'React-jsiexecutor', :path => '../../node_modules/react-native/ReactCommon/jsiexecutor'
-  pod 'React-jsinspector', :path => '../../node_modules/react-native/ReactCommon/jsinspector'
-  pod 'ReactCommon/jscallinvoker', :path => "../../node_modules/react-native/ReactCommon"
-  pod 'ReactCommon/turbomodule/core', :path => "../../node_modules/react-native/ReactCommon"
-  pod 'Yoga', :path => '../../node_modules/react-native/ReactCommon/yoga'
+platform :ios, "10.0"
 
-  pod 'DoubleConversion', :podspec => '../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
-  pod 'glog', :podspec => '../../node_modules/react-native/third-party-podspecs/glog.podspec'
-  pod 'Folly', :podspec => '../../node_modules/react-native/third-party-podspecs/Folly.podspec'
+target "SafeAreaViewExample" do
+  use_react_native!(path: $react_native_path)
 
-  pod 'react-native-safe-area-context', :path => '../../'
+  pod "react-native-safe-area-context", :path => $root_path
+  pod "RNCAsyncStorage", :path => "#{$node_modules}/@react-native-community/async-storage"
+  pod "RNCMaskedView", :path => "#{$node_modules}/@react-native-community/masked-view"
+  pod "RNGestureHandler", :path => "#{$node_modules}/react-native-gesture-handler"
+  pod "RNReanimated", :path => "#{$node_modules}/react-native-reanimated"
+  pod "RNScreens", :path => "#{$node_modules}/react-native-screens"
 end
+

example/ios/Podfile.lock

@@ -1,224 +1,262 @@
 PODS:
   - boost-for-react-native (1.63.0)
   - DoubleConversion (1.1.6)
-  - FBLazyVector (0.61.5)
-  - FBReactNativeSpec (0.61.5):
-    - Folly (= 2018.10.22.00)
-    - RCTRequired (= 0.61.5)
-    - RCTTypeSafety (= 0.61.5)
-    - React-Core (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - ReactCommon/turbomodule/core (= 0.61.5)
-  - Folly (2018.10.22.00):
+  - FBLazyVector (0.63.0-rc.0)
+  - FBReactNativeSpec (0.63.0-rc.0):
+    - Folly (= 2020.01.13.00)
+    - RCTRequired (= 0.63.0-rc.0)
+    - RCTTypeSafety (= 0.63.0-rc.0)
+    - React-Core (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - ReactCommon/turbomodule/core (= 0.63.0-rc.0)
+  - Folly (2020.01.13.00):
     - boost-for-react-native
     - DoubleConversion
-    - Folly/Default (= 2018.10.22.00)
+    - Folly/Default (= 2020.01.13.00)
     - glog
-  - Folly/Default (2018.10.22.00):
+  - Folly/Default (2020.01.13.00):
     - boost-for-react-native
     - DoubleConversion
     - glog
   - glog (0.3.5)
-  - RCTRequired (0.61.5)
-  - RCTTypeSafety (0.61.5):
-    - FBLazyVector (= 0.61.5)
-    - Folly (= 2018.10.22.00)
-    - RCTRequired (= 0.61.5)
-    - React-Core (= 0.61.5)
-  - React (0.61.5):
-    - React-Core (= 0.61.5)
-    - React-Core/DevSupport (= 0.61.5)
-    - React-Core/RCTWebSocket (= 0.61.5)
-    - React-RCTActionSheet (= 0.61.5)
-    - React-RCTAnimation (= 0.61.5)
-    - React-RCTBlob (= 0.61.5)
-    - React-RCTImage (= 0.61.5)
-    - React-RCTLinking (= 0.61.5)
-    - React-RCTNetwork (= 0.61.5)
-    - React-RCTSettings (= 0.61.5)
-    - React-RCTText (= 0.61.5)
-    - React-RCTVibration (= 0.61.5)
-  - React-Core (0.61.5):
-    - Folly (= 2018.10.22.00)
+  - RCTRequired (0.63.0-rc.0)
+  - RCTTypeSafety (0.63.0-rc.0):
+    - FBLazyVector (= 0.63.0-rc.0)
+    - Folly (= 2020.01.13.00)
+    - RCTRequired (= 0.63.0-rc.0)
+    - React-Core (= 0.63.0-rc.0)
+  - React (0.63.0-rc.0):
+    - React-Core (= 0.63.0-rc.0)
+    - React-Core/DevSupport (= 0.63.0-rc.0)
+    - React-Core/RCTWebSocket (= 0.63.0-rc.0)
+    - React-RCTActionSheet (= 0.63.0-rc.0)
+    - React-RCTAnimation (= 0.63.0-rc.0)
+    - React-RCTBlob (= 0.63.0-rc.0)
+    - React-RCTImage (= 0.63.0-rc.0)
+    - React-RCTLinking (= 0.63.0-rc.0)
+    - React-RCTNetwork (= 0.63.0-rc.0)
+    - React-RCTSettings (= 0.63.0-rc.0)
+    - React-RCTText (= 0.63.0-rc.0)
+    - React-RCTVibration (= 0.63.0-rc.0)
+  - React-callinvoker (0.63.0-rc.0)
+  - React-Core (0.63.0-rc.0):
+    - Folly (= 2020.01.13.00)
     - glog
-    - React-Core/Default (= 0.61.5)
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - React-jsiexecutor (= 0.61.5)
+    - React-Core/Default (= 0.63.0-rc.0)
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-jsiexecutor (= 0.63.0-rc.0)
     - Yoga
-  - React-Core/CoreModulesHeaders (0.61.5):
-    - Folly (= 2018.10.22.00)
+  - React-Core/CoreModulesHeaders (0.63.0-rc.0):
+    - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - React-jsiexecutor (= 0.61.5)
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-jsiexecutor (= 0.63.0-rc.0)
     - Yoga
-  - React-Core/Default (0.61.5):
-    - Folly (= 2018.10.22.00)
+  - React-Core/Default (0.63.0-rc.0):
+    - Folly (= 2020.01.13.00)
     - glog
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - React-jsiexecutor (= 0.61.5)
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-jsiexecutor (= 0.63.0-rc.0)
     - Yoga
-  - React-Core/DevSupport (0.61.5):
-    - Folly (= 2018.10.22.00)
+  - React-Core/DevSupport (0.63.0-rc.0):
+    - Folly (= 2020.01.13.00)
     - glog
-    - React-Core/Default (= 0.61.5)
-    - React-Core/RCTWebSocket (= 0.61.5)
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - React-jsiexecutor (= 0.61.5)
-    - React-jsinspector (= 0.61.5)
+    - React-Core/Default (= 0.63.0-rc.0)
+    - React-Core/RCTWebSocket (= 0.63.0-rc.0)
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-jsiexecutor (= 0.63.0-rc.0)
+    - React-jsinspector (= 0.63.0-rc.0)
     - Yoga
-  - React-Core/RCTActionSheetHeaders (0.61.5):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTActionSheetHeaders (0.63.0-rc.0):
+    - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - React-jsiexecutor (= 0.61.5)
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-jsiexecutor (= 0.63.0-rc.0)
     - Yoga
-  - React-Core/RCTAnimationHeaders (0.61.5):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTAnimationHeaders (0.63.0-rc.0):
+    - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - React-jsiexecutor (= 0.61.5)
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-jsiexecutor (= 0.63.0-rc.0)
     - Yoga
-  - React-Core/RCTBlobHeaders (0.61.5):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTBlobHeaders (0.63.0-rc.0):
+    - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - React-jsiexecutor (= 0.61.5)
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-jsiexecutor (= 0.63.0-rc.0)
     - Yoga
-  - React-Core/RCTImageHeaders (0.61.5):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTImageHeaders (0.63.0-rc.0):
+    - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - React-jsiexecutor (= 0.61.5)
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-jsiexecutor (= 0.63.0-rc.0)
     - Yoga
-  - React-Core/RCTLinkingHeaders (0.61.5):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTLinkingHeaders (0.63.0-rc.0):
+    - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - React-jsiexecutor (= 0.61.5)
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-jsiexecutor (= 0.63.0-rc.0)
     - Yoga
-  - React-Core/RCTNetworkHeaders (0.61.5):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTNetworkHeaders (0.63.0-rc.0):
+    - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - React-jsiexecutor (= 0.61.5)
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-jsiexecutor (= 0.63.0-rc.0)
     - Yoga
-  - React-Core/RCTSettingsHeaders (0.61.5):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTSettingsHeaders (0.63.0-rc.0):
+    - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - React-jsiexecutor (= 0.61.5)
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-jsiexecutor (= 0.63.0-rc.0)
     - Yoga
-  - React-Core/RCTTextHeaders (0.61.5):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTTextHeaders (0.63.0-rc.0):
+    - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - React-jsiexecutor (= 0.61.5)
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-jsiexecutor (= 0.63.0-rc.0)
     - Yoga
-  - React-Core/RCTVibrationHeaders (0.61.5):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTVibrationHeaders (0.63.0-rc.0):
+    - Folly (= 2020.01.13.00)
     - glog
     - React-Core/Default
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - React-jsiexecutor (= 0.61.5)
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-jsiexecutor (= 0.63.0-rc.0)
     - Yoga
-  - React-Core/RCTWebSocket (0.61.5):
-    - Folly (= 2018.10.22.00)
+  - React-Core/RCTWebSocket (0.63.0-rc.0):
+    - Folly (= 2020.01.13.00)
     - glog
-    - React-Core/Default (= 0.61.5)
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - React-jsiexecutor (= 0.61.5)
+    - React-Core/Default (= 0.63.0-rc.0)
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-jsiexecutor (= 0.63.0-rc.0)
     - Yoga
-  - React-CoreModules (0.61.5):
-    - FBReactNativeSpec (= 0.61.5)
-    - Folly (= 2018.10.22.00)
-    - RCTTypeSafety (= 0.61.5)
-    - React-Core/CoreModulesHeaders (= 0.61.5)
-    - React-RCTImage (= 0.61.5)
-    - ReactCommon/turbomodule/core (= 0.61.5)
-  - React-cxxreact (0.61.5):
+  - React-CoreModules (0.63.0-rc.0):
+    - FBReactNativeSpec (= 0.63.0-rc.0)
+    - Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.63.0-rc.0)
+    - React-Core/CoreModulesHeaders (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-RCTImage (= 0.63.0-rc.0)
+    - ReactCommon/turbomodule/core (= 0.63.0-rc.0)
+  - React-cxxreact (0.63.0-rc.0):
     - boost-for-react-native (= 1.63.0)
     - DoubleConversion
-    - Folly (= 2018.10.22.00)
+    - Folly (= 2020.01.13.00)
     - glog
-    - React-jsinspector (= 0.61.5)
-  - React-jsi (0.61.5):
+    - React-callinvoker (= 0.63.0-rc.0)
+    - React-jsinspector (= 0.63.0-rc.0)
+  - React-jsi (0.63.0-rc.0):
     - boost-for-react-native (= 1.63.0)
     - DoubleConversion
-    - Folly (= 2018.10.22.00)
+    - Folly (= 2020.01.13.00)
     - glog
-    - React-jsi/Default (= 0.61.5)
-  - React-jsi/Default (0.61.5):
+    - React-jsi/Default (= 0.63.0-rc.0)
+  - React-jsi/Default (0.63.0-rc.0):
     - boost-for-react-native (= 1.63.0)
     - DoubleConversion
-    - Folly (= 2018.10.22.00)
+    - Folly (= 2020.01.13.00)
     - glog
-  - React-jsiexecutor (0.61.5):
+  - React-jsiexecutor (0.63.0-rc.0):
     - DoubleConversion
-    - Folly (= 2018.10.22.00)
+    - Folly (= 2020.01.13.00)
     - glog
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-  - React-jsinspector (0.61.5)
-  - react-native-safe-area-context (0.6.4):
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+  - React-jsinspector (0.63.0-rc.0)
+  - react-native-safe-area-context (1.0.0):
     - React
-  - React-RCTActionSheet (0.61.5):
-    - React-Core/RCTActionSheetHeaders (= 0.61.5)
-  - React-RCTAnimation (0.61.5):
-    - React-Core/RCTAnimationHeaders (= 0.61.5)
-  - React-RCTBlob (0.61.5):
-    - React-Core/RCTBlobHeaders (= 0.61.5)
-    - React-Core/RCTWebSocket (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - React-RCTNetwork (= 0.61.5)
-  - React-RCTImage (0.61.5):
-    - React-Core/RCTImageHeaders (= 0.61.5)
-    - React-RCTNetwork (= 0.61.5)
-  - React-RCTLinking (0.61.5):
-    - React-Core/RCTLinkingHeaders (= 0.61.5)
-  - React-RCTNetwork (0.61.5):
-    - React-Core/RCTNetworkHeaders (= 0.61.5)
-  - React-RCTSettings (0.61.5):
-    - React-Core/RCTSettingsHeaders (= 0.61.5)
-  - React-RCTText (0.61.5):
-    - React-Core/RCTTextHeaders (= 0.61.5)
-  - React-RCTVibration (0.61.5):
-    - React-Core/RCTVibrationHeaders (= 0.61.5)
-  - ReactCommon/jscallinvoker (0.61.5):
+  - React-RCTActionSheet (0.63.0-rc.0):
+    - React-Core/RCTActionSheetHeaders (= 0.63.0-rc.0)
+  - React-RCTAnimation (0.63.0-rc.0):
+    - FBReactNativeSpec (= 0.63.0-rc.0)
+    - Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.63.0-rc.0)
+    - React-Core/RCTAnimationHeaders (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - ReactCommon/turbomodule/core (= 0.63.0-rc.0)
+  - React-RCTBlob (0.63.0-rc.0):
+    - FBReactNativeSpec (= 0.63.0-rc.0)
+    - Folly (= 2020.01.13.00)
+    - React-Core/RCTBlobHeaders (= 0.63.0-rc.0)
+    - React-Core/RCTWebSocket (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-RCTNetwork (= 0.63.0-rc.0)
+    - ReactCommon/turbomodule/core (= 0.63.0-rc.0)
+  - React-RCTImage (0.63.0-rc.0):
+    - FBReactNativeSpec (= 0.63.0-rc.0)
+    - Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.63.0-rc.0)
+    - React-Core/RCTImageHeaders (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - React-RCTNetwork (= 0.63.0-rc.0)
+    - ReactCommon/turbomodule/core (= 0.63.0-rc.0)
+  - React-RCTLinking (0.63.0-rc.0):
+    - FBReactNativeSpec (= 0.63.0-rc.0)
+    - React-Core/RCTLinkingHeaders (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - ReactCommon/turbomodule/core (= 0.63.0-rc.0)
+  - React-RCTNetwork (0.63.0-rc.0):
+    - FBReactNativeSpec (= 0.63.0-rc.0)
+    - Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.63.0-rc.0)
+    - React-Core/RCTNetworkHeaders (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - ReactCommon/turbomodule/core (= 0.63.0-rc.0)
+  - React-RCTSettings (0.63.0-rc.0):
+    - FBReactNativeSpec (= 0.63.0-rc.0)
+    - Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.63.0-rc.0)
+    - React-Core/RCTSettingsHeaders (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - ReactCommon/turbomodule/core (= 0.63.0-rc.0)
+  - React-RCTText (0.63.0-rc.0):
+    - React-Core/RCTTextHeaders (= 0.63.0-rc.0)
+  - React-RCTVibration (0.63.0-rc.0):
+    - FBReactNativeSpec (= 0.63.0-rc.0)
+    - Folly (= 2020.01.13.00)
+    - React-Core/RCTVibrationHeaders (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+    - ReactCommon/turbomodule/core (= 0.63.0-rc.0)
+  - ReactCommon/turbomodule/core (0.63.0-rc.0):
     - DoubleConversion
-    - Folly (= 2018.10.22.00)
+    - Folly (= 2020.01.13.00)
     - glog
-    - React-cxxreact (= 0.61.5)
-  - ReactCommon/turbomodule/core (0.61.5):
-    - DoubleConversion
-    - Folly (= 2018.10.22.00)
-    - glog
-    - React-Core (= 0.61.5)
-    - React-cxxreact (= 0.61.5)
-    - React-jsi (= 0.61.5)
-    - ReactCommon/jscallinvoker (= 0.61.5)
+    - React-callinvoker (= 0.63.0-rc.0)
+    - React-Core (= 0.63.0-rc.0)
+    - React-cxxreact (= 0.63.0-rc.0)
+    - React-jsi (= 0.63.0-rc.0)
+  - RNCAsyncStorage (1.10.1):
+    - React
+  - RNCMaskedView (0.1.10):
+    - React
+  - RNGestureHandler (1.6.1):
+    - React
+  - RNReanimated (1.8.0):
+    - React
+  - RNScreens (2.7.0):
+    - React
   - Yoga (1.14.0)
 
 DEPENDENCIES:
@@ -230,6 +268,7 @@ DEPENDENCIES:
   - RCTRequired (from `../../node_modules/react-native/Libraries/RCTRequired`)
   - RCTTypeSafety (from `../../node_modules/react-native/Libraries/TypeSafety`)
   - React (from `../../node_modules/react-native/`)
+  - React-callinvoker (from `../../node_modules/react-native/ReactCommon/callinvoker`)
   - React-Core (from `../../node_modules/react-native/`)
   - React-Core/DevSupport (from `../../node_modules/react-native/`)
   - React-Core/RCTWebSocket (from `../../node_modules/react-native/`)
@@ -238,7 +277,7 @@ DEPENDENCIES:
   - React-jsi (from `../../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../../node_modules/react-native/ReactCommon/jsinspector`)
-  - react-native-safe-area-context (from `../../`)
+  - react-native-safe-area-context (from `../..`)
   - React-RCTActionSheet (from `../../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../../node_modules/react-native/Libraries/NativeAnimation`)
   - React-RCTBlob (from `../../node_modules/react-native/Libraries/Blob`)
@@ -248,8 +287,12 @@ DEPENDENCIES:
   - React-RCTSettings (from `../../node_modules/react-native/Libraries/Settings`)
   - React-RCTText (from `../../node_modules/react-native/Libraries/Text`)
   - React-RCTVibration (from `../../node_modules/react-native/Libraries/Vibration`)
-  - ReactCommon/jscallinvoker (from `../../node_modules/react-native/ReactCommon`)
   - ReactCommon/turbomodule/core (from `../../node_modules/react-native/ReactCommon`)
+  - "RNCAsyncStorage (from `../../node_modules/@react-native-community/async-storage`)"
+  - "RNCMaskedView (from `../../node_modules/@react-native-community/masked-view`)"
+  - RNGestureHandler (from `../../node_modules/react-native-gesture-handler`)
+  - RNReanimated (from `../../node_modules/react-native-reanimated`)
+  - RNScreens (from `../../node_modules/react-native-screens`)
   - Yoga (from `../../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -273,6 +316,8 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/react-native/Libraries/TypeSafety"
   React:
     :path: "../../node_modules/react-native/"
+  React-callinvoker:
+    :path: "../../node_modules/react-native/ReactCommon/callinvoker"
   React-Core:
     :path: "../../node_modules/react-native/"
   React-CoreModules:
@@ -286,7 +331,7 @@ EXTERNAL SOURCES:
   React-jsinspector:
     :path: "../../node_modules/react-native/ReactCommon/jsinspector"
   react-native-safe-area-context:
-    :path: "../../"
+    :path: "../.."
   React-RCTActionSheet:
     :path: "../../node_modules/react-native/Libraries/ActionSheetIOS"
   React-RCTAnimation:
@@ -307,38 +352,54 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/react-native/Libraries/Vibration"
   ReactCommon:
     :path: "../../node_modules/react-native/ReactCommon"
+  RNCAsyncStorage:
+    :path: "../../node_modules/@react-native-community/async-storage"
+  RNCMaskedView:
+    :path: "../../node_modules/@react-native-community/masked-view"
+  RNGestureHandler:
+    :path: "../../node_modules/react-native-gesture-handler"
+  RNReanimated:
+    :path: "../../node_modules/react-native-reanimated"
+  RNScreens:
+    :path: "../../node_modules/react-native-screens"
   Yoga:
     :path: "../../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
-  DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
-  FBLazyVector: aaeaf388755e4f29cd74acbc9e3b8da6d807c37f
-  FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75
-  Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
-  glog: 1f3da668190260b06b429bb211bfbee5cd790c28
-  RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1
-  RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320
-  React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78
-  React-Core: 688b451f7d616cc1134ac95295b593d1b5158a04
-  React-CoreModules: d04f8494c1a328b69ec11db9d1137d667f916dcb
-  React-cxxreact: d0f7bcafa196ae410e5300736b424455e7fb7ba7
-  React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
-  React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
-  React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
-  react-native-safe-area-context: 52342d2d80ea8faadd0ffa76d83b6051f20c5329
-  React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
-  React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
-  React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72
-  React-RCTImage: 6b8e8df449eb7c814c99a92d6b52de6fe39dea4e
-  React-RCTLinking: 121bb231c7503cf9094f4d8461b96a130fabf4a5
-  React-RCTNetwork: fb353640aafcee84ca8b78957297bd395f065c9a
-  React-RCTSettings: 8db258ea2a5efee381fcf7a6d5044e2f8b68b640
-  React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
-  React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
-  ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
-  Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
+  DoubleConversion: cde416483dac037923206447da6e1454df403714
+  FBLazyVector: 78609f00baec7c48492967441897aa8cee25a612
+  FBReactNativeSpec: 78b0d7c0ecca12a7306ce8c04f041bc358c60beb
+  Folly: b73c3869541e86821df3c387eb0af5f65addfab4
+  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
+  RCTRequired: c5302fd1e3225d47b041121363398dc265a964ac
+  RCTTypeSafety: a42f9e52df553d6bdc3a007376e948252f250cba
+  React: 6c9152bc1b9fefba67ca0344c6e242f01039dd6b
+  React-callinvoker: 99716fad454984727741acd315e653385869b592
+  React-Core: 548f0e70be73b463b16acf6a05c1668ab1dc9697
+  React-CoreModules: 814839144329ae12bf51a3e87938e77e205e6915
+  React-cxxreact: 3c30dbf55f1d1847a3c7e140f249a0c4a296d93e
+  React-jsi: 87b6b899f6c81c29487d0416969c261b73f46a2d
+  React-jsiexecutor: 0ca3a8a0a65f9eb9aec3273c4cf44f6d31277937
+  React-jsinspector: 09b8cb3fefdf81b2889a13cc1a645e905e514ddb
+  react-native-safe-area-context: a346c75f2288147527365ce27b59ca6d38c27805
+  React-RCTActionSheet: b6d2445d7317359997ed0c650421d0a0b9dd58cb
+  React-RCTAnimation: 2f48bd93a4f5317cd5ab7189c6b5e469b60fb7bf
+  React-RCTBlob: b8da9c90135ee183f3ad35b521313390370b5ed2
+  React-RCTImage: 705db0bdff4609796e8548716ce19a34488bb7a3
+  React-RCTLinking: ecc90e00cc0604ddb2276d828c6227a7251eaa5e
+  React-RCTNetwork: b05b4e09038cac3e63b7ddbdac0d7abb8e18655d
+  React-RCTSettings: bbd1601b51a6475157bc03f39d6378ce15ed0954
+  React-RCTText: 32e3c891fa74b1b2544517e59ee5fbc96f672983
+  React-RCTVibration: ab7fb7b10ca373d7e931b15e18b5f6d1663367ca
+  ReactCommon: 14ae20c83bd846c1790e45ad95e0f0717dcd034f
+  RNCAsyncStorage: 39831e0dc5f547a1fb2669eb9e091d460a9be2be
+  RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
+  RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
+  RNReanimated: 955cf4068714003d2f1a6e2bae3fb1118f359aff
+  RNScreens: cf198f915f8a2bf163de94ca9f5bfc8d326c3706
+  Yoga: 5ffb724bde6d20a1828a1dc9a368085f404a1203
 
-PODFILE CHECKSUM: 3385dd94e97e53501bf5b4afd25375c777edd67d
+PODFILE CHECKSUM: 90edcd974101399fc4c4cb2f6ffd1ccb481b16ff
 
-COCOAPODS: 1.8.4
+COCOAPODS: 1.9.1

example/ios/SafeAreaViewExample-Bridging-Header.h

@@ -0,0 +1,4 @@
+//
+//  Use this file to import your target's public headers that you would like to expose to Swift.
+//
+

example/ios/SafeAreaViewExample-tvOS/Info.plist

@@ -1,53 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>en</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleName</key>
-	<string>$(PRODUCT_NAME)</string>
-	<key>CFBundlePackageType</key>
-	<string>APPL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>CFBundleVersion</key>
-	<string>1</string>
-	<key>LSRequiresIPhoneOS</key>
-	<true/>
-	<key>NSAppTransportSecurity</key>
-	<dict>
-		<key>NSExceptionDomains</key>
-		<dict>
-			<key>localhost</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-			</dict>
-		</dict>
-	</dict>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
-	<key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
-	<key>UIRequiredDeviceCapabilities</key>
-	<array>
-		<string>armv7</string>
-	</array>
-	<key>UISupportedInterfaceOrientations</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
-</dict>
-</plist>

example/ios/SafeAreaViewExample-tvOSTests/Info.plist

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>en</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleName</key>
-	<string>$(PRODUCT_NAME)</string>
-	<key>CFBundlePackageType</key>
-	<string>BNDL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>CFBundleVersion</key>
-	<string>1</string>
-</dict>
-</plist>

example/ios/SafeAreaViewExample.xcodeproj/project.pbxproj

@@ -11,6 +11,7 @@
 		13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
+		19CA4076245DE96A00FEEC94 /* File.swift in Sources */ = {isa = PBXBuildFile; fileRef = 19CA4075245DE96A00FEEC94 /* File.swift */; };
 		D590E4D001221F6B5AF11381 /* libPods-SafeAreaViewExample.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 275F94A75481D4E6C652CF4F /* libPods-SafeAreaViewExample.a */; };
 /* End PBXBuildFile section */
 
@@ -24,6 +25,8 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = SafeAreaViewExample/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = SafeAreaViewExample/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = SafeAreaViewExample/main.m; sourceTree = "<group>"; };
+		19CA4074245DE96A00FEEC94 /* SafeAreaViewExample-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "SafeAreaViewExample-Bridging-Header.h"; sourceTree = "<group>"; };
+		19CA4075245DE96A00FEEC94 /* File.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = File.swift; path = SafeAreaViewExample/File.swift; sourceTree = "<group>"; };
 		275F94A75481D4E6C652CF4F /* libPods-SafeAreaViewExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-SafeAreaViewExample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		69AAEDE94ED39E6A720417AA /* Pods-SafeAreaViewExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-SafeAreaViewExample.release.xcconfig"; path = "Target Support Files/Pods-SafeAreaViewExample/Pods-SafeAreaViewExample.release.xcconfig"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
@@ -52,6 +55,8 @@
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
 				13B07FB71A68108700A75B9A /* main.m */,
+				19CA4075245DE96A00FEEC94 /* File.swift */,
+				19CA4074245DE96A00FEEC94 /* SafeAreaViewExample-Bridging-Header.h */,
 			);
 			name = SafeAreaViewExample;
 			sourceTree = "<group>";
@@ -117,6 +122,7 @@
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
+				9C3A0F31C8045DB6E6F56F79 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -133,8 +139,13 @@
 		83CBB9F71A601CBA00E9B192 /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 1030;
+				LastUpgradeCheck = 1140;
 				ORGANIZATIONNAME = Facebook;
+				TargetAttributes = {
+					13B07F861A680F5B00A75B9A = {
+						LastSwiftMigration = 1140;
+					};
+				};
 			};
 			buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "SafeAreaViewExample" */;
 			compatibilityVersion = "Xcode 3.2";
@@ -203,6 +214,24 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
+		9C3A0F31C8045DB6E6F56F79 /* [CP] Copy Pods Resources */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-SafeAreaViewExample/Pods-SafeAreaViewExample-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
+			);
+			name = "[CP] Copy Pods Resources";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-SafeAreaViewExample/Pods-SafeAreaViewExample-resources.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 		FD10A7F022414F080027D42C /* Start Packager */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -219,7 +248,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n    if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n      echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n      exit 2\n    fi\n  else\n    open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n  fi\nfi\n";
+			shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n    if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n      echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n      exit 2\n    fi\n  else\n    open \"$SRCROOT/../../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n  fi\nfi\n";
 			showEnvVarsInLog = 0;
 		};
 /* End PBXShellScriptBuildPhase section */
@@ -230,6 +259,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
+				19CA4076245DE96A00FEEC94 /* File.swift in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -253,7 +283,9 @@
 			isa = XCBuildConfiguration;
 			baseConfigurationReference = 0A89B68A414A9ACE6081995A /* Pods-SafeAreaViewExample.debug.xcconfig */;
 			buildSettings = {
+				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = 1;
 				DEAD_CODE_STRIPPING = NO;
 				INFOPLIST_FILE = SafeAreaViewExample/Info.plist;
@@ -265,6 +297,9 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = SafeAreaViewExample;
+				SWIFT_OBJC_BRIDGING_HEADER = "SafeAreaViewExample-Bridging-Header.h";
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+				SWIFT_VERSION = 5.0;
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Debug;
@@ -273,7 +308,9 @@
 			isa = XCBuildConfiguration;
 			baseConfigurationReference = 69AAEDE94ED39E6A720417AA /* Pods-SafeAreaViewExample.release.xcconfig */;
 			buildSettings = {
+				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = 1;
 				INFOPLIST_FILE = SafeAreaViewExample/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -284,6 +321,8 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = SafeAreaViewExample;
+				SWIFT_OBJC_BRIDGING_HEADER = "SafeAreaViewExample-Bridging-Header.h";
+				SWIFT_VERSION = 5.0;
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Release;
@@ -291,6 +330,7 @@
 		83CBBA201A601CBA00E9B192 /* Debug */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
+				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				ALWAYS_SEARCH_USER_PATHS = NO;
 				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
 				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
@@ -318,6 +358,7 @@
 				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				COPY_PHASE_STRIP = NO;
+				ENABLE_BITCODE = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
@@ -338,6 +379,7 @@
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
+				OTHER_CFLAGS = "-DFB_SONARKIT_ENABLED=1";
 				SDKROOT = iphoneos;
 			};
 			name = Debug;
@@ -345,6 +387,7 @@
 		83CBBA211A601CBA00E9B192 /* Release */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
+				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				ALWAYS_SEARCH_USER_PATHS = NO;
 				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
 				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
@@ -372,6 +415,7 @@
 				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				COPY_PHASE_STRIP = YES;
+				ENABLE_BITCODE = NO;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
@@ -384,6 +428,7 @@
 				GCC_WARN_UNUSED_VARIABLE = YES;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
+				OTHER_CFLAGS = "-DFB_SONARKIT_ENABLED=1";
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
 			};

example/ios/SafeAreaViewExample.xcodeproj/xcshareddata/xcschemes/SafeAreaViewExample.xcscheme

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1030"
+   LastUpgradeVersion = "1140"
    version = "1.3">
    <BuildAction
-      parallelizeBuildables = "NO"
+      parallelizeBuildables = "YES"
       buildImplicitDependencies = "YES">
       <BuildActionEntries>
          <BuildActionEntry
@@ -55,6 +55,15 @@
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       shouldUseLaunchSchemeArgsEnv = "YES">
+      <MacroExpansion>
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "SafeAreaViewExample.app"
+            BlueprintName = "SafeAreaViewExample"
+            ReferencedContainer = "container:SafeAreaViewExample.xcodeproj">
+         </BuildableReference>
+      </MacroExpansion>
       <Testables>
          <TestableReference
             skipped = "NO">
@@ -67,17 +76,6 @@
             </BuildableReference>
          </TestableReference>
       </Testables>
-      <MacroExpansion>
-         <BuildableReference
-            BuildableIdentifier = "primary"
-            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-            BuildableName = "SafeAreaViewExample.app"
-            BlueprintName = "SafeAreaViewExample"
-            ReferencedContainer = "container:SafeAreaViewExample.xcodeproj">
-         </BuildableReference>
-      </MacroExpansion>
-      <AdditionalOptions>
-      </AdditionalOptions>
    </TestAction>
    <LaunchAction
       buildConfiguration = "Debug"
@@ -99,8 +97,6 @@
             ReferencedContainer = "container:SafeAreaViewExample.xcodeproj">
          </BuildableReference>
       </BuildableProductRunnable>
-      <AdditionalOptions>
-      </AdditionalOptions>
    </LaunchAction>
    <ProfileAction
       buildConfiguration = "Release"

example/ios/SafeAreaViewExample/AppDelegate.h

@@ -1,10 +1,3 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 #import <React/RCTBridgeDelegate.h>
 #import <UIKit/UIKit.h>
 

example/ios/SafeAreaViewExample/AppDelegate.m

@@ -1,20 +1,35 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 #import "AppDelegate.h"
 
 #import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
 
+// #if DEBUG
+// #import <FlipperKit/FlipperClient.h>
+// #import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
+// #import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
+// #import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
+// #import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
+// #import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
+// static void InitializeFlipper(UIApplication *application) {
+//   FlipperClient *client = [FlipperClient sharedClient];
+//   SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
+//   [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
+//   [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
+//   [client addPlugin:[FlipperKitReactPlugin new]];
+//   [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
+//   [client start];
+// }
+// #endif
+
 @implementation AppDelegate
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
+// #if DEBUG
+//   InitializeFlipper(application);
+// #endif
+
   RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
   RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                    moduleName:@"SafeAreaViewExample"

example/ios/SafeAreaViewExample/File.swift

@@ -0,0 +1,9 @@
+//
+//  File.swift
+//  SafeAreaViewExample
+//
+//  Created by Janic Duplessis on 2020-05-02.
+//  Copyright © 2020 Facebook. All rights reserved.
+//
+
+import Foundation

example/ios/SafeAreaViewExample/main.m

@@ -1,10 +1,3 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 #import <UIKit/UIKit.h>
 
 #import "AppDelegate.h"

example/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "example",
+  "dependencies": {
+    "@react-native-community/async-storage": "^1.10.1",
+    "@react-native-community/masked-view": "^0.1.10",
+    "@react-navigation/native": "^5.3.2",
+    "@react-navigation/stack": "^5.3.6",
+    "@react-navigation/bottom-tabs": "^5.4.4",
+    "expo": "^37.0.8",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-native": "^0.63.0-rc.0",
+    "react-native-web": "^0.12.2",
+    "react-navigation": "^4.3.9",
+    "react-navigation-stack": "^2.5.0",
+    "react-navigation-tabs": "^2.8.13",
+    "react-native-gesture-handler": "^1.6.1",
+    "react-native-screens": "^2.7.0",
+    "react-native-reanimated": "^1.8.0",
+    "react-native-safe-area-view": "^1.1.1"
+  }
+}

example/src/App.tsx

@@ -0,0 +1,83 @@
+import 'react-native-gesture-handler';
+import * as React from 'react';
+import { DevSettings, View, Text } from 'react-native';
+import { enableScreens } from 'react-native-screens';
+import AsyncStorage from '@react-native-community/async-storage';
+import ReactNavigation4Example from './ReactNavigation4Example';
+import ReactNavigation5Example from './ReactNavigation5Example';
+import SimpleExample from './SimpleExample';
+import NativeStackExample from './NativeStackExample';
+import ReactNativeSafeAreaView from './ReactNativeSafeAreaView';
+
+enableScreens();
+
+const STORAGE_KEY = 'rnsac-current-example';
+
+export default function App() {
+  const [currentExample, setCurrentExample] = React.useState<string | null>(
+    null,
+  );
+
+  React.useEffect(() => {
+    async function loadCurrentExample() {
+      const example = await AsyncStorage.getItem(STORAGE_KEY);
+      setCurrentExample(example ?? null);
+    }
+    loadCurrentExample();
+  }, []);
+
+  React.useEffect(() => {
+    async function saveCurrentExample() {
+      if (currentExample != null) {
+        await AsyncStorage.setItem(STORAGE_KEY, currentExample);
+      }
+    }
+    saveCurrentExample();
+  }, [currentExample]);
+
+  React.useEffect(() => {
+    DevSettings.addMenuItem('Show Simple Example', () => {
+      setCurrentExample('simple');
+    });
+    DevSettings.addMenuItem('Show React Navigation 4 Example', () => {
+      setCurrentExample('react-navigation-4');
+    });
+    DevSettings.addMenuItem('Show React Navigation 5 Example', () => {
+      setCurrentExample('react-navigation-5');
+    });
+    DevSettings.addMenuItem('Show Native Stack Example', () => {
+      setCurrentExample('native-stack');
+    });
+    DevSettings.addMenuItem('Show React Native Safe Area View Example', () => {
+      setCurrentExample('react-native-safe-area-view');
+    });
+  }, []);
+
+  switch (currentExample) {
+    case 'simple':
+      return <SimpleExample />;
+    case 'react-navigation-4':
+      return <ReactNavigation4Example />;
+    case 'react-navigation-5':
+      return <ReactNavigation5Example />;
+    case 'native-stack':
+      return <NativeStackExample />;
+    case 'react-native-safe-area-view':
+      return <ReactNativeSafeAreaView />;
+    default:
+      return (
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 24,
+          }}
+        >
+          <Text style={{ textAlign: 'center', fontSize: 14 }}>
+            Open the dev menu to choose an example
+          </Text>
+        </View>
+      );
+  }
+}

example/src/NativeStackExample.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Text, View, Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import type { StackScreenProps } from '@react-navigation/stack';
+
+type Routes = {
+  Home: undefined;
+  Details: undefined;
+  Settings: undefined;
+};
+
+function HomeScreen({ navigation }: StackScreenProps<Routes, 'Home'>) {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Home Screen</Text>
+      <Button
+        title="Go to Details"
+        onPress={() => navigation.navigate('Details')}
+      />
+    </View>
+  );
+}
+
+function SettingsScreen({ navigation }: StackScreenProps<Routes, 'Settings'>) {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Settings Screen</Text>
+      <Button
+        title="Go to Details"
+        onPress={() => navigation.navigate('Details')}
+      />
+    </View>
+  );
+}
+
+const Tab = createBottomTabNavigator();
+
+function TabsScreen() {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Settings" component={SettingsScreen} />
+    </Tab.Navigator>
+  );
+}
+
+function DetailsScreen({ navigation }: StackScreenProps<Routes, 'Details'>) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Details Screen</Text>
+      <Button
+        title="Go to Details... again"
+        onPress={() => navigation.push('Details')}
+      />
+      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator();
+
+export default function NativeStackExample() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Tabs" component={TabsScreen} />
+        <Stack.Screen name="Details" component={DetailsScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

example/src/ReactNativeSafeAreaView.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import SafeAreaView from 'react-native-safe-area-view';
+
+export default function ReactNativeSafeAreaView() {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={{ flex: 1, backgroundColor: 'red' }}>
+        <View style={{ flex: 1, backgroundColor: 'blue' }} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+}

example/src/ReactNavigation4Example.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { View, Text, Button } from 'react-native';
+import { createAppContainer } from 'react-navigation';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
+import {
+  createStackNavigator,
+  NavigationStackProp,
+} from 'react-navigation-stack';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+type NavigationScreenProps = {
+  navigation: NavigationStackProp<{}, {}>;
+};
+
+function HomeScreen({ navigation }: NavigationScreenProps) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home Screen</Text>
+      <Button
+        title="Go to Details"
+        onPress={() => navigation.navigate('Details')}
+      />
+    </View>
+  );
+}
+
+function SettingsScreen({ navigation }: NavigationScreenProps) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Settings Screen</Text>
+      <Button
+        title="Go to Details"
+        onPress={() => navigation.navigate('Details')}
+      />
+    </View>
+  );
+}
+
+const TabNavigator = createBottomTabNavigator({
+  Home: HomeScreen,
+  Settings: SettingsScreen,
+});
+
+function DetailsScreen({ navigation }: NavigationScreenProps) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Details Screen</Text>
+      <Button
+        title="Go to Details... again"
+        onPress={() => navigation.push('Details')}
+      />
+      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
+
+const AppNavigator = createStackNavigator(
+  {
+    Tabs: TabNavigator,
+    Details: DetailsScreen,
+  },
+  {
+    initialRouteName: 'Tabs',
+  },
+);
+
+const AppContainer = createAppContainer(AppNavigator);
+
+export default function ReactNavigation4Example() {
+  return (
+    <SafeAreaProvider>
+      <AppContainer />
+    </SafeAreaProvider>
+  );
+}

example/src/ReactNavigation5Example.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { Text, View, Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import {
+  createStackNavigator,
+  StackScreenProps,
+} from '@react-navigation/stack';
+
+type Routes = {
+  Home: undefined;
+  Details: undefined;
+  Settings: undefined;
+};
+
+function HomeScreen({ navigation }: StackScreenProps<Routes, 'Home'>) {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Home Screen</Text>
+      <Button
+        title="Go to Details"
+        onPress={() => navigation.navigate('Details')}
+      />
+    </View>
+  );
+}
+
+function SettingsScreen({ navigation }: StackScreenProps<Routes, 'Settings'>) {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Settings Screen</Text>
+      <Button
+        title="Go to Details"
+        onPress={() => navigation.navigate('Details')}
+      />
+    </View>
+  );
+}
+
+const Tab = createBottomTabNavigator();
+
+function TabsScreen() {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Settings" component={SettingsScreen} />
+    </Tab.Navigator>
+  );
+}
+
+function DetailsScreen({ navigation }: StackScreenProps<Routes, 'Details'>) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Details Screen</Text>
+      <Button
+        title="Go to Details... again"
+        onPress={() => navigation.push('Details')}
+      />
+      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
+
+const Stack = createStackNavigator();
+
+export default function ReactNavigation5Example() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Tabs" component={TabsScreen} />
+        <Stack.Screen name="Details" component={DetailsScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

example/src/SimpleExample.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { View, Text, StatusBar, ScrollView } from 'react-native';
+
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+  initialWindowMetrics,
+  useSafeAreaFrame,
+} from 'react-native-safe-area-context';
+
+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;
+
+function SimpleExampleScreen() {
+  const insets = useSafeAreaInsets();
+  const frame = useSafeAreaFrame();
+
+  return (
+    <>
+      <StatusBar barStyle="dark-content" backgroundColor="transparent" />
+      <View
+        style={{
+          width: frame.width,
+          height: frame.height,
+          backgroundColor: 'red',
+          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,
+        }}
+      >
+        <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>
+    </>
+  );
+}
+
+export default function SimpleExample() {
+  return (
+    <View style={{ marginTop: 0, flex: 1 }}>
+      <SafeAreaProvider>
+        <SimpleExampleScreen />
+      </SafeAreaProvider>
+    </View>
+  );
+}

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 {

metro.config.js

@@ -1,17 +0,0 @@
-/**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
-module.exports = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: false,
-      },
-    }),
-  },
-};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-safe-area-context",
-  "version": "0.7.3",
+  "version": "1.0.2",
   "description": "A flexible way to handle safe area, also works on Android and web.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -27,7 +27,10 @@
     "validate:typescript": "tsc --project ./ --noEmit",
     "validate:prettier": "prettier \"src/**/*.{js,ts,tsx}\" \"example/**/*.{js,ts,tsx}\" --check",
     "validate:jest": "jest",
-    "prepare": "bob build"
+    "prepare": "bob build",
+    "example:ios": "cd ./example && react-native run-ios",
+    "example:android": "cd ./example && react-native run-android --no-jetifier",
+    "example:expo": "expo start --config example/app.json"
   },
   "keywords": [
     "react-native",
@@ -43,27 +46,42 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@react-native-community/bob": "^0.8.0",
-    "@react-native-community/eslint-config": "^0.0.7",
-    "@types/jest": "^25.1.1",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "^0.61.10",
+    "@react-native-community/async-storage": "^1.10.1",
+    "@react-native-community/bob": "^0.10.1",
+    "@react-native-community/eslint-config": "^1.1.0",
+    "@react-native-community/masked-view": "^0.1.10",
+    "@react-navigation/native": "^5.3.2",
+    "@react-navigation/stack": "^5.3.6",
+    "@react-navigation/bottom-tabs": "^5.4.4",
+    "@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.19.0",
-    "@typescript-eslint/parser": "^2.19.0",
+    "@typescript-eslint/eslint-plugin": "^2.30.0",
+    "@typescript-eslint/parser": "^2.30.0",
+    "babel-plugin-module-resolver": "^4.0.0",
     "eslint": "6.8.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-prettier": "3.1.2",
-    "expo": "^36.0.2",
-    "jest": "^25.1.0",
-    "metro-react-native-babel-preset": "^0.58.0",
-    "prettier": "^1.19.1",
-    "react": "^16.11.0",
-    "react-dom": "^16.12.0",
-    "react-native": "^0.61.0",
-    "react-native-web": "^0.12.0",
-    "react-test-renderer": "^16.12.0",
-    "typescript": "^3.7.5"
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "3.1.3",
+    "expo": "^37.0.8",
+    "expo-cli": "^3.20.1",
+    "jest": "^25.5.4",
+    "metro-react-native-babel-preset": "^0.59.0",
+    "prettier": "^2.0.5",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-native": "^0.63.0-rc.0",
+    "react-native-web": "^0.12.2",
+    "react-navigation": "^4.3.9",
+    "react-navigation-stack": "^2.5.0",
+    "react-navigation-tabs": "^2.8.13",
+    "react-native-safe-area-view": "1.1.1",
+    "react-native-gesture-handler": "^1.6.1",
+    "react-native-screens": "^2.7.0",
+    "react-native-reanimated": "^1.8.0",
+    "react-test-renderer": "^16.13.1",
+    "typescript": "^3.8.3"
   },
   "repository": {
     "type": "git",

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

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

src/InitialWindowSafeAreaInsets.ts

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

src/InitialWindowSafeAreaInsets.web.ts

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

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,3 +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('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,122 +0,0 @@
-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;
-}
-
-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,
-      };
-      // @ts-ignore: missing properties
-      onInsetsChange({ nativeEvent: { insets } });
-    };
-    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/SafeArea.types.ts

@@ -1,4 +1,4 @@
-import { NativeSyntheticEvent } from 'react-native';
+import { NativeSyntheticEvent, ViewStyle } from 'react-native';
 
 export interface EdgeInsets {
   top: number;
@@ -7,6 +7,24 @@ 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;
+
+export interface NativeSafeAreaViewProps {
+  children?: React.ReactNode;
+  style?: ViewStyle;
+  onInsetsChange: InsetChangeNativeCallback;
+}

src/SafeAreaContext.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import { StyleSheet, Dimensions } 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;
+  /**
+   * @deprecated
+   */
+  initialSafeAreaInsets?: EdgeInsets | null;
+}
+
+export function SafeAreaProvider({
+  children,
+  initialMetrics,
+  initialSafeAreaInsets,
+}: SafeAreaViewProps) {
+  const parentInsets = useParentSafeAreaInsets();
+  const parentFrame = useParentSafeAreaFrame();
+  const [insets, setInsets] = React.useState<EdgeInsets | null>(
+    initialMetrics?.insets ?? initialSafeAreaInsets ?? parentInsets ?? null,
+  );
+  const [frame, setFrame] = React.useState<Rect>(
+    initialMetrics?.frame ??
+      parentFrame ?? {
+        // Backwards compat so we render anyway if we don't have frame.
+        x: 0,
+        y: 0,
+        width: Dimensions.get('window').width,
+        height: Dimensions.get('window').height,
+      },
+  );
+  const onInsetsChange = React.useCallback((event: InsetChangedEvent) => {
+    // Backwards compat with old native code that won't send frame.
+    if (event.nativeEvent.frame != null) {
+      setFrame(event.nativeEvent.frame);
+    }
+    setInsets(event.nativeEvent.insets);
+  }, []);
+
+  return (
+    <NativeSafeAreaView style={styles.fill} onInsetsChange={onInsetsChange}>
+      {insets != 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;
+}
+
+export function withSafeAreaInsets<T>(
+  WrappedComponent: React.ComponentType<T>,
+) {
+  return (props: T) => (
+    <SafeAreaConsumer>
+      {(insets) => <WrappedComponent {...props} insets={insets} />}
+    </SafeAreaConsumer>
+  );
+}
+
+/**
+ * @deprecated
+ */
+export function useSafeArea(): EdgeInsets {
+  return useSafeAreaInsets();
+}
+
+/**
+ * @deprecated
+ */
+export function SafeAreaConsumer(
+  props: React.ComponentProps<typeof SafeAreaInsetsContext.Consumer>,
+) {
+  return <SafeAreaInsetsContext.Consumer {...props} />;
+}
+
+/**
+ * @deprecated
+ */
+export const SafeAreaContext = SafeAreaInsetsContext;

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('../InitialWindow').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('../InitialWindow').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 './InitialWindow';
+export * from './SafeArea.types';

tsconfig.json

@@ -12,7 +12,11 @@
     "moduleResolution": "node",
     "skipLibCheck": true,
     "lib": ["dom", "es2015", "es2016", "esnext"],
-    "jsx": "react-native"
+    "jsx": "react-native",
+    "baseUrl": ".",
+    "paths": {
+      "react-native-safe-area-context": ["./src"]
+    }
   },
   "exclude": ["node_modules"]
 }