New LayoutContext API to access the frame and safe area of the root view

Libraries/ReactNative/AppRegistry.js

@@ -112,6 +112,7 @@ const AppRegistry = {
           ),
           appParameters.initialProps,
           appParameters.rootTag,
+          appParameters.initialLayoutContext,
           wrapperComponentProvider && wrapperComponentProvider(appParameters),
           appParameters.fabric,
           false,

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,
+};

Libraries/ReactNative/renderApplication.js

@@ -16,16 +16,20 @@ 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');
 
 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>
   );
 

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',

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;

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',
   },
 });

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'),

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'),

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,