Merge remote-tracking branch 'origin/master' into unjetify

.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"]
 }