diff --git a/Libraries/ReactNative/AppRegistry.js b/Libraries/ReactNative/AppRegistry.js
index aaef5ac184de8b..c18b042fba675f 100644
--- a/Libraries/ReactNative/AppRegistry.js
+++ b/Libraries/ReactNative/AppRegistry.js
@@ -112,6 +112,7 @@ const AppRegistry = {
           ),
           appParameters.initialProps,
           appParameters.rootTag,
+          appParameters.initialLayoutContext,
           wrapperComponentProvider && wrapperComponentProvider(appParameters),
           appParameters.fabric,
           false,
diff --git a/Libraries/ReactNative/RootViewLayout.js b/Libraries/ReactNative/RootViewLayout.js
new file mode 100644
index 00000000000000..8a1f17bdcadb68
--- /dev/null
+++ b/Libraries/ReactNative/RootViewLayout.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow local-strict
+ * @format
+ */
+
+const React = require('React');
+const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
+
+import type {Layout} from 'CoreEventTypes';
+
+export type LayoutContext = $ReadOnly<{|
+  layout: Layout,
+  safeAreaInsets: $ReadOnly<{|
+    top: number,
+    right: number,
+    bottom: number,
+    left: number,
+  |}>,
+|}>;
+
+/**
+ * Context used to provide layout metrics from the root view the component
+ * tree is being rendered in. This is useful when sync measurements are
+ * required.
+ */
+const Context: React.Context<LayoutContext> = React.createContext({
+  layout: {x: 0, y: 0, width: 0, height: 0},
+  safeAreaInsets: {top: 0, right: 0, bottom: 0, left: 0},
+});
+
+type Props = {|
+  children: React.Node,
+  initialLayoutContext: LayoutContext,
+  rootTag: number,
+|};
+
+function RootViewLayoutManager({
+  children,
+  initialLayoutContext,
+  rootTag,
+}: Props) {
+  const [layoutContext, setLayoutContext] = React.useState<LayoutContext>(
+    initialLayoutContext,
+  );
+  React.useLayoutEffect(() => {
+    const subscription = RCTDeviceEventEmitter.addListener(
+      'didUpdateLayoutContext',
+      event => {
+        if (rootTag === event.rootTag) {
+          setLayoutContext(event.layoutContext);
+        }
+      },
+    );
+    return () => {
+      subscription.remove();
+    };
+  }, [rootTag]);
+
+  return <Context.Provider value={layoutContext}>{children}</Context.Provider>;
+}
+
+module.exports = {
+  Context,
+  Manager: RootViewLayoutManager,
+};
diff --git a/Libraries/ReactNative/renderApplication.js b/Libraries/ReactNative/renderApplication.js
index 3fa9deff700ec5..5604f39b6b9d15 100644
--- a/Libraries/ReactNative/renderApplication.js
+++ b/Libraries/ReactNative/renderApplication.js
@@ -16,9 +16,12 @@ import type {IPerformanceLogger} from 'createPerformanceLogger';
 import PerformanceLoggerContext from 'PerformanceLoggerContext';
 const React = require('React');
 const ReactFabricIndicator = require('ReactFabricIndicator');
+const RootViewLayout = require('RootViewLayout');
 
 const invariant = require('invariant');
 
+import type {LayoutContext} from 'RootViewLayout';
+
 // require BackHandler so it sets the default handler that exits the app if no listeners respond
 require('BackHandler');
 
@@ -26,6 +29,7 @@ function renderApplication<Props: Object>(
   RootComponent: React.ComponentType<Props>,
   initialProps: Props,
   rootTag: any,
+  initialLayoutContext: LayoutContext,
   WrapperComponent?: ?React.ComponentType<*>,
   fabric?: boolean,
   showFabricIndicator?: boolean,
@@ -36,12 +40,16 @@ function renderApplication<Props: Object>(
   let renderable = (
     <PerformanceLoggerContext.Provider
       value={scopedPerformanceLogger ?? GlobalPerformanceLogger}>
-      <AppContainer rootTag={rootTag} WrapperComponent={WrapperComponent}>
-        <RootComponent {...initialProps} rootTag={rootTag} />
-        {fabric === true && showFabricIndicator === true ? (
-          <ReactFabricIndicator />
-        ) : null}
-      </AppContainer>
+      <RootViewLayout.Manager
+        initialLayoutContext={initialLayoutContext}
+        rootTag={rootTag}>
+        <AppContainer rootTag={rootTag} WrapperComponent={WrapperComponent}>
+          <RootComponent {...initialProps} rootTag={rootTag} />
+          {fabric === true && showFabricIndicator === true ? (
+            <ReactFabricIndicator />
+          ) : null}
+        </AppContainer>
+      </RootViewLayout.Manager>
     </PerformanceLoggerContext.Provider>
   );
 
diff --git a/Libraries/react-native/react-native-implementation.js b/Libraries/react-native/react-native-implementation.js
index a1efcb1ec7913b..ba30409e432955 100644
--- a/Libraries/react-native/react-native-implementation.js
+++ b/Libraries/react-native/react-native-implementation.js
@@ -71,6 +71,9 @@ module.exports = {
   get KeyboardAvoidingView() {
     return require('KeyboardAvoidingView');
   },
+  get LayoutContext() {
+    return require('RootViewLayout').Context.Consumer;
+  },
   get MaskedViewIOS() {
     warnOnce(
       'maskedviewios-moved',
diff --git a/RNTester/js/LayoutContextExample.js b/RNTester/js/LayoutContextExample.js
new file mode 100644
index 00000000000000..b5c81437e59e68
--- /dev/null
+++ b/RNTester/js/LayoutContextExample.js
@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const React = require('react');
+const {
+  LayoutContext,
+  StyleSheet,
+  View,
+  Text,
+  StatusBar,
+  Button,
+  Platform,
+} = require('react-native');
+
+const BORDER_WIDTH = 2;
+
+type Props = {
+  onExampleExit: () => void,
+};
+
+type State = {
+  hidden: boolean,
+  translucent: boolean,
+};
+
+class LayoutContextExample extends React.Component<Props, State> {
+  static title = '<LayoutContext>';
+  static description =
+    'LayoutContext allows getting layout metrics for the current root view.';
+  static external = true;
+
+  state = {
+    hidden: false,
+    translucent: false,
+  };
+
+  render() {
+    return (
+      <LayoutContext>
+        {ctx => {
+          return (
+            <>
+              <StatusBar
+                hidden={this.state.hidden}
+                translucent={this.state.translucent}
+                backgroundColor="rgba(0, 0, 0, 0.3)"
+              />
+              <View
+                style={[
+                  styles.container,
+                  {
+                    width: ctx.layout.width,
+                    height: ctx.layout.height,
+                    paddingTop: ctx.safeAreaInsets.top - BORDER_WIDTH,
+                    paddingRight: ctx.safeAreaInsets.right - BORDER_WIDTH,
+                    paddingBottom: ctx.safeAreaInsets.bottom - BORDER_WIDTH,
+                    paddingLeft: ctx.safeAreaInsets.left - BORDER_WIDTH,
+                  },
+                ]}>
+                <View style={styles.content}>
+                  <Text
+                    style={{
+                      marginBottom: 32,
+                      backgroundColor: '#eee',
+                      padding: 16,
+                    }}>
+                    {JSON.stringify(ctx, null, 2)}
+                  </Text>
+                  <Button
+                    title="Toggle status bar hidden"
+                    onPress={() =>
+                      this.setState(state => ({hidden: !state.hidden}))
+                    }
+                  />
+                  {Platform.OS === 'android' && (
+                    <Button
+                      title="Toggle status bar translucent"
+                      onPress={() =>
+                        this.setState(state => ({
+                          translucent: !state.translucent,
+                        }))
+                      }
+                    />
+                  )}
+                  <Button title="Close" onPress={this.props.onExampleExit} />
+                </View>
+              </View>
+            </>
+          );
+        }}
+      </LayoutContext>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: BORDER_WIDTH,
+    borderColor: 'red',
+    backgroundColor: '#589c90',
+  },
+  content: {
+    flex: 1,
+    backgroundColor: 'white',
+    borderWidth: BORDER_WIDTH,
+    borderColor: 'blue',
+    padding: 32,
+  },
+});
+
+module.exports = LayoutContextExample;
diff --git a/RNTester/js/RNTesterApp.android.js b/RNTester/js/RNTesterApp.android.js
index 16c6660e0742e9..1b777a9a195457 100644
--- a/RNTester/js/RNTesterApp.android.js
+++ b/RNTester/js/RNTesterApp.android.js
@@ -112,8 +112,8 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
            * found when making Flow check .android.js files. */
           this.drawer = drawer;
         }}
-        renderNavigationView={this._renderDrawerContent}
-        statusBarBackgroundColor="#589c90">
+        renderNavigationView={this._renderDrawerContent}>
+        <StatusBar backgroundColor="#589c90" />
         {this._renderApp()}
       </DrawerLayoutAndroid>
     );
@@ -245,7 +245,6 @@ const styles = StyleSheet.create({
   },
   drawerContentWrapper: {
     flex: 1,
-    paddingTop: StatusBar.currentHeight,
     backgroundColor: 'white',
   },
 });
diff --git a/RNTester/js/RNTesterList.android.js b/RNTester/js/RNTesterList.android.js
index d4bf68db97d46d..e301a642508b31 100644
--- a/RNTester/js/RNTesterList.android.js
+++ b/RNTester/js/RNTesterList.android.js
@@ -33,6 +33,10 @@ const ComponentExamples: Array<RNTesterExample> = [
     key: 'ImageExample',
     module: require('./ImageExample'),
   },
+  {
+    key: 'LayoutContextExample',
+    module: require('./LayoutContextExample'),
+  },
   {
     key: 'ModalExample',
     module: require('./ModalExample'),
diff --git a/RNTester/js/RNTesterList.ios.js b/RNTester/js/RNTesterList.ios.js
index c5d6c2b0122f94..30c55eda7f0ea5 100644
--- a/RNTester/js/RNTesterList.ios.js
+++ b/RNTester/js/RNTesterList.ios.js
@@ -53,6 +53,11 @@ const ComponentExamples: Array<RNTesterExample> = [
     module: require('./KeyboardAvoidingViewExample'),
     supportsTVOS: false,
   },
+  {
+    key: 'LayoutContextExample',
+    module: require('./LayoutContextExample'),
+    supportsTVOS: true,
+  },
   {
     key: 'LayoutEventsExample',
     module: require('./LayoutEventsExample'),
diff --git a/RNTester/js/Shared/RNTesterTypes.js b/RNTester/js/Shared/RNTesterTypes.js
index a07b60d3796213..173a9393ef624a 100644
--- a/RNTester/js/Shared/RNTesterTypes.js
+++ b/RNTester/js/Shared/RNTesterTypes.js
@@ -31,13 +31,15 @@ export type RNTesterExampleModuleItem = $ReadOnly<{|
   render: () => React.Node,
 |}>;
 
-export type RNTesterExampleModule = $ReadOnly<{|
-  title: string,
-  description: string,
-  displayName?: ?string,
-  framework?: string,
-  examples: Array<RNTesterExampleModuleItem>,
-|}>;
+export type RNTesterExampleModule =
+  | $ReadOnly<{|
+      title: string,
+      description: string,
+      displayName?: ?string,
+      framework?: string,
+      examples: Array<RNTesterExampleModuleItem>,
+    |}>
+  | ComponentType<any>;
 
 export type RNTesterExample = $ReadOnly<{|
   key: string,
diff --git a/React/Base/RCTRootView.m b/React/Base/RCTRootView.m
index 0f4e22bc170ed5..14b1077f84669e 100644
--- a/React/Base/RCTRootView.m
+++ b/React/Base/RCTRootView.m
@@ -21,6 +21,7 @@
 #import "RCTProfile.h"
 #import "RCTRootContentView.h"
 #import "RCTTouchHandler.h"
+#import "RCTSafeAreaUtils.h"
 #import "RCTUIManager.h"
 #import "RCTUIManagerUtils.h"
 #import "RCTUtils.h"
@@ -34,6 +35,23 @@
 
 NSString *const RCTContentDidAppearNotification = @"RCTContentDidAppearNotification";
 
+static NSDictionary * RCTCreateLayoutContext(CGRect frame, UIEdgeInsets safeAreaInsets) {
+  return @{
+    @"safeAreaInsets": @{
+      @"top": @(safeAreaInsets.top),
+      @"right": @(safeAreaInsets.right),
+      @"bottom": @(safeAreaInsets.bottom),
+      @"left": @(safeAreaInsets.left),
+    },
+    @"layout": @{
+      @"x": @(frame.origin.x),
+      @"y": @(frame.origin.y),
+      @"width": @(frame.size.width),
+      @"height": @(frame.size.height),
+    },
+  };
+}
+
 @interface RCTUIManager (RCTRootView)
 
 - (NSNumber *)allocateRootTag;
@@ -47,6 +65,9 @@ @implementation RCTRootView
   RCTRootContentView *_contentView;
   BOOL _passThroughTouches;
   CGSize _intrinsicContentSize;
+  CGRect _lastFrame;
+  UIEdgeInsets _lastSafeAreaInsets;
+  BOOL _isMeasured;
 }
 
 - (instancetype)initWithBridge:(RCTBridge *)bridge
@@ -71,6 +92,9 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
     _loadingViewFadeDelay = 0.25;
     _loadingViewFadeDuration = 0.25;
     _sizeFlexibility = RCTRootViewSizeFlexibilityNone;
+    _lastFrame = CGRectZero;
+    _lastSafeAreaInsets = UIEdgeInsetsZero;
+    _isMeasured = NO;
 
     [[NSNotificationCenter defaultCenter] addObserver:self
                                              selector:@selector(bridgeDidReload)
@@ -95,10 +119,6 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
 #endif
 
     [self showLoadingView];
-
-    // Immediately schedule the application to be started.
-    // (Sometimes actual `_bridge` is already batched bridge here.)
-    [self bundleFinishedLoading:([_bridge batchedBridge] ?: _bridge)];
   }
 
   RCT_PROFILE_END_EVENT(RCTProfileTagAlways, @"");
@@ -174,6 +194,16 @@ - (void)layoutSubviews
     CGRectGetMidX(self.bounds),
     CGRectGetMidY(self.bounds)
   };
+
+  if (!_isMeasured) {
+    _isMeasured = YES;
+    // Schedule the application to be started right after the first layout.
+    // This is needed since we need the root view initial frame.
+    // (Sometimes actual `_bridge` is already batched bridge here.)
+    [self bundleFinishedLoading:([_bridge batchedBridge] ?: _bridge)];
+  } else {
+    [self maybeUpdateLayoutContext];
+  }
 }
 
 - (UIViewController *)reactViewController
@@ -285,9 +315,13 @@ - (void)bundleFinishedLoading:(RCTBridge *)bridge
 - (void)runApplication:(RCTBridge *)bridge
 {
   NSString *moduleName = _moduleName ?: @"";
+  UIEdgeInsets safeAreaInsets = RCTSafeAreaInsetsForView(self, YES);
+  _lastFrame = self.frame;
+  _lastSafeAreaInsets = safeAreaInsets;
   NSDictionary *appParameters = @{
     @"rootTag": _contentView.reactTag,
     @"initialProps": _appProperties ?: @{},
+    @"initialLayoutContext": RCTCreateLayoutContext(self.frame, safeAreaInsets),
   };
 
   RCTLogInfo(@"Running application %@ (%@)", moduleName, appParameters);
@@ -366,6 +400,40 @@ - (void)contentViewInvalidated
   [self showLoadingView];
 }
 
+- (void)maybeUpdateLayoutContext
+{
+  CGRect frame = self.frame;
+  UIEdgeInsets safeAreaInsets = RCTSafeAreaInsetsForView(self, YES);
+  if (
+    RCTUIEdgeInsetsEqualToEdgeInsetsWithThreshold(safeAreaInsets, _lastSafeAreaInsets, RCTScreenScale()) &&
+    CGRectEqualToRect(frame, _lastFrame)
+  ) {
+    return;
+  }
+  NSDictionary *layoutContext = RCTCreateLayoutContext(frame, safeAreaInsets);
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdeprecated-declarations"
+  [_bridge.eventDispatcher sendDeviceEventWithName:@"didUpdateLayoutContext" body:@{
+    @"rootTag": _contentView.reactTag,
+    @"layoutContext": layoutContext,
+  }];
+#pragma clang diagnostic pop
+
+  _lastFrame = frame;
+  _lastSafeAreaInsets = safeAreaInsets;
+}
+
+#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000 /* __IPHONE_11_0 */
+
+- (void)safeAreaInsetsDidChange
+{
+  if (_isMeasured) {
+    [self maybeUpdateLayoutContext];
+  }
+}
+
+#endif
+
 - (void)dealloc
 {
   [[NSNotificationCenter defaultCenter] removeObserver:self];
diff --git a/React/React.xcodeproj/project.pbxproj b/React/React.xcodeproj/project.pbxproj
index 5936e8d19c6e01..1d9d9e1084c9f3 100644
--- a/React/React.xcodeproj/project.pbxproj
+++ b/React/React.xcodeproj/project.pbxproj
@@ -151,6 +151,8 @@
 		14F484561AABFCE100FDF6B9 /* RCTSliderManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 14F484551AABFCE100FDF6B9 /* RCTSliderManager.m */; };
 		14F7A0EC1BDA3B3C003C6C10 /* RCTPerfMonitor.m in Sources */ = {isa = PBXBuildFile; fileRef = 14F7A0EB1BDA3B3C003C6C10 /* RCTPerfMonitor.m */; };
 		14F7A0F01BDA714B003C6C10 /* RCTFPSGraph.m in Sources */ = {isa = PBXBuildFile; fileRef = 14F7A0EF1BDA714B003C6C10 /* RCTFPSGraph.m */; };
+		1904A8A021D823680024F51F /* RCTSafeAreaUtils.h in Headers */ = {isa = PBXBuildFile; fileRef = 1904A89E21D823680024F51F /* RCTSafeAreaUtils.h */; };
+		1904A8A121D823680024F51F /* RCTSafeAreaUtils.m in Sources */ = {isa = PBXBuildFile; fileRef = 1904A89F21D823680024F51F /* RCTSafeAreaUtils.m */; };
 		191E3EBE1C29D9AF00C180A6 /* RCTRefreshControlManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 191E3EBD1C29D9AF00C180A6 /* RCTRefreshControlManager.m */; };
 		191E3EC11C29DC3800C180A6 /* RCTRefreshControl.m in Sources */ = {isa = PBXBuildFile; fileRef = 191E3EC01C29DC3800C180A6 /* RCTRefreshControl.m */; };
 		199B8A6F1F44DB16005DEF67 /* RCTVersion.h in Headers */ = {isa = PBXBuildFile; fileRef = 199B8A6E1F44DB16005DEF67 /* RCTVersion.h */; };
@@ -1987,6 +1989,8 @@
 		14F7A0EB1BDA3B3C003C6C10 /* RCTPerfMonitor.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTPerfMonitor.m; sourceTree = "<group>"; };
 		14F7A0EE1BDA714B003C6C10 /* RCTFPSGraph.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; lineEnding = 0; path = RCTFPSGraph.h; sourceTree = "<group>"; xcLanguageSpecificationIdentifier = xcode.lang.objcpp; };
 		14F7A0EF1BDA714B003C6C10 /* RCTFPSGraph.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTFPSGraph.m; sourceTree = "<group>"; };
+		1904A89E21D823680024F51F /* RCTSafeAreaUtils.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTSafeAreaUtils.h; sourceTree = "<group>"; };
+		1904A89F21D823680024F51F /* RCTSafeAreaUtils.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTSafeAreaUtils.m; sourceTree = "<group>"; };
 		191E3EBC1C29D9AF00C180A6 /* RCTRefreshControlManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTRefreshControlManager.h; sourceTree = "<group>"; };
 		191E3EBD1C29D9AF00C180A6 /* RCTRefreshControlManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTRefreshControlManager.m; sourceTree = "<group>"; };
 		191E3EBF1C29DC3800C180A6 /* RCTRefreshControl.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTRefreshControl.h; sourceTree = "<group>"; };
@@ -2798,6 +2802,8 @@
 		59D031E41F8353D3008361F0 /* SafeAreaView */ = {
 			isa = PBXGroup;
 			children = (
+				1904A89E21D823680024F51F /* RCTSafeAreaUtils.h */,
+				1904A89F21D823680024F51F /* RCTSafeAreaUtils.m */,
 				59D031E51F8353D3008361F0 /* RCTSafeAreaShadowView.h */,
 				59D031E61F8353D3008361F0 /* RCTSafeAreaShadowView.m */,
 				59D031E71F8353D3008361F0 /* RCTSafeAreaView.h */,
@@ -3457,6 +3463,7 @@
 				3D80DA4C1DF820620028D040 /* RCTAppState.h in Headers */,
 				3D80DA4D1DF820620028D040 /* RCTAsyncLocalStorage.h in Headers */,
 				3D80DA4E1DF820620028D040 /* RCTClipboard.h in Headers */,
+				1904A8A021D823680024F51F /* RCTSafeAreaUtils.h in Headers */,
 				3D80DA4F1DF820620028D040 /* RCTDevLoadingView.h in Headers */,
 				3D80DA501DF820620028D040 /* RCTDevMenu.h in Headers */,
 				3D80DA511DF820620028D040 /* RCTEventEmitter.h in Headers */,
@@ -4484,6 +4491,7 @@
 				1450FF8A1BCFF28A00208362 /* RCTProfileTrampoline-x86_64.S in Sources */,
 				13D9FEEB1CDCCECF00158BD7 /* RCTEventEmitter.m in Sources */,
 				599FAA3E1FB274980058CCF6 /* RCTSurfaceRootShadowView.m in Sources */,
+				1904A8A121D823680024F51F /* RCTSafeAreaUtils.m in Sources */,
 				AC70D2E91DE489E4002E6351 /* RCTJavaScriptLoader.mm in Sources */,
 				39C50FFB2046EE3500CEE534 /* RCTVersion.m in Sources */,
 				14F7A0EC1BDA3B3C003C6C10 /* RCTPerfMonitor.m in Sources */,
diff --git a/React/Views/SafeAreaView/RCTSafeAreaUtils.h b/React/Views/SafeAreaView/RCTSafeAreaUtils.h
new file mode 100644
index 00000000000000..a43759fba43416
--- /dev/null
+++ b/React/Views/SafeAreaView/RCTSafeAreaUtils.h
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * 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 <React/RCTDefines.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/**
+ * Returns if two edge insets are equal with `threshold` for epsilon.
+ */
+RCT_EXTERN BOOL RCTUIEdgeInsetsEqualToEdgeInsetsWithThreshold(UIEdgeInsets insets1, UIEdgeInsets insets2, CGFloat threshold);
+
+/**
+ * Returns the safe area insets for a view with a polyfill for ios < 11.
+ */
+RCT_EXTERN UIEdgeInsets RCTSafeAreaInsetsForView(UIView *view, BOOL emulateUnlessSupported);
+
+NS_ASSUME_NONNULL_END
diff --git a/React/Views/SafeAreaView/RCTSafeAreaUtils.m b/React/Views/SafeAreaView/RCTSafeAreaUtils.m
new file mode 100644
index 00000000000000..d4a054362ccf56
--- /dev/null
+++ b/React/Views/SafeAreaView/RCTSafeAreaUtils.m
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "RCTSafeAreaUtils.h"
+
+#import <React/UIView+React.h>
+
+BOOL RCTUIEdgeInsetsEqualToEdgeInsetsWithThreshold(UIEdgeInsets insets1, UIEdgeInsets insets2, CGFloat threshold)
+{
+  return
+    ABS(insets1.left - insets2.left) <= threshold &&
+    ABS(insets1.right - insets2.right) <= threshold &&
+    ABS(insets1.top - insets2.top) <= threshold &&
+    ABS(insets1.bottom - insets2.bottom) <= threshold;
+}
+
+UIEdgeInsets RCTSafeAreaInsetsForView(UIView *view, BOOL emulateUnlessSupported)
+{
+#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000 /* __IPHONE_11_0 */
+  if (@available(iOS 11, *)) {
+    return view.safeAreaInsets;
+  }
+#endif
+
+  if (!emulateUnlessSupported) {
+    return UIEdgeInsetsZero;
+  }
+
+  UIViewController* vc = view.reactViewController;
+  if (!vc) {
+    return UIEdgeInsetsZero;
+  }
+
+  CGFloat topLayoutOffset = vc.topLayoutGuide.length;
+  CGFloat bottomLayoutOffset = vc.bottomLayoutGuide.length;
+  CGRect safeArea = vc.view.bounds;
+  safeArea.origin.y += topLayoutOffset;
+  safeArea.size.height -= topLayoutOffset + bottomLayoutOffset;
+  CGRect localSafeArea = [vc.view convertRect:safeArea toView:view];
+  UIEdgeInsets safeAreaInsets = UIEdgeInsetsMake(0, 0, 0, 0);
+  if (CGRectGetMinY(localSafeArea) > CGRectGetMinY(view.bounds)) {
+    safeAreaInsets.top = CGRectGetMinY(localSafeArea) - CGRectGetMinY(view.bounds);
+  }
+  if (CGRectGetMaxY(localSafeArea) < CGRectGetMaxY(view.bounds)) {
+    safeAreaInsets.bottom = CGRectGetMaxY(view.bounds) - CGRectGetMaxY(localSafeArea);
+  }
+
+  return safeAreaInsets;
+}
diff --git a/React/Views/SafeAreaView/RCTSafeAreaView.m b/React/Views/SafeAreaView/RCTSafeAreaView.m
index 8fe48113ac6ad1..1e6a3a7298dfa6 100644
--- a/React/Views/SafeAreaView/RCTSafeAreaView.m
+++ b/React/Views/SafeAreaView/RCTSafeAreaView.m
@@ -10,6 +10,7 @@
 #import <React/RCTBridge.h>
 #import <React/RCTUIManager.h>
 
+#import "RCTSafeAreaUtils.h"
 #import "RCTSafeAreaViewLocalData.h"
 
 @implementation RCTSafeAreaView {
@@ -35,51 +36,6 @@ - (BOOL)isSupportedByOS
   return [self respondsToSelector:@selector(safeAreaInsets)];
 }
 
-- (UIEdgeInsets)safeAreaInsetsIfSupportedAndEnabled
-{
-#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000 /* __IPHONE_11_0 */
-  if (self.isSupportedByOS) {
-    if (@available(iOS 11.0, *)) {
-      return self.safeAreaInsets;
-    }
-  }
-#endif
-  return self.emulateUnlessSupported ? self.emulatedSafeAreaInsets : UIEdgeInsetsZero;
-}
-
-- (UIEdgeInsets)emulatedSafeAreaInsets
-{
-  UIViewController* vc = self.reactViewController;
-
-  if (!vc) {
-    return UIEdgeInsetsZero;
-  }
-
-  CGFloat topLayoutOffset = vc.topLayoutGuide.length;
-  CGFloat bottomLayoutOffset = vc.bottomLayoutGuide.length;
-  CGRect safeArea = vc.view.bounds;
-  safeArea.origin.y += topLayoutOffset;
-  safeArea.size.height -= topLayoutOffset + bottomLayoutOffset;
-  CGRect localSafeArea = [vc.view convertRect:safeArea toView:self];
-  UIEdgeInsets safeAreaInsets = UIEdgeInsetsMake(0, 0, 0, 0);
-  if (CGRectGetMinY(localSafeArea) > CGRectGetMinY(self.bounds)) {
-    safeAreaInsets.top = CGRectGetMinY(localSafeArea) - CGRectGetMinY(self.bounds);
-  }
-  if (CGRectGetMaxY(localSafeArea) < CGRectGetMaxY(self.bounds)) {
-    safeAreaInsets.bottom = CGRectGetMaxY(self.bounds) - CGRectGetMaxY(localSafeArea);
-  }
-
-  return safeAreaInsets;
-}
-
-static BOOL UIEdgeInsetsEqualToEdgeInsetsWithThreshold(UIEdgeInsets insets1, UIEdgeInsets insets2, CGFloat threshold) {
-  return
-    ABS(insets1.left - insets2.left) <= threshold &&
-    ABS(insets1.right - insets2.right) <= threshold &&
-    ABS(insets1.top - insets2.top) <= threshold &&
-    ABS(insets1.bottom - insets2.bottom) <= threshold;
-}
-
 - (void)safeAreaInsetsDidChange
 {
   [self invalidateSafeAreaInsets];
@@ -87,7 +43,7 @@ - (void)safeAreaInsetsDidChange
 
 - (void)invalidateSafeAreaInsets
 {
-  [self setSafeAreaInsets:self.safeAreaInsetsIfSupportedAndEnabled];
+  [self setSafeAreaInsets:RCTSafeAreaInsetsForView(self, self.emulateUnlessSupported)];
 }
 
 - (void)layoutSubviews
@@ -101,7 +57,7 @@ - (void)layoutSubviews
 
 - (void)setSafeAreaInsets:(UIEdgeInsets)safeAreaInsets
 {
-  if (UIEdgeInsetsEqualToEdgeInsetsWithThreshold(safeAreaInsets, _currentSafeAreaInsets, 1.0 / RCTScreenScale())) {
+  if (RCTUIEdgeInsetsEqualToEdgeInsetsWithThreshold(safeAreaInsets, _currentSafeAreaInsets, 1.0 / RCTScreenScale())) {
     return;
   }
 
diff --git a/ReactAndroid/src/androidTest/js/UIManagerTestModule.js b/ReactAndroid/src/androidTest/js/UIManagerTestModule.js
index 4b75deb372cf8f..93146123f0f6ac 100644
--- a/ReactAndroid/src/androidTest/js/UIManagerTestModule.js
+++ b/ReactAndroid/src/androidTest/js/UIManagerTestModule.js
@@ -234,28 +234,54 @@ const UpdatePositionInListTestAppStyles = StyleSheet.create({
  */
 const emptyExactProps = Object.freeze({});
 
+const mockLayoutContext = {
+  layout: {x: 0, y: 0, width: 540, height: 720},
+  safeAreaInsets: {top: 20, right: 0, bottom: 0, left: 0},
+};
+
 const UIManagerTestModule = {
   renderFlexTestApplication(rootTag: number) {
-    renderApplication(FlexTestApp, emptyExactProps, rootTag);
+    renderApplication(FlexTestApp, emptyExactProps, rootTag, mockLayoutContext);
   },
   renderFlexWithTextApplication(rootTag: number) {
-    renderApplication(FlexWithText, emptyExactProps, rootTag);
+    renderApplication(
+      FlexWithText,
+      emptyExactProps,
+      rootTag,
+      mockLayoutContext,
+    );
   },
   renderAbsolutePositionBottomRightTestApplication(rootTag: number) {
     renderApplication(
       AbsolutePositionBottomRightTestApp,
       emptyExactProps,
       rootTag,
+      mockLayoutContext,
     );
   },
   renderAbsolutePositionTestApplication(rootTag: number) {
-    renderApplication(AbsolutePositionTestApp, emptyExactProps, rootTag);
+    renderApplication(
+      AbsolutePositionTestApp,
+      emptyExactProps,
+      rootTag,
+      mockLayoutContext,
+    );
   },
   renderCenteredTextViewTestApplication(rootTag: number, text: string) {
-    renderApplication(CenteredTextView, {text: text}, rootTag);
+    renderApplication(
+      CenteredTextView,
+      {text: text},
+      rootTag,
+      mockLayoutContext,
+    );
   },
   renderUpdatePositionInListTestApplication(rootTag: number) {
-    renderApplication(UpdatePositionInListTestApp, emptyExactProps, rootTag);
+    renderApplication(
+      UpdatePositionInListTestApp,
+      emptyExactProps,
+      rootTag,
+      mockLayoutContext,
+    );
   },
   flushUpdatePositionInList,
 };
diff --git a/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java b/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java
index 2cde3cbc2866fc..92fa37847af562 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java
@@ -24,6 +24,7 @@
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewTreeObserver;
+import android.view.WindowInsets;
 import android.view.WindowManager;
 import android.widget.FrameLayout;
 import com.facebook.common.logging.FLog;
@@ -95,6 +96,12 @@ public interface ReactRootViewEventListener {
   private int mLastHeight = 0;
   private @UIManagerType int mUIManagerType = DEFAULT;
   private final boolean mUseSurface;
+  // Previous values for layout context.
+  private int mFrameWidth = 0;
+  private int mFrameHeight = 0;
+  private float mFrameX = 0;
+  private float mFrameY = 0;
+  private @Nullable RootViewInsets mSafeAreaInsets = null;
 
   public ReactRootView(Context context) {
     super(context);
@@ -468,6 +475,85 @@ public void setAppProperties(@Nullable Bundle appProperties) {
     }
   }
 
+  private static class RootViewInsets {
+    float top;
+    float right;
+    float bottom;
+    float left;
+
+    RootViewInsets(float top, float right, float bottom, float left) {
+      this.top = top;
+      this.right = right;
+      this.bottom = bottom;
+      this.left = left;
+    }
+  }
+
+  private RootViewInsets getSafeAreaInsets() {
+    // 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.
+    // TODO: Use the DisplayCutout api when we target sdk 28+
+    RootViewInsets windowInsets;
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+      WindowInsets insets = getRootWindowInsets();
+      windowInsets = new RootViewInsets(
+        insets.getSystemWindowInsetTop(),
+        insets.getSystemWindowInsetRight(),
+        insets.getSystemWindowInsetBottom(),
+        insets.getSystemWindowInsetLeft());
+    } else {
+      int rotation =
+        ((WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE))
+          .getDefaultDisplay().getRotation();
+      int statusBarHeight = 0;
+      int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
+      if (resourceId > 0) {
+        statusBarHeight = getResources().getDimensionPixelSize(resourceId);
+      }
+      int navbarHeight = 0;
+      resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");
+      if (resourceId > 0) {
+        navbarHeight = getResources().getDimensionPixelSize(resourceId);
+      }
+
+      windowInsets = new RootViewInsets(
+        statusBarHeight,
+        rotation == Surface.ROTATION_90 ? navbarHeight : 0,
+        rotation == Surface.ROTATION_0 || rotation == Surface.ROTATION_180 ? navbarHeight : 0,
+        rotation == Surface.ROTATION_270 ? navbarHeight : 0);
+    }
+
+    // Calculate the part of the root view that overlaps with window insets.
+    int[] windowLocation = new int[2];
+    getLocationInWindow(windowLocation);
+    DisplayMetrics screenMetrics = DisplayMetricsHolder.getScreenDisplayMetrics();
+    windowInsets.top = Math.max(windowInsets.top - windowLocation[1], 0);
+    windowInsets.left = Math.max(windowInsets.left - windowLocation[0], 0);
+    windowInsets.bottom = Math.max(windowLocation[1] + getHeight() + windowInsets.bottom - screenMetrics.heightPixels, 0);
+    windowInsets.right = Math.max(windowLocation[0] + getWidth() + windowInsets.right - screenMetrics.widthPixels, 0);
+    return windowInsets;
+  }
+
+  private WritableMap getLayoutContext(RootViewInsets safeAreaInsets) {
+    WritableNativeMap layout = new WritableNativeMap();
+    layout.putDouble("width", PixelUtil.toDIPFromPixel(getWidth()));
+    layout.putDouble("height", PixelUtil.toDIPFromPixel(getHeight()));
+    layout.putDouble("x", PixelUtil.toDIPFromPixel(getX()));
+    layout.putDouble("y", PixelUtil.toDIPFromPixel(getY()));
+
+    WritableNativeMap safeAreaInsetsMap = new WritableNativeMap();
+    safeAreaInsetsMap.putDouble("top", PixelUtil.toDIPFromPixel(safeAreaInsets.top));
+    safeAreaInsetsMap.putDouble("right", PixelUtil.toDIPFromPixel(safeAreaInsets.right));
+    safeAreaInsetsMap.putDouble("bottom", PixelUtil.toDIPFromPixel(safeAreaInsets.bottom));
+    safeAreaInsetsMap.putDouble("left", PixelUtil.toDIPFromPixel(safeAreaInsets.left));
+
+    WritableNativeMap layoutContext = new WritableNativeMap();
+    layoutContext.putMap("layout", layout);
+    layoutContext.putMap("safeAreaInsets", safeAreaInsetsMap);
+    return layoutContext;
+  }
+
   /**
    * Calls into JS to start the React application. Can be called multiple times with the
    * same rootTag, which will re-render the application from the root.
@@ -497,6 +583,13 @@ public void setAppProperties(@Nullable Bundle appProperties) {
 
           WritableNativeMap appParams = new WritableNativeMap();
           appParams.putDouble("rootTag", getRootViewTag());
+          RootViewInsets insets = getSafeAreaInsets();
+          mSafeAreaInsets = insets;
+          mFrameHeight = getHeight();
+          mFrameWidth = getWidth();
+          mFrameX = getX();
+          mFrameY = getY();
+          appParams.putMap("initialLayoutContext", getLayoutContext(insets));
           @Nullable Bundle appProperties = getAppProperties();
           if (appProperties != null) {
             appParams.putMap("initialProps", Arguments.fromBundle(appProperties));
@@ -622,6 +715,7 @@ public void onGlobalLayout() {
       checkForKeyboardEvents();
       checkForDeviceOrientationChanges();
       checkForDeviceDimensionsChanges();
+      checkForLayoutContextChanges();
     }
 
     private void checkForKeyboardEvents() {
@@ -669,6 +763,22 @@ private void checkForDeviceDimensionsChanges() {
       }
     }
 
+    private void checkForLayoutContextChanges() {
+      RootViewInsets safeAreaInsets = getSafeAreaInsets();
+      if (mFrameWidth != getWidth() ||
+        mFrameHeight != getHeight() ||
+        mFrameX != getX() ||
+        mFrameY != getY() ||
+        !areInsetsEqual(mSafeAreaInsets, safeAreaInsets)) {
+        mSafeAreaInsets = safeAreaInsets;
+        mFrameWidth = getWidth();
+        mFrameHeight = getHeight();
+        mFrameX = getX();
+        mFrameY = getY();
+        emitLayoutContextEvent(safeAreaInsets);
+      }
+    }
+
     private boolean areMetricsEqual(DisplayMetrics displayMetrics, DisplayMetrics otherMetrics) {
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
         return displayMetrics.equals(otherMetrics);
@@ -685,6 +795,15 @@ private boolean areMetricsEqual(DisplayMetrics displayMetrics, DisplayMetrics ot
       }
     }
 
+    private boolean areInsetsEqual(@Nullable RootViewInsets insets, @Nullable RootViewInsets otherInsets) {
+      return insets != null &&
+        otherInsets != null &&
+        insets.top == otherInsets.top &&
+        insets.right == otherInsets.right &&
+        insets.bottom == otherInsets.bottom &&
+        insets.left == otherInsets.left;
+    }
+
     private void emitOrientationChanged(final int newRotation) {
       String name;
       double rotationDegrees;
@@ -726,5 +845,12 @@ private void emitUpdateDimensionsEvent() {
           .getNativeModule(DeviceInfoModule.class)
           .emitUpdateDimensionsEvent();
     }
+
+    private void emitLayoutContextEvent(RootViewInsets safeAreaInsets) {
+      WritableNativeMap event = new WritableNativeMap();
+      event.putMap("layoutContext", getLayoutContext(safeAreaInsets));
+      event.putInt("rootTag", getRootViewTag());
+      sendEvent("didUpdateLayoutContext", event);
+    }
   }
 }