From b003211b63c1f9be320037ff815f827acec30133 Mon Sep 17 00:00:00 2001
From: Igor Klemenski <igklemen@microsoft.com>
Date: Wed, 7 Apr 2021 17:57:40 -0700
Subject: [PATCH 1/5] Integrate 3/18 nightly RN build.

---
 .../react-native-win32-tester/overrides.json  |   4 +-
 .../react-native-win32-tester/package.json    |   4 +-
 .../src/js/utils/RNTesterList.win32.js        |  15 +
 .../react-native-win32/.flowconfig            |   1 +
 .../react-native-win32/overrides.json         |   6 +-
 .../react-native-win32/package.json           |   4 +-
 .../Libraries/Utilities/Dimensions.win32.js   |  12 +-
 .../tester/overrides.json                     |   4 +-
 .../@react-native-windows/tester/package.json |   4 +-
 .../src/js/utils/RNTesterList.windows.js      |  26 +-
 .../@react-native/repo-config/overrides.json  |   2 +-
 .../Accessibility/AccessibilityExample.js     |   2 +-
 .../js/examples/Button/ButtonExample.js       |  23 ++
 .../examples/Dimensions/DimensionsExample.js  |  20 +-
 .../FlatList/FlatList-onEndReached.js         |  28 ++
 .../FlatList-onViewableItemsChanged.js        |  38 +++
 .../FlatList/FlatList-withSeparators.js       |  27 ++
 .../js/examples/FlatList/FlatListExamples.js  | 312 ++++++++++++++++++
 .../examples/ScrollView/ScrollViewExample.js  | 134 +++++---
 .../SectionList-onViewableItemsChanged.js     |  12 +-
 .../SectionList/SectionListExamples.js        |  47 ++-
 .../tester/js/utils/RNTesterList.android.js   |  15 +
 .../tester/js/utils/RNTesterList.ios.js       |  15 +
 packages/@react-native/tester/overrides.json  |   4 +-
 packages/e2e-test-app/package.json            |   2 +-
 packages/integration-test-app/package.json    |   2 +-
 packages/node-rnw-rpc/package.json            |   2 +-
 packages/playground/package.json              |   2 +-
 packages/sample-apps/package.json             |   2 +-
 vnext/.flowconfig                             |   1 +
 vnext/ReactCommon/ReactCommon.vcxproj         |   4 +-
 .../react/renderer/mapbuffer/MapBuffer.cpp    | 135 --------
 vnext/ReactCommon/Yoga.cpp                    | 239 ++++++--------
 vnext/overrides.json                          |  22 +-
 vnext/package.json                            |   4 +-
 .../Libraries/Components/Button.windows.js    |  22 +-
 .../RefreshControl/RefreshControl.windows.js  |  10 +-
 .../Pressability/Pressability.windows.js      |  18 +-
 yarn.lock                                     |   8 +-
 39 files changed, 816 insertions(+), 416 deletions(-)
 create mode 100644 packages/@react-native/tester/js/examples/FlatList/FlatList-onEndReached.js
 create mode 100644 packages/@react-native/tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js
 create mode 100644 packages/@react-native/tester/js/examples/FlatList/FlatList-withSeparators.js
 create mode 100644 packages/@react-native/tester/js/examples/FlatList/FlatListExamples.js
 delete mode 100644 vnext/ReactCommon/TEMP_UntilReactCommonUpdate/react/renderer/mapbuffer/MapBuffer.cpp

diff --git a/packages/@office-iss/react-native-win32-tester/overrides.json b/packages/@office-iss/react-native-win32-tester/overrides.json
index 30708ad5239..2bcda44146c 100644
--- a/packages/@office-iss/react-native-win32-tester/overrides.json
+++ b/packages/@office-iss/react-native-win32-tester/overrides.json
@@ -5,7 +5,7 @@
   "excludePatterns": [
     "src/js/examples-win32/**"
   ],
-  "baseVersion": "0.0.0-d477f8011",
+  "baseVersion": "0.0.0-cfb5b5e20",
   "overrides": [
     {
       "type": "patch",
@@ -37,7 +37,7 @@
       "type": "derived",
       "file": "src/js/utils/RNTesterList.win32.js",
       "baseFile": "packages/rn-tester/js/utils/RNTesterList.android.js",
-      "baseHash": "58b0acccf835104dec310ced6f7149739e4e06ff"
+      "baseHash": "94f48ba9b8613e1e04177ea43f4f1d411bc3cd0b"
     },
     {
       "type": "patch",
diff --git a/packages/@office-iss/react-native-win32-tester/package.json b/packages/@office-iss/react-native-win32-tester/package.json
index 0765e4502d2..a7e8746032e 100644
--- a/packages/@office-iss/react-native-win32-tester/package.json
+++ b/packages/@office-iss/react-native-win32-tester/package.json
@@ -15,7 +15,7 @@
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.0.0-canary.85",
-    "react-native": "0.0.0-d477f8011"
+    "react-native": "0.0.0-cfb5b5e20"
   },
   "devDependencies": {
     "@office-iss/react-native-win32": "^0.0.0-canary.85",
@@ -24,7 +24,7 @@
     "@types/node": "^14.14.22",
     "eslint": "7.12.0",
     "just-scripts": "^1.3.3",
-    "react-native": "0.0.0-d477f8011",
+    "react-native": "0.0.0-cfb5b5e20",
     "react-native-platform-override": "^1.4.13",
     "typescript": "^3.8.3"
   }
diff --git a/packages/@office-iss/react-native-win32-tester/src/js/utils/RNTesterList.win32.js b/packages/@office-iss/react-native-win32-tester/src/js/utils/RNTesterList.win32.js
index 13c3ebb40e2..1efff3c9377 100644
--- a/packages/@office-iss/react-native-win32-tester/src/js/utils/RNTesterList.win32.js
+++ b/packages/@office-iss/react-native-win32-tester/src/js/utils/RNTesterList.win32.js
@@ -29,6 +29,21 @@ const ComponentExamples: Array<RNTesterExample> = [
     category: 'ListView',
     module: require('../examples/FlatList/FlatListExample'),
   },
+  {
+    key: 'FlatList-withSeparators',
+    module: require('../examples/FlatList/FlatList-withSeparators'),
+    category: 'ListView',
+  },
+  {
+    key: 'FlatList-onViewableItemsChanged',
+    module: require('../examples/FlatList/FlatList-onViewableItemsChanged'),
+    category: 'ListView',
+  },
+  {
+    key: 'FlatList-onEndReached',
+    module: require('../examples/FlatList/FlatList-onEndReached'),
+    category: 'ListView',
+  },
   {
     key: 'ImageExample',
     category: 'Basic',
diff --git a/packages/@office-iss/react-native-win32/.flowconfig b/packages/@office-iss/react-native-win32/.flowconfig
index dbf24d51def..942bd21e94e 100644
--- a/packages/@office-iss/react-native-win32/.flowconfig
+++ b/packages/@office-iss/react-native-win32/.flowconfig
@@ -89,6 +89,7 @@ suppress_type=$FlowFixMeState
 suppress_type=$FlowFixMeEmpty
 
 experimental.abstract_locations=true
+experimental.new_signatures=true
 
 [lints]
 sketchy-null-number=warn
diff --git a/packages/@office-iss/react-native-win32/overrides.json b/packages/@office-iss/react-native-win32/overrides.json
index 09857f61da2..4cac06b5f20 100644
--- a/packages/@office-iss/react-native-win32/overrides.json
+++ b/packages/@office-iss/react-native-win32/overrides.json
@@ -3,13 +3,13 @@
     ".flowconfig",
     "src/**"
   ],
-  "baseVersion": "0.0.0-d477f8011",
+  "baseVersion": "0.0.0-cfb5b5e20",
   "overrides": [
     {
       "type": "derived",
       "file": ".flowconfig",
       "baseFile": ".flowconfig",
-      "baseHash": "f4da69b0623292df17b4cb39406edf68fecabe9d"
+      "baseHash": "718336b53dd84d09a5331cc4c6a3726114510030"
     },
     {
       "type": "derived",
@@ -376,7 +376,7 @@
       "type": "derived",
       "file": "src/Libraries/Utilities/Dimensions.win32.js",
       "baseFile": "Libraries/Utilities/Dimensions.js",
-      "baseHash": "33e55564b8716ff243e36de554cdcd90fccbe7e3"
+      "baseHash": "cc2a5b68d9207ece63b461f875ea91b7d1949cb6"
     },
     {
       "type": "platform",
diff --git a/packages/@office-iss/react-native-win32/package.json b/packages/@office-iss/react-native-win32/package.json
index 465a35beced..572b37da323 100644
--- a/packages/@office-iss/react-native-win32/package.json
+++ b/packages/@office-iss/react-native-win32/package.json
@@ -66,14 +66,14 @@
     "just-scripts": "^1.3.3",
     "prettier": "1.19.1",
     "react": "17.0.1",
-    "react-native": "0.0.0-d477f8011",
+    "react-native": "0.0.0-cfb5b5e20",
     "react-native-platform-override": "^1.4.13",
     "react-shallow-renderer": "16.14.1",
     "typescript": "^3.8.3"
   },
   "peerDependencies": {
     "react": "17.0.1",
-    "react-native": "0.0.0-d477f8011"
+    "react-native": "0.0.0-cfb5b5e20"
   },
   "beachball": {
     "defaultNpmTag": "canary",
diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Utilities/Dimensions.win32.js b/packages/@office-iss/react-native-win32/src/Libraries/Utilities/Dimensions.win32.js
index 73080b63ea4..1679a302914 100644
--- a/packages/@office-iss/react-native-win32/src/Libraries/Utilities/Dimensions.win32.js
+++ b/packages/@office-iss/react-native-win32/src/Libraries/Utilities/Dimensions.win32.js
@@ -6,6 +6,10 @@
  * @flow
  */
 
+ import {
+  type EventSubscription,
+} from '../vendor/emitter/EventEmitter';
+
 class Dimensions {
   static get(dim: string): Object {
     throw new Error(
@@ -19,12 +23,18 @@ class Dimensions {
     );
   }
 
-  static addEventListener(type: 'change', handler: Function) {
+  static addEventListener(
+    type: 'change',
+    handler: Function
+  ): EventSubscription {
     throw new Error(
       'Having a global Dimensions object is too simplistic for Win32, so this API does not work',
     );
   }
 
+  /**
+   * @deprecated Use `remove` on the EventSubscription from `addEventListener`.
+   */
   static removeEventListener(type: 'change', handler: Function) {
     throw new Error(
       'Having a global Dimensions object is too simplistic for Win32, so this API does not work',
diff --git a/packages/@react-native-windows/tester/overrides.json b/packages/@react-native-windows/tester/overrides.json
index 7810048e43b..34ab72d5f8b 100644
--- a/packages/@react-native-windows/tester/overrides.json
+++ b/packages/@react-native-windows/tester/overrides.json
@@ -5,7 +5,7 @@
   "excludePatterns": [
     "src/js/examples-win/**"
   ],
-  "baseVersion": "0.0.0-d477f8011",
+  "baseVersion": "0.0.0-cfb5b5e20",
   "overrides": [
     {
       "type": "patch",
@@ -45,7 +45,7 @@
       "type": "derived",
       "file": "src/js/utils/RNTesterList.windows.js",
       "baseFile": "packages/rn-tester/js/utils/RNTesterList.android.js",
-      "baseHash": "58b0acccf835104dec310ced6f7149739e4e06ff"
+      "baseHash": "94f48ba9b8613e1e04177ea43f4f1d411bc3cd0b"
     }
   ]
 }
\ No newline at end of file
diff --git a/packages/@react-native-windows/tester/package.json b/packages/@react-native-windows/tester/package.json
index 2819d0981f2..d5d4b3e09dc 100644
--- a/packages/@react-native-windows/tester/package.json
+++ b/packages/@react-native-windows/tester/package.json
@@ -14,7 +14,7 @@
     "@react-native/tester": "0.0.1"
   },
   "peerDependencies": {
-    "react-native": "0.0.0-d477f8011",
+    "react-native": "0.0.0-cfb5b5e20",
     "react-native-windows": "^0.0.0-canary.287"
   },
   "devDependencies": {
@@ -23,7 +23,7 @@
     "@types/node": "^14.14.22",
     "eslint": "7.12.0",
     "just-scripts": "^1.3.3",
-    "react-native": "0.0.0-d477f8011",
+    "react-native": "0.0.0-cfb5b5e20",
     "react-native-platform-override": "^1.4.13",
     "react-native-windows": "^0.0.0-canary.287",
     "typescript": "^3.8.3"
diff --git a/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js b/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js
index a1bf577674e..583a90f2e48 100644
--- a/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js
+++ b/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js
@@ -26,9 +26,24 @@ const ComponentExamples: Array<RNTesterExample> = [
     module: require('../examples/FlatList/FlatListExample'),
   },
   {
-    key: 'DatePickerExample',
-    category: 'UI',
-    module: require('../examples-win/DatePicker/DatePickerExample'),
+    key: 'FlatList-withSeparators',
+    module: require('../examples/FlatList/FlatList-withSeparators'),
+    category: 'ListView',
+  },
+  {
+    key: 'FlatList-onViewableItemsChanged',
+    module: require('../examples/FlatList/FlatList-onViewableItemsChanged'),
+    category: 'ListView',
+  },
+  {
+    key: 'FlatList-onEndReached',
+    module: require('../examples/FlatList/FlatList-onEndReached'),
+    category: 'ListView',
+  },
+  {
+    key: 'ImageExample',
+    category: 'Basic',
+    module: require('../examples/Image/ImageExample'),
   },
   {
     key: 'FastTextExample',
@@ -45,11 +60,6 @@ const ComponentExamples: Array<RNTesterExample> = [
     category: 'UI',
     module: require('../examples-win/Glyph/GlyphExample'),
   },
-  {
-    key: 'ImageExample',
-    category: 'Basic',
-    module: require('../examples/Image/ImageExample'),
-  },
   // {
   //   key: 'ModalExample',
   //   category: 'UI',
diff --git a/packages/@react-native/repo-config/overrides.json b/packages/@react-native/repo-config/overrides.json
index e830c7a156c..2df7258dfeb 100644
--- a/packages/@react-native/repo-config/overrides.json
+++ b/packages/@react-native/repo-config/overrides.json
@@ -1,5 +1,5 @@
 {
-  "baseVersion": "0.0.0-d477f8011",
+  "baseVersion": "0.0.0-cfb5b5e20",
   "overrides": [
     {
       "type": "copy",
diff --git a/packages/@react-native/tester/js/examples/Accessibility/AccessibilityExample.js b/packages/@react-native/tester/js/examples/Accessibility/AccessibilityExample.js
index 22b2c0710eb..d13b53db474 100644
--- a/packages/@react-native/tester/js/examples/Accessibility/AccessibilityExample.js
+++ b/packages/@react-native/tester/js/examples/Accessibility/AccessibilityExample.js
@@ -716,7 +716,7 @@ class SetAccessibilityFocusExample extends React.Component<{}> {
 
     const onClose = () => {
       if (myRef && myRef.current) {
-        AccessibilityInfo.sendAccessiblityEvent_unstable(
+        AccessibilityInfo.sendAccessibilityEvent_unstable(
           myRef.current,
           'focus',
         );
diff --git a/packages/@react-native/tester/js/examples/Button/ButtonExample.js b/packages/@react-native/tester/js/examples/Button/ButtonExample.js
index c15a4515895..f3b3e057832 100644
--- a/packages/@react-native/tester/js/examples/Button/ButtonExample.js
+++ b/packages/@react-native/tester/js/examples/Button/ButtonExample.js
@@ -174,6 +174,29 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Button with accessibilityState={{disabled: true}}',
+    description: ('Note: This prop will announce on TalkBack that the button is disabled. ' +
+      'The "disabled" prop has higher precedence on the state of the component': string),
+    render: function(): React.Node {
+      return (
+        <RNTesterThemeContext.Consumer>
+          {theme => {
+            return (
+              <Button
+                accessibilityState={{disabled: true}}
+                onPress={() => onButtonPress('submitted')}
+                testID="accessibilityState_button"
+                color={theme.LinkColor}
+                title="Submit Application"
+                accessibilityLabel="Press to submit your application!"
+              />
+            );
+          }}
+        </RNTesterThemeContext.Consumer>
+      );
+    },
+  },
 ];
 
 const styles = StyleSheet.create({
diff --git a/packages/@react-native/tester/js/examples/Dimensions/DimensionsExample.js b/packages/@react-native/tester/js/examples/Dimensions/DimensionsExample.js
index 07722596f25..5fd29d2f0b0 100644
--- a/packages/@react-native/tester/js/examples/Dimensions/DimensionsExample.js
+++ b/packages/@react-native/tester/js/examples/Dimensions/DimensionsExample.js
@@ -8,6 +8,7 @@
  * @flow
  */
 
+import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
 import {Dimensions, Text, useWindowDimensions} from 'react-native';
 import * as React from 'react';
 
@@ -19,20 +20,23 @@ class DimensionsSubscription extends React.Component<
     dims: Dimensions.get(this.props.dim),
   };
 
+  _dimensionsSubscription: ?EventSubscription;
+
   componentDidMount() {
-    Dimensions.addEventListener('change', this._handleDimensionsChange);
+    this._dimensionsSubscription = Dimensions.addEventListener(
+      'change',
+      dimensions => {
+        this.setState({
+          dims: dimensions[this.props.dim],
+        });
+      },
+    );
   }
 
   componentWillUnmount() {
-    Dimensions.removeEventListener('change', this._handleDimensionsChange);
+    this._dimensionsSubscription?.remove();
   }
 
-  _handleDimensionsChange = dimensions => {
-    this.setState({
-      dims: dimensions[this.props.dim],
-    });
-  };
-
   render() {
     return <Text>{JSON.stringify(this.state.dims, null, 2)}</Text>;
   }
diff --git a/packages/@react-native/tester/js/examples/FlatList/FlatList-onEndReached.js b/packages/@react-native/tester/js/examples/FlatList/FlatList-onEndReached.js
new file mode 100644
index 00000000000..ea4f16a892d
--- /dev/null
+++ b/packages/@react-native/tester/js/examples/FlatList/FlatList-onEndReached.js
@@ -0,0 +1,28 @@
+/**
+ * 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
+ * @flow
+ */
+
+'use strict';
+import {FlatList_onEndReached} from './FlatListExamples';
+const React = require('react');
+
+exports.title = 'FlatList onEndReached';
+exports.testTitle = 'Test onEndReached callback';
+exports.category = 'ListView';
+exports.documentationURL = 'https://reactnative.dev/docs/flatlist';
+exports.description =
+  'Scroll to end of list or tap Test button to see `onEndReached` triggered.';
+exports.examples = [
+  {
+    title: 'FlatList onEndReached',
+    render: function(): React.Element<typeof FlatList_onEndReached> {
+      return <FlatList_onEndReached />;
+    },
+  },
+];
diff --git a/packages/@react-native/tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js b/packages/@react-native/tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js
new file mode 100644
index 00000000000..f65f51a461c
--- /dev/null
+++ b/packages/@react-native/tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js
@@ -0,0 +1,38 @@
+/**
+ * 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
+ * @flow
+ */
+
+'use strict';
+import {FlatList_onViewableItemsChanged} from './FlatListExamples';
+const React = require('react');
+
+const VIEWABILITY_CONFIG = {
+  minimumViewTime: 1000,
+  viewAreaCoveragePercentThreshold: 100,
+  waitForInteraction: true,
+};
+
+exports.title = 'FlatList onViewableItemsChanged';
+exports.testTitle = 'Test onViewableItemsChanged callback';
+exports.category = 'ListView';
+exports.documentationURL = 'https://reactnative.dev/docs/sectionlist';
+exports.description =
+  'Scroll list to see what items are returned in `onViewableItemsChanged` callback.';
+exports.examples = [
+  {
+    title: 'FlatList onViewableItemsChanged',
+    render: function(): React.Element<typeof FlatList_onViewableItemsChanged> {
+      return (
+        <FlatList_onViewableItemsChanged
+          viewabilityConfig={VIEWABILITY_CONFIG}
+        />
+      );
+    },
+  },
+];
diff --git a/packages/@react-native/tester/js/examples/FlatList/FlatList-withSeparators.js b/packages/@react-native/tester/js/examples/FlatList/FlatList-withSeparators.js
new file mode 100644
index 00000000000..eccf762de53
--- /dev/null
+++ b/packages/@react-native/tester/js/examples/FlatList/FlatList-withSeparators.js
@@ -0,0 +1,27 @@
+/**
+ * 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
+ * @flow
+ */
+
+'use strict';
+import {FlatList_withSeparators} from './FlatListExamples';
+const React = require('react');
+
+exports.title = 'FlatList with Separators';
+exports.testTitle = 'Test custom separator components';
+exports.category = 'ListView';
+exports.documentationURL = 'https://reactnative.dev/docs/sectionlist';
+exports.description = 'Tap to see pressed states for separator components.';
+exports.examples = [
+  {
+    title: 'FlatList with Separators',
+    render: function(): React.Element<typeof FlatList_withSeparators> {
+      return <FlatList_withSeparators />;
+    },
+  },
+];
diff --git a/packages/@react-native/tester/js/examples/FlatList/FlatListExamples.js b/packages/@react-native/tester/js/examples/FlatList/FlatListExamples.js
new file mode 100644
index 00000000000..b8144eb7e4a
--- /dev/null
+++ b/packages/@react-native/tester/js/examples/FlatList/FlatListExamples.js
@@ -0,0 +1,312 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import {
+  Pressable,
+  Button,
+  FlatList,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+import * as React from 'react';
+type FlatListProps = React.ElementProps<typeof FlatList>;
+
+type ViewabilityConfig = $PropertyType<FlatListProps, 'viewabilityConfig'>;
+
+const DATA = [
+  'Pizza',
+  'Burger',
+  'Risotto',
+  'French Fries',
+  'Onion Rings',
+  'Fried Shrimps',
+  'Water',
+  'Coke',
+  'Beer',
+  'Cheesecake',
+  'Ice Cream',
+];
+
+const Item = ({item, separators}) => {
+  return (
+    <Pressable
+      onPressIn={() => {
+        separators.highlight();
+      }}
+      onPress={() => {
+        separators.updateProps('trailing', {hasBeenHighlighted: true});
+        separators.updateProps('leading', {hasBeenHighlighted: true});
+      }}
+      onPressOut={() => {
+        separators.unhighlight();
+      }}
+      style={({pressed}) => [
+        styles.item,
+        {
+          backgroundColor: pressed ? 'red' : 'pink',
+        },
+      ]}
+      testID={item}>
+      <Text style={styles.title}>{item}</Text>
+    </Pressable>
+  );
+};
+
+const Separator = (defaultColor, highlightColor) => ({
+  leadingItem,
+  trailingItem,
+  highlighted,
+  hasBeenHighlighted,
+}) => {
+  const text = `Separator for leading ${leadingItem} and trailing ${trailingItem} has ${
+    !hasBeenHighlighted ? 'not ' : ''
+  }been pressed`;
+
+  return (
+    <View
+      style={[
+        styles.separator,
+        {backgroundColor: highlighted ? highlightColor : defaultColor},
+      ]}>
+      <Text style={styles.separtorText}>{text}</Text>
+    </View>
+  );
+};
+
+export function FlatList_inverted(): React.Node {
+  const [output, setOutput] = React.useState('inverted false');
+  const [exampleProps, setExampleProps] = React.useState({
+    inverted: false,
+  });
+
+  const onTest = () => {
+    setExampleProps({
+      inverted: !exampleProps.inverted,
+    });
+    setOutput(`Is inverted: ${(!exampleProps.inverted).toString()}`);
+  };
+
+  return (
+    <FlatListExampleWithForwardedRef
+      exampleProps={exampleProps}
+      testOutput={output}
+      onTest={onTest}
+      testLabel={exampleProps.inverted ? 'Toggle false' : 'Toggle true'}
+    />
+  );
+}
+
+export function FlatList_contentInset(): React.Node {
+  const [initialContentInset, toggledContentInset] = [44, 88];
+
+  const [output, setOutput] = React.useState(
+    `contentInset top: ${initialContentInset.toString()}`,
+  );
+  const [exampleProps, setExampleProps] = React.useState({
+    automaticallyAdjustContentInsets: false,
+    contentInset: {top: initialContentInset},
+    contentOffset: {y: -initialContentInset, x: 0},
+  });
+
+  const onTest = () => {
+    const newContentInset =
+      exampleProps.contentInset.top === initialContentInset
+        ? toggledContentInset
+        : initialContentInset;
+    setExampleProps({
+      automaticallyAdjustContentInsets: false,
+      contentInset: {top: newContentInset},
+      contentOffset: {y: -newContentInset, x: 0},
+    });
+    setOutput(`contentInset top: ${newContentInset.toString()}`);
+  };
+
+  return (
+    <>
+      <View
+        style={[
+          styles.titleContainer,
+          {height: exampleProps.contentInset.top},
+        ]}>
+        <Text style={styles.titleText}>Menu</Text>
+      </View>
+      <FlatListExampleWithForwardedRef
+        exampleProps={exampleProps}
+        testOutput={output}
+        onTest={onTest}
+        testLabel={'Toggle header size'}
+      />
+    </>
+  );
+}
+export function FlatList_onEndReached(): React.Node {
+  const [output, setOutput] = React.useState('');
+  const exampleProps = {
+    onEndReached: info => setOutput('onEndReached'),
+    onEndReachedThreshold: 0,
+  };
+  const ref = React.useRef(null);
+
+  const onTest = () => {
+    const scrollResponder = ref?.current?.getScrollResponder();
+    if (scrollResponder != null) {
+      scrollResponder.scrollToEnd();
+    }
+  };
+
+  return (
+    <FlatListExampleWithForwardedRef
+      ref={ref}
+      exampleProps={exampleProps}
+      testOutput={output}
+      onTest={onTest}
+    />
+  );
+}
+
+export function FlatList_withSeparators(): React.Node {
+  const exampleProps = {
+    ItemSeparatorComponent: Separator('lightgreen', 'green'),
+  };
+  const ref = React.useRef(null);
+
+  return (
+    <FlatListExampleWithForwardedRef ref={ref} exampleProps={exampleProps} />
+  );
+}
+
+export function FlatList_onViewableItemsChanged(props: {
+  viewabilityConfig: ViewabilityConfig,
+  offScreen?: ?boolean,
+  horizontal?: ?boolean,
+}): React.Node {
+  const {viewabilityConfig, offScreen, horizontal} = props;
+  const [output, setOutput] = React.useState('');
+  const onViewableItemsChanged = React.useCallback(
+    info =>
+      setOutput(
+        info.viewableItems
+          .filter(viewToken => viewToken.index != null && viewToken.isViewable)
+          .map(viewToken => viewToken.item)
+          .join(', '),
+      ),
+    [setOutput],
+  );
+  const exampleProps = {
+    onViewableItemsChanged,
+    viewabilityConfig,
+    horizontal,
+  };
+
+  return (
+    <FlatListExampleWithForwardedRef
+      exampleProps={exampleProps}
+      testOutput={output}>
+      {offScreen === true ? <View style={styles.offScreen} /> : null}
+    </FlatListExampleWithForwardedRef>
+  );
+}
+
+type Props = {
+  exampleProps: $Shape<React.ElementConfig<typeof FlatList>>,
+  onTest?: ?() => void,
+  testLabel?: ?string,
+  testOutput?: ?string,
+  children?: ?React.Node,
+};
+
+const FlatListExampleWithForwardedRef = React.forwardRef(
+  (props: Props, ref) => {
+    return (
+      <View style={styles.container}>
+        {props.testOutput != null ? (
+          <View testID="test_container" style={styles.testContainer}>
+            <Text numberOfLines={1} testID="output">
+              {props.testOutput}
+            </Text>
+            {props.onTest != null ? (
+              <Button
+                testID="start_test"
+                onPress={props.onTest}
+                title={props.testLabel ?? 'Test'}
+              />
+            ) : null}
+          </View>
+        ) : null}
+        {props.children}
+        <FlatList
+          {...props.exampleProps}
+          ref={ref}
+          testID="flat_list"
+          data={DATA}
+          keyExtractor={(item, index) => item + index}
+          style={styles.list}
+          renderItem={Item}
+        />
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  item: {
+    backgroundColor: 'pink',
+    padding: 20,
+    marginVertical: 8,
+  },
+  header: {
+    fontSize: 32,
+    backgroundColor: 'white',
+  },
+  title: {
+    fontSize: 24,
+  },
+  titleContainer: {
+    position: 'absolute',
+    top: 45,
+    left: 0,
+    right: 0,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    backgroundColor: 'gray',
+    zIndex: 1,
+  },
+  titleText: {
+    fontSize: 24,
+    lineHeight: 44,
+    fontWeight: 'bold',
+  },
+  testContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: '#f2f2f7ff',
+    padding: 4,
+    height: 40,
+  },
+  output: {
+    fontSize: 12,
+  },
+  separator: {
+    height: 12,
+  },
+  separtorText: {
+    fontSize: 10,
+  },
+  list: {
+    flex: 1,
+  },
+  container: {flex: 1},
+  offScreen: {
+    height: 1000,
+  },
+});
diff --git a/packages/@react-native/tester/js/examples/ScrollView/ScrollViewExample.js b/packages/@react-native/tester/js/examples/ScrollView/ScrollViewExample.js
index ab0170176e4..c9da53d0b7f 100644
--- a/packages/@react-native/tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/@react-native/tester/js/examples/ScrollView/ScrollViewExample.js
@@ -83,53 +83,27 @@ exports.examples = ([
     },
   },
   {
+    name: 'horizontalScrollTo',
     title: '<ScrollView> (horizontal = true)\n',
     description:
       "You can display <ScrollView>'s child components horizontally rather than vertically",
     render: function(): React.Node {
-      function renderScrollView(
-        title: string,
-        additionalStyles: ViewStyleProp,
-      ) {
-        let _scrollView: ?React.ElementRef<typeof ScrollView>;
-        return (
-          <View style={additionalStyles}>
-            <Text style={styles.text}>{title}</Text>
-            <ScrollView
-              ref={scrollView => {
-                _scrollView = scrollView;
-              }}
-              automaticallyAdjustContentInsets={false}
-              horizontal={true}
-              style={[styles.scrollView, styles.horizontalScrollView]}>
-              {ITEMS.map(createItemRow)}
-            </ScrollView>
-            <Button
-              label="Scroll to start"
-              onPress={() => {
-                nullthrows(_scrollView).scrollTo({x: 0});
-              }}
-            />
-            <Button
-              label="Scroll to end"
-              onPress={() => {
-                nullthrows(_scrollView).scrollToEnd({animated: true});
-              }}
-            />
-            <Button
-              label="Flash scroll indicators"
-              onPress={() => {
-                nullthrows(_scrollView).flashScrollIndicators();
-              }}
-            />
-          </View>
-        );
-      }
-
       return (
         <View>
-          {renderScrollView('LTR layout', {direction: 'ltr'})}
-          {renderScrollView('RTL layout', {direction: 'rtl'})}
+          <HorizontalScrollView direction="ltr" />
+        </View>
+      );
+    },
+  },
+  {
+    name: 'horizontalScrollToRTL',
+    title: '<ScrollView> (horizontal = true) in RTL\n',
+    description:
+      "You can display <ScrollView>'s child components horizontally rather than vertically",
+    render: function(): React.Node {
+      return (
+        <View>
+          <HorizontalScrollView direction="rtl" />
         </View>
       );
     },
@@ -205,6 +179,15 @@ exports.examples = ([
       return <InvertStickyHeaders />;
     },
   },
+  {
+    name: 'multipleStickyHeaders',
+    title: '<ScrollView> Multiple Sticky Headers\n',
+    description:
+      'Scroll down to see 3 sticky headers stick when they get to the top.',
+    render: function(): React.Node {
+      return <MultipleStickyHeaders />;
+    },
+  },
   {
     name: 'keyboardShouldPersistTaps',
     title: '<ScrollView> Keyboard Options\n',
@@ -501,6 +484,39 @@ const AndroidScrollBarOptions = () => {
   );
 };
 
+const HorizontalScrollView = (props: {direction: 'ltr' | 'rtl'}) => {
+  const {direction} = props;
+  const scrollRef = React.useRef<?React.ElementRef<typeof ScrollView>>();
+  const title = direction === 'ltr' ? 'LTR Layout' : 'RTL Layout';
+  return (
+    <View style={{direction}}>
+      <Text style={styles.text}>{title}</Text>
+      <ScrollView
+        ref={scrollRef}
+        automaticallyAdjustContentInsets={false}
+        horizontal={true}
+        style={[styles.scrollView, styles.horizontalScrollView]}
+        testID={'scroll_horizontal'}>
+        {ITEMS.map(createItemRow)}
+      </ScrollView>
+      <Button
+        label="Scroll to start"
+        onPress={() => {
+          nullthrows(scrollRef.current).scrollTo({x: 0});
+        }}
+        testID={'scroll_to_start_button'}
+      />
+      <Button
+        label="Scroll to end"
+        onPress={() => {
+          nullthrows(scrollRef.current).scrollToEnd({animated: true});
+        }}
+        testID={'scroll_to_end_button'}
+      />
+    </View>
+  );
+};
+
 const EndFillColorFadingEdgeLen = () => {
   const [endFillColor, setEndFillColor] = useState('');
   const [fadingEdgeLen, setFadingEdgeLen] = useState(0);
@@ -940,6 +956,42 @@ const InvertStickyHeaders = () => {
   );
 };
 
+const MultipleStickyHeaders = () => {
+  const _scrollView = React.useRef<?React.ElementRef<typeof ScrollView>>(null);
+  const stickyHeaderStyle = {backgroundColor: 'yellow'};
+  return (
+    <View>
+      <ScrollView
+        ref={_scrollView}
+        style={[styles.scrollView, {height: 200}]}
+        stickyHeaderIndices={[0, 13, 26]}
+        nestedScrollEnabled
+        testID="scroll_multiple_sticky_headers">
+        {<Item msg={'Sticky Header 1'} style={stickyHeaderStyle} />}
+        {ITEMS.map(createItemRow)}
+        {<Item msg={'Sticky Header 2'} style={stickyHeaderStyle} />}
+        {ITEMS.map(createItemRow)}
+        {<Item msg={'Sticky Header 3'} style={stickyHeaderStyle} />}
+        {ITEMS.map(createItemRow)}
+      </ScrollView>
+      <Button
+        label="Scroll to top"
+        onPress={() => {
+          nullthrows(_scrollView.current).scrollTo({y: 0});
+        }}
+        testID="scroll_to_top_button"
+      />
+      <Button
+        label="Scroll to bottom"
+        onPress={() => {
+          nullthrows(_scrollView.current).scrollToEnd({animated: true});
+        }}
+        testID="scroll_to_bottom_button"
+      />
+    </View>
+  );
+};
+
 const IndicatorStyle = () => {
   const [indicatorStyle, setIndicatorStyle] = useState('default');
   return (
diff --git a/packages/@react-native/tester/js/examples/SectionList/SectionList-onViewableItemsChanged.js b/packages/@react-native/tester/js/examples/SectionList/SectionList-onViewableItemsChanged.js
index 2c59bfc7d52..872e8b6831a 100644
--- a/packages/@react-native/tester/js/examples/SectionList/SectionList-onViewableItemsChanged.js
+++ b/packages/@react-native/tester/js/examples/SectionList/SectionList-onViewableItemsChanged.js
@@ -12,6 +12,12 @@
 import {SectionList_onViewableItemsChanged} from './SectionListExamples';
 const React = require('react');
 
+const VIEWABILITY_CONFIG = {
+  minimumViewTime: 1000,
+  viewAreaCoveragePercentThreshold: 100,
+  waitForInteraction: true,
+};
+
 exports.title = 'SectionList onViewableItemsChanged';
 exports.testTitle = 'Test onViewableItemsChanged callback';
 exports.category = 'ListView';
@@ -24,7 +30,11 @@ exports.examples = [
     render: function(): React.Element<
       typeof SectionList_onViewableItemsChanged,
     > {
-      return <SectionList_onViewableItemsChanged />;
+      return (
+        <SectionList_onViewableItemsChanged
+          viewabilityConfig={VIEWABILITY_CONFIG}
+        />
+      );
     },
   },
 ];
diff --git a/packages/@react-native/tester/js/examples/SectionList/SectionListExamples.js b/packages/@react-native/tester/js/examples/SectionList/SectionListExamples.js
index df68a5209f4..34cd8770e1d 100644
--- a/packages/@react-native/tester/js/examples/SectionList/SectionListExamples.js
+++ b/packages/@react-native/tester/js/examples/SectionList/SectionListExamples.js
@@ -16,7 +16,11 @@ import {
   Text,
   View,
 } from 'react-native';
+
 import * as React from 'react';
+type SectionListProps = React.ElementProps<typeof SectionList>;
+
+type ViewabilityConfig = $PropertyType<SectionListProps, 'viewabilityConfig'>;
 
 const DATA = [
   {
@@ -37,12 +41,6 @@ const DATA = [
   },
 ];
 
-const VIEWABILITY_CONFIG = {
-  minimumViewTime: 1000,
-  viewAreaCoveragePercentThreshold: 100,
-  waitForInteraction: true,
-};
-
 const Item = ({item, section, separators}) => {
   return (
     <Pressable
@@ -193,7 +191,7 @@ export function SectionList_onEndReached(): React.Node {
     onEndReached: info => setOutput('onEndReached'),
     onEndReachedThreshold: 0,
   };
-  const ref = React.createRef<?React.ElementRef<typeof SectionList>>();
+  const ref = React.useRef(null);
 
   const onTest = () => {
     const scrollResponder = ref?.current?.getScrollResponder();
@@ -217,14 +215,19 @@ export function SectionList_withSeparators(): React.Node {
     ItemSeparatorComponent: Separator('lightgreen', 'green', false),
     SectionSeparatorComponent: Separator('lightblue', 'blue', true),
   };
-  const ref = React.createRef<?React.ElementRef<typeof SectionList>>();
+  const ref = React.useRef(null);
 
   return (
     <SectionListExampleWithForwardedRef ref={ref} exampleProps={exampleProps} />
   );
 }
 
-export function SectionList_onViewableItemsChanged(): React.Node {
+export function SectionList_onViewableItemsChanged(props: {
+  viewabilityConfig: ViewabilityConfig,
+  offScreen?: ?boolean,
+  horizontal?: ?boolean,
+}): React.Node {
+  const {viewabilityConfig, offScreen, horizontal} = props;
   const [output, setOutput] = React.useState('');
   const exampleProps = {
     onViewableItemsChanged: info =>
@@ -234,14 +237,16 @@ export function SectionList_onViewableItemsChanged(): React.Node {
           .map(viewToken => viewToken.item)
           .join(', '),
       ),
-    viewabilityConfig: VIEWABILITY_CONFIG,
+    viewabilityConfig,
+    horizontal,
   };
 
   return (
     <SectionListExampleWithForwardedRef
       exampleProps={exampleProps}
-      testOutput={output}
-    />
+      testOutput={output}>
+      {offScreen === true ? <View style={styles.offScreen} /> : null}
+    </SectionListExampleWithForwardedRef>
   );
 }
 
@@ -250,15 +255,13 @@ type Props = {
   onTest?: ?() => void,
   testLabel?: ?string,
   testOutput?: ?string,
+  children?: ?React.Node,
 };
 
 const SectionListExampleWithForwardedRef = React.forwardRef(
-  function SectionListExample(
-    props: Props,
-    ref: ?React.ElementRef<typeof SectionListExampleWithForwardedRef>,
-  ): React.Node {
+  (props: Props, ref): React.Node => {
     return (
-      <View>
+      <View style={styles.container}>
         {props.testOutput != null ? (
           <View testID="test_container" style={styles.testContainer}>
             <Text numberOfLines={1} testID="output">
@@ -273,11 +276,13 @@ const SectionListExampleWithForwardedRef = React.forwardRef(
             ) : null}
           </View>
         ) : null}
+        {props.children}
         <SectionList
           ref={ref}
           testID="section_list"
           sections={DATA}
           keyExtractor={(item, index) => item + index}
+          style={styles.list}
           renderItem={Item}
           renderSectionHeader={({section: {title}}) => (
             <Text style={styles.header}>{title}</Text>
@@ -323,6 +328,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: '#f2f2f7ff',
     padding: 4,
+    height: 40,
   },
   output: {
     fontSize: 12,
@@ -333,4 +339,11 @@ const styles = StyleSheet.create({
   separtorText: {
     fontSize: 10,
   },
+  list: {
+    flex: 1,
+  },
+  container: {flex: 1},
+  offScreen: {
+    height: 1000,
+  },
 });
diff --git a/packages/@react-native/tester/js/utils/RNTesterList.android.js b/packages/@react-native/tester/js/utils/RNTesterList.android.js
index 88eda2bebfe..ae90cbd9558 100644
--- a/packages/@react-native/tester/js/utils/RNTesterList.android.js
+++ b/packages/@react-native/tester/js/utils/RNTesterList.android.js
@@ -28,6 +28,21 @@ const ComponentExamples: Array<RNTesterExample> = [
     category: 'ListView',
     module: require('../examples/FlatList/FlatListExample'),
   },
+  {
+    key: 'FlatList-withSeparators',
+    module: require('../examples/FlatList/FlatList-withSeparators'),
+    category: 'ListView',
+  },
+  {
+    key: 'FlatList-onViewableItemsChanged',
+    module: require('../examples/FlatList/FlatList-onViewableItemsChanged'),
+    category: 'ListView',
+  },
+  {
+    key: 'FlatList-onEndReached',
+    module: require('../examples/FlatList/FlatList-onEndReached'),
+    category: 'ListView',
+  },
   {
     key: 'ImageExample',
     category: 'Basic',
diff --git a/packages/@react-native/tester/js/utils/RNTesterList.ios.js b/packages/@react-native/tester/js/utils/RNTesterList.ios.js
index 8ce1f1c0701..efbcca235a7 100644
--- a/packages/@react-native/tester/js/utils/RNTesterList.ios.js
+++ b/packages/@react-native/tester/js/utils/RNTesterList.ios.js
@@ -31,6 +31,21 @@ const ComponentExamples: Array<RNTesterExample> = [
     category: 'ListView',
     supportsTVOS: true,
   },
+  {
+    key: 'FlatList-withSeparators',
+    module: require('../examples/FlatList/FlatList-withSeparators'),
+    category: 'ListView',
+  },
+  {
+    key: 'FlatList-onViewableItemsChanged',
+    module: require('../examples/FlatList/FlatList-onViewableItemsChanged'),
+    category: 'ListView',
+  },
+  {
+    key: 'FlatList-onEndReached',
+    module: require('../examples/FlatList/FlatList-onEndReached'),
+    category: 'ListView',
+  },
   {
     key: 'ImageExample',
     module: require('../examples/Image/ImageExample'),
diff --git a/packages/@react-native/tester/overrides.json b/packages/@react-native/tester/overrides.json
index 375faa09794..707cc517f9d 100644
--- a/packages/@react-native/tester/overrides.json
+++ b/packages/@react-native/tester/overrides.json
@@ -1,11 +1,11 @@
 {
-  "baseVersion": "0.0.0-d477f8011",
+  "baseVersion": "0.0.0-cfb5b5e20",
   "overrides": [
     {
       "type": "copy",
       "directory": "js",
       "baseDirectory": "packages/rn-tester/js",
-      "baseHash": "79d174937b0b4d9f879d001a691a592f38aaeb4c",
+      "baseHash": "358e553380f2d42025a67ea9741d86d8553f3a01",
       "issue": 4054
     },
     {
diff --git a/packages/e2e-test-app/package.json b/packages/e2e-test-app/package.json
index f7d1e003b42..eca56ecfaf5 100644
--- a/packages/e2e-test-app/package.json
+++ b/packages/e2e-test-app/package.json
@@ -14,7 +14,7 @@
     "@react-native-windows/tester": "0.0.1",
     "node-rnw-rpc": "^1.0.5-17",
     "react": "17.0.1",
-    "react-native": "0.0.0-d477f8011",
+    "react-native": "0.0.0-cfb5b5e20",
     "react-native-windows": "^0.0.0-canary.287"
   },
   "devDependencies": {
diff --git a/packages/integration-test-app/package.json b/packages/integration-test-app/package.json
index 82c281a8014..c4b54c6856a 100644
--- a/packages/integration-test-app/package.json
+++ b/packages/integration-test-app/package.json
@@ -13,7 +13,7 @@
     "chai": "^4.2.0",
     "node-rnw-rpc": "^1.0.5-17",
     "react": "17.0.1",
-    "react-native": "0.0.0-d477f8011",
+    "react-native": "0.0.0-cfb5b5e20",
     "react-native-windows": "^0.0.0-canary.287"
   },
   "devDependencies": {
diff --git a/packages/node-rnw-rpc/package.json b/packages/node-rnw-rpc/package.json
index eebc4d5a9f9..93c4e11c88d 100644
--- a/packages/node-rnw-rpc/package.json
+++ b/packages/node-rnw-rpc/package.json
@@ -27,7 +27,7 @@
     "just-scripts": "^1.3.2",
     "prettier": "1.19.1",
     "react": "17.0.1",
-    "react-native": "0.0.0-d477f8011",
+    "react-native": "0.0.0-cfb5b5e20",
     "react-native-windows": "^0.0.0-canary.287",
     "typescript": "^3.8.3"
   },
diff --git a/packages/playground/package.json b/packages/playground/package.json
index a13bc1855f7..336562d1448 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@react-native-windows/tester": "0.0.1",
     "react": "17.0.1",
-    "react-native": "0.0.0-d477f8011",
+    "react-native": "0.0.0-cfb5b5e20",
     "react-native-windows": "0.0.0-canary.287"
   },
   "devDependencies": {
diff --git a/packages/sample-apps/package.json b/packages/sample-apps/package.json
index 03024ecbb03..8dfaf03ad4b 100644
--- a/packages/sample-apps/package.json
+++ b/packages/sample-apps/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "react": "17.0.1",
-    "react-native": "0.0.0-d477f8011",
+    "react-native": "0.0.0-cfb5b5e20",
     "react-native-windows": "0.0.0-canary.287"
   },
   "devDependencies": {
diff --git a/vnext/.flowconfig b/vnext/.flowconfig
index aac67ca460d..22507554308 100644
--- a/vnext/.flowconfig
+++ b/vnext/.flowconfig
@@ -97,6 +97,7 @@ suppress_type=$FlowFixMeState
 suppress_type=$FlowFixMeEmpty
 
 experimental.abstract_locations=true
+experimental.new_signatures=true
 
 [lints]
 sketchy-null-number=warn
diff --git a/vnext/ReactCommon/ReactCommon.vcxproj b/vnext/ReactCommon/ReactCommon.vcxproj
index 44e09e0ab96..fd90a063156 100644
--- a/vnext/ReactCommon/ReactCommon.vcxproj
+++ b/vnext/ReactCommon/ReactCommon.vcxproj
@@ -207,12 +207,12 @@
     <Error Condition="!Exists('$(ReactNativePackageDir)')" Text="This project references code in the node_modules folder that is missing on this computer.  Use `yarn install` to download them." />
     <Error Condition="!Exists('$(YogaDir)')" Text="This project references code in the node_modules folder that is missing on this computer.  Use `yarn install` to download them." />
   </Target>
-    <ItemGroup>
+  <ItemGroup>
     <TemporaryReactCommonPatchFiles Include="$(MSBuildThisFileDirectory)\TEMP_UntilReactCommonUpdate\**\*.*" />
   </ItemGroup>
   <Target Name="Deploy" />
   <!-- Reenable this task if we need to temporarily replace any folly files for fixes, while we wait for PRs to land in folly -->
-  <Target Name="ApplyReactCommonTemporaryPatch" BeforeTargets="PrepareForBuild">
+  <Target Name="ApplyReactCommonTemporaryPatch" BeforeTargets="PrepareForBuild" Condition="false">
     <Copy DestinationFiles="@(TemporaryReactCommonPatchFiles->'$(ReactNativeDir)\ReactCommon\%(RecursiveDir)%(Filename)%(Extension)')" SourceFiles="@(TemporaryReactCommonPatchFiles)" />
   </Target>
 
diff --git a/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/react/renderer/mapbuffer/MapBuffer.cpp b/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/react/renderer/mapbuffer/MapBuffer.cpp
deleted file mode 100644
index 3b6f9c8f546..00000000000
--- a/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/react/renderer/mapbuffer/MapBuffer.cpp
+++ /dev/null
@@ -1,135 +0,0 @@
-/*
- * 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.
- */
-
-#include "MapBuffer.h"
-
-using namespace facebook::react;
-
-namespace facebook {
-namespace react {
-
-MapBuffer::MapBuffer(int initialSize) {
-  // [Windows - adding cast to fix build break in VS
-  _dataSize = static_cast<uint16_t>(initialSize);
-  // Windows]
-  _data = new Byte[_dataSize];
-  // TODO: Should we clean up memory here?
-}
-
-void MapBuffer::makeSpace() {
-  int oldDataSize = _dataSize;
-  _dataSize *= 2;
-  uint8_t *_newdata = new Byte[_dataSize];
-  uint8_t *_oldData = _data;
-  memcpy(_newdata, _data, oldDataSize);
-  _data = _newdata;
-  delete[] _oldData;
-}
-
-void MapBuffer::putBytes(Key key, uint8_t *value, int valueSize) {
-  if (key != _header.count) {
-    LOG(ERROR)
-        << "Error: key out of order (for now keys should we stored contiguous) "
-        << key;
-    throw "Error: key out of order (for now keys should we stored contiguous) - key: " +
-        std::to_string(key);
-  }
-
-  int valueOffset = getValueOffset(key);
-  if (valueOffset + valueSize > _dataSize) {
-    makeSpace();
-  }
-
-  memcpy(_data + getKeyOffset(key), &key, KEY_SIZE);
-  memcpy(_data + valueOffset, value, valueSize);
-  _header.count++;
-}
-
-void MapBuffer::putBool(Key key, bool value) {
-  putInt(key, (int)value);
-}
-
-void MapBuffer::putDouble(Key key, double value) {
-  uint8_t *bytePointer = reinterpret_cast<uint8_t *>(&value);
-  putBytes(key, bytePointer, DOUBLE_SIZE);
-}
-
-void MapBuffer::putNull(Key key) {
-  putInt(key, NULL_VALUE);
-}
-
-void MapBuffer::putInt(Key key, int value) {
-  uint8_t *bytePointer = reinterpret_cast<uint8_t *>(&(value));
-  putBytes(key, bytePointer, INT_SIZE);
-}
-
-void MapBuffer::finish() {
-  // Copy header at the beginning of "_data"
-  memcpy(_data, &_header, HEADER_SIZE);
-  // TODO: create a MapBufferBuilder instead of calling the finish method.
-}
-
-// TODO: All the "getXXX" methods are currently operating on a "finished" map.
-// Next step: create a MapBufferBuilder, move "putXXX" methods into the
-// MapBufferBuilder, make MapBuffer class immutable.
-int MapBuffer::getInt(Key key) {
-  checkKeyConsistency(_header, _data, key);
-
-  int value = 0;
-  memcpy(
-      reinterpret_cast<uint8_t *>(&value),
-      reinterpret_cast<const uint8_t *>(_data + getValueOffset(key)),
-      INT_SIZE);
-  return value;
-}
-
-bool MapBuffer::getBool(Key key) {
-  return getInt(key) != 0;
-}
-
-double MapBuffer::getDouble(Key key) {
-  checkKeyConsistency(_header, _data, key);
-
-  // TODO: extract this code into a "template method" and reuse it for other
-  // types
-  double value = 0;
-  memcpy(
-      reinterpret_cast<uint8_t *>(&value),
-      reinterpret_cast<const uint8_t *>(_data + getValueOffset(key)),
-      DOUBLE_SIZE);
-  return value;
-}
-
-bool MapBuffer::isNull(Key key) {
-  return getInt(key) == NULL_VALUE;
-}
-
-uint16_t MapBuffer::getBufferSize() {
-  return _dataSize;
-}
-
-void MapBuffer::copy(uint8_t *output) {
-  memcpy(output, _data, _dataSize);
-}
-
-uint16_t MapBuffer::getSize() {
-  uint16_t size = 0;
-  memcpy(
-      reinterpret_cast<uint16_t *>(&size),
-      reinterpret_cast<const uint16_t *>(
-          _data + UINT16_SIZE), // TODO refactor this: + UINT16_SIZE describes
-                                // the position in the header
-      UINT16_SIZE);
-  return size;
-}
-
-MapBuffer::~MapBuffer() {
-  delete[] _data;
-}
-
-} // namespace react
-} // namespace facebook
diff --git a/vnext/ReactCommon/Yoga.cpp b/vnext/ReactCommon/Yoga.cpp
index c1bbc221d70..3dab26732d6 100644
--- a/vnext/ReactCommon/Yoga.cpp
+++ b/vnext/ReactCommon/Yoga.cpp
@@ -110,36 +110,6 @@ YOGA_EXPORT bool YGFloatIsUndefined(const float value) {
   return facebook::yoga::isUndefined(value);
 }
 
-detail::CompactValue YGComputedEdgeValue(
-    const YGStyle::Edges &edges,
-    YGEdge edge,
-    detail::CompactValue defaultValue) {
-  if (!edges[edge].isUndefined()) {
-    return edges[edge];
-  }
-
-  if ((edge == YGEdgeTop || edge == YGEdgeBottom) &&
-      !edges[YGEdgeVertical].isUndefined()) {
-    return edges[YGEdgeVertical];
-  }
-
-  if ((edge == YGEdgeLeft || edge == YGEdgeRight || edge == YGEdgeStart ||
-       edge == YGEdgeEnd) &&
-      !edges[YGEdgeHorizontal].isUndefined()) {
-    return edges[YGEdgeHorizontal];
-  }
-
-  if (!edges[YGEdgeAll].isUndefined()) {
-    return edges[YGEdgeAll];
-  }
-
-  if (edge == YGEdgeStart || edge == YGEdgeEnd) {
-    return detail::CompactValue::ofUndefined();
-  }
-
-  return defaultValue;
-}
-
 YOGA_EXPORT void* YGNodeGetContext(YGNodeRef node) {
   return node->getContext();
 }
@@ -1681,23 +1651,20 @@ static void YGNodeWithMeasureFuncSetMeasuredDimensions(
     availableHeight = YGUndefined;
   }
 
-  const float paddingAndBorderAxisRow =
-      YGNodePaddingAndBorderForAxis(node, YGFlexDirectionRow, ownerWidth);
-  const float paddingAndBorderAxisColumn =
-      YGNodePaddingAndBorderForAxis(node, YGFlexDirectionColumn, ownerWidth);
-  const float marginAxisRow =
-      node->getMarginForAxis(YGFlexDirectionRow, ownerWidth).unwrap();
-  const float marginAxisColumn =
-      node->getMarginForAxis(YGFlexDirectionColumn, ownerWidth).unwrap();
+  const auto& padding = node->getLayout().padding;
+  const auto& border = node->getLayout().border;
+  const float paddingAndBorderAxisRow = padding[YGEdgeLeft] +
+      padding[YGEdgeRight] + border[YGEdgeLeft] + border[YGEdgeRight];
+  const float paddingAndBorderAxisColumn = padding[YGEdgeTop] +
+      padding[YGEdgeBottom] + border[YGEdgeTop] + border[YGEdgeBottom];
 
   // We want to make sure we don't call measure with negative size
   const float innerWidth = YGFloatIsUndefined(availableWidth)
       ? availableWidth
-      : YGFloatMax(0, availableWidth - marginAxisRow - paddingAndBorderAxisRow);
+      : YGFloatMax(0, availableWidth - paddingAndBorderAxisRow);
   const float innerHeight = YGFloatIsUndefined(availableHeight)
       ? availableHeight
-      : YGFloatMax(
-            0, availableHeight - marginAxisColumn - paddingAndBorderAxisColumn);
+      : YGFloatMax(0, availableHeight - paddingAndBorderAxisColumn);
 
   // Measure the text under the current constraints.
   const YGSize measuredSize = node->measure(
@@ -1712,17 +1679,13 @@ static void YGNodeWithMeasureFuncSetMeasuredDimensions(
     // Don't bother sizing the text if both dimensions are already defined.
     node->setLayoutMeasuredDimension(
         YGNodeBoundAxis(
-            node,
-            YGFlexDirectionRow,
-            availableWidth - marginAxisRow,
-            ownerWidth,
-            ownerWidth),
+            node, YGFlexDirectionRow, availableWidth, ownerWidth, ownerWidth),
         YGDimensionWidth);
     node->setLayoutMeasuredDimension(
         YGNodeBoundAxis(
             node,
             YGFlexDirectionColumn,
-            availableHeight - marginAxisColumn,
+            availableHeight,
             ownerHeight,
             ownerWidth),
         YGDimensionHeight);
@@ -1751,7 +1714,7 @@ static void YGNodeWithMeasureFuncSetMeasuredDimensions(
             (widthMeasureMode == YGMeasureModeUndefined ||
              widthMeasureMode == YGMeasureModeAtMost)
                 ? measuredSize.width + paddingAndBorderAxisRow
-                : availableWidth - marginAxisRow,
+                : availableWidth,
             ownerWidth,
             ownerWidth),
         YGDimensionWidth);
@@ -1763,7 +1726,7 @@ static void YGNodeWithMeasureFuncSetMeasuredDimensions(
             (heightMeasureMode == YGMeasureModeUndefined ||
              heightMeasureMode == YGMeasureModeAtMost)
                 ? measuredSize.height + paddingAndBorderAxisColumn
-                : availableHeight - marginAxisColumn,
+                : availableHeight,
             ownerHeight,
             ownerWidth),
         YGDimensionHeight);
@@ -1780,37 +1743,28 @@ static void YGNodeEmptyContainerSetMeasuredDimensions(
     const YGMeasureMode heightMeasureMode,
     const float ownerWidth,
     const float ownerHeight) {
-  const float paddingAndBorderAxisRow =
-      YGNodePaddingAndBorderForAxis(node, YGFlexDirectionRow, ownerWidth);
-  const float paddingAndBorderAxisColumn =
-      YGNodePaddingAndBorderForAxis(node, YGFlexDirectionColumn, ownerWidth);
-  const float marginAxisRow =
-      node->getMarginForAxis(YGFlexDirectionRow, ownerWidth).unwrap();
-  const float marginAxisColumn =
-      node->getMarginForAxis(YGFlexDirectionColumn, ownerWidth).unwrap();
-
+  const auto& padding = node->getLayout().padding;
+  const auto& border = node->getLayout().border;
+
+  float width = availableWidth;
+  if (widthMeasureMode == YGMeasureModeUndefined ||
+      widthMeasureMode == YGMeasureModeAtMost) {
+    width = padding[YGEdgeLeft] + padding[YGEdgeRight] + border[YGEdgeLeft] +
+        border[YGEdgeRight];
+  }
   node->setLayoutMeasuredDimension(
-      YGNodeBoundAxis(
-          node,
-          YGFlexDirectionRow,
-          (widthMeasureMode == YGMeasureModeUndefined ||
-           widthMeasureMode == YGMeasureModeAtMost)
-              ? paddingAndBorderAxisRow
-              : availableWidth - marginAxisRow,
-          ownerWidth,
-          ownerWidth),
+      YGNodeBoundAxis(node, YGFlexDirectionRow, width, ownerWidth, ownerWidth),
       YGDimensionWidth);
 
+  float height = availableHeight;
+  if (heightMeasureMode == YGMeasureModeUndefined ||
+      heightMeasureMode == YGMeasureModeAtMost) {
+    height = padding[YGEdgeTop] + padding[YGEdgeBottom] + border[YGEdgeTop] +
+        border[YGEdgeBottom];
+  }
   node->setLayoutMeasuredDimension(
       YGNodeBoundAxis(
-          node,
-          YGFlexDirectionColumn,
-          (heightMeasureMode == YGMeasureModeUndefined ||
-           heightMeasureMode == YGMeasureModeAtMost)
-              ? paddingAndBorderAxisColumn
-              : availableHeight - marginAxisColumn,
-          ownerHeight,
-          ownerWidth),
+          node, YGFlexDirectionColumn, height, ownerHeight, ownerWidth),
       YGDimensionHeight);
 }
 
@@ -1828,11 +1782,6 @@ static bool YGNodeFixedSizeSetMeasuredDimensions(
        heightMeasureMode == YGMeasureModeAtMost && availableHeight <= 0.0f) ||
       (widthMeasureMode == YGMeasureModeExactly &&
        heightMeasureMode == YGMeasureModeExactly)) {
-    auto marginAxisColumn =
-        node->getMarginForAxis(YGFlexDirectionColumn, ownerWidth).unwrap();
-    auto marginAxisRow =
-        node->getMarginForAxis(YGFlexDirectionRow, ownerWidth).unwrap();
-
     node->setLayoutMeasuredDimension(
         YGNodeBoundAxis(
             node,
@@ -1841,7 +1790,7 @@ static bool YGNodeFixedSizeSetMeasuredDimensions(
                     (widthMeasureMode == YGMeasureModeAtMost &&
                      availableWidth < 0.0f)
                 ? 0.0f
-                : availableWidth - marginAxisRow,
+                : availableWidth,
             ownerWidth,
             ownerWidth),
         YGDimensionWidth);
@@ -1854,7 +1803,7 @@ static bool YGNodeFixedSizeSetMeasuredDimensions(
                     (heightMeasureMode == YGMeasureModeAtMost &&
                      availableHeight < 0.0f)
                 ? 0.0f
-                : availableHeight - marginAxisColumn,
+                : availableHeight,
             ownerHeight,
             ownerWidth),
         YGDimensionHeight);
@@ -1878,21 +1827,11 @@ static void YGZeroOutLayoutRecursivly(
 
 static float YGNodeCalculateAvailableInnerDim(
     const YGNodeConstRef node,
-    YGFlexDirection axis,
-    float availableDim,
-    float ownerDim,
-    float ownerDimForMarginPadding) {
-  YGFlexDirection direction =
-      YGFlexDirectionIsRow(axis) ? YGFlexDirectionRow : YGFlexDirectionColumn;
-  YGDimension dimension =
-      YGFlexDirectionIsRow(axis) ? YGDimensionWidth : YGDimensionHeight;
-
-  const float margin =
-      node->getMarginForAxis(direction, ownerDimForMarginPadding).unwrap();
-  const float paddingAndBorder =
-      YGNodePaddingAndBorderForAxis(node, direction, ownerDimForMarginPadding);
-
-  float availableInnerDim = availableDim - margin - paddingAndBorder;
+    const YGDimension dimension,
+    const float availableDim,
+    const float paddingAndBorder,
+    const float ownerDim) {
+  float availableInnerDim = availableDim - paddingAndBorder;
   // Max dimension overrides predefined dimension value; Min dimension in turn
   // overrides both of the above
   if (!YGFloatIsUndefined(availableInnerDim)) {
@@ -2779,16 +2718,22 @@ static void YGNodelayoutImpl(
   const YGEdge startEdge =
       direction == YGDirectionLTR ? YGEdgeLeft : YGEdgeRight;
   const YGEdge endEdge = direction == YGDirectionLTR ? YGEdgeRight : YGEdgeLeft;
-  node->setLayoutMargin(
-      node->getLeadingMargin(flexRowDirection, ownerWidth).unwrap(), startEdge);
-  node->setLayoutMargin(
-      node->getTrailingMargin(flexRowDirection, ownerWidth).unwrap(), endEdge);
-  node->setLayoutMargin(
-      node->getLeadingMargin(flexColumnDirection, ownerWidth).unwrap(),
-      YGEdgeTop);
-  node->setLayoutMargin(
-      node->getTrailingMargin(flexColumnDirection, ownerWidth).unwrap(),
-      YGEdgeBottom);
+
+  const float marginRowLeading =
+      node->getLeadingMargin(flexRowDirection, ownerWidth).unwrap();
+  node->setLayoutMargin(marginRowLeading, startEdge);
+  const float marginRowTrailing =
+      node->getTrailingMargin(flexRowDirection, ownerWidth).unwrap();
+  node->setLayoutMargin(marginRowTrailing, endEdge);
+  const float marginColumnLeading =
+      node->getLeadingMargin(flexColumnDirection, ownerWidth).unwrap();
+  node->setLayoutMargin(marginColumnLeading, YGEdgeTop);
+  const float marginColumnTrailing =
+      node->getTrailingMargin(flexColumnDirection, ownerWidth).unwrap();
+  node->setLayoutMargin(marginColumnTrailing, YGEdgeBottom);
+
+  const float marginAxisRow = marginRowLeading + marginRowTrailing;
+  const float marginAxisColumn = marginColumnLeading + marginColumnTrailing;
 
   node->setLayoutBorder(node->getLeadingBorder(flexRowDirection), startEdge);
   node->setLayoutBorder(node->getTrailingBorder(flexRowDirection), endEdge);
@@ -2811,8 +2756,8 @@ static void YGNodelayoutImpl(
   if (node->hasMeasureFunc()) {
     YGNodeWithMeasureFuncSetMeasuredDimensions(
         node,
-        availableWidth,
-        availableHeight,
+        availableWidth - marginAxisRow,
+        availableHeight - marginAxisColumn,
         widthMeasureMode,
         heightMeasureMode,
         ownerWidth,
@@ -2827,8 +2772,8 @@ static void YGNodelayoutImpl(
   if (childCount == 0) {
     YGNodeEmptyContainerSetMeasuredDimensions(
         node,
-        availableWidth,
-        availableHeight,
+        availableWidth - marginAxisRow,
+        availableHeight - marginAxisColumn,
         widthMeasureMode,
         heightMeasureMode,
         ownerWidth,
@@ -2841,8 +2786,8 @@ static void YGNodelayoutImpl(
   if (!performLayout &&
       YGNodeFixedSizeSetMeasuredDimensions(
           node,
-          availableWidth,
-          availableHeight,
+          availableWidth - marginAxisRow,
+          availableHeight - marginAxisColumn,
           widthMeasureMode,
           heightMeasureMode,
           ownerWidth,
@@ -2866,12 +2811,14 @@ static void YGNodelayoutImpl(
   const float mainAxisownerSize = isMainAxisRow ? ownerWidth : ownerHeight;
   const float crossAxisownerSize = isMainAxisRow ? ownerHeight : ownerWidth;
 
-  const float leadingPaddingAndBorderCross =
-      node->getLeadingPaddingAndBorder(crossAxis, ownerWidth).unwrap();
   const float paddingAndBorderAxisMain =
       YGNodePaddingAndBorderForAxis(node, mainAxis, ownerWidth);
+  const float leadingPaddingAndBorderCross =
+      node->getLeadingPaddingAndBorder(crossAxis, ownerWidth).unwrap();
+  const float trailingPaddingAndBorderCross =
+      node->getTrailingPaddingAndBorder(crossAxis, ownerWidth).unwrap();
   const float paddingAndBorderAxisCross =
-      YGNodePaddingAndBorderForAxis(node, crossAxis, ownerWidth);
+      leadingPaddingAndBorderCross + trailingPaddingAndBorderCross;
 
   YGMeasureMode measureModeMainDim =
       isMainAxisRow ? widthMeasureMode : heightMeasureMode;
@@ -2883,35 +2830,20 @@ static void YGNodelayoutImpl(
   const float paddingAndBorderAxisColumn =
       isMainAxisRow ? paddingAndBorderAxisCross : paddingAndBorderAxisMain;
 
-  const float marginAxisRow =
-      node->getMarginForAxis(YGFlexDirectionRow, ownerWidth).unwrap();
-  const float marginAxisColumn =
-      node->getMarginForAxis(YGFlexDirectionColumn, ownerWidth).unwrap();
-
-  const auto &minDimensions = node->getStyle().minDimensions();
-  const auto &maxDimensions = node->getStyle().maxDimensions();
-  const float minInnerWidth =
-      YGResolveValue(minDimensions[YGDimensionWidth], ownerWidth).unwrap() -
-      paddingAndBorderAxisRow;
-  const float maxInnerWidth =
-      YGResolveValue(maxDimensions[YGDimensionWidth], ownerWidth).unwrap() -
-      paddingAndBorderAxisRow;
-  const float minInnerHeight =
-      YGResolveValue(minDimensions[YGDimensionHeight], ownerHeight).unwrap() -
-      paddingAndBorderAxisColumn;
-  const float maxInnerHeight =
-      YGResolveValue(maxDimensions[YGDimensionHeight], ownerHeight).unwrap() -
-      paddingAndBorderAxisColumn;
-
-  const float minInnerMainDim = isMainAxisRow ? minInnerWidth : minInnerHeight;
-  const float maxInnerMainDim = isMainAxisRow ? maxInnerWidth : maxInnerHeight;
-
   // STEP 2: DETERMINE AVAILABLE SIZE IN MAIN AND CROSS DIRECTIONS
 
   float availableInnerWidth = YGNodeCalculateAvailableInnerDim(
-      node, YGFlexDirectionRow, availableWidth, ownerWidth, ownerWidth);
+      node,
+      YGDimensionWidth,
+      availableWidth - marginAxisRow,
+      paddingAndBorderAxisRow,
+      ownerWidth);
   float availableInnerHeight = YGNodeCalculateAvailableInnerDim(
-      node, YGFlexDirectionColumn, availableHeight, ownerHeight, ownerWidth);
+      node,
+      YGDimensionHeight,
+      availableHeight - marginAxisColumn,
+      paddingAndBorderAxisColumn,
+      ownerHeight);
 
   float availableInnerMainDim =
       isMainAxisRow ? availableInnerWidth : availableInnerHeight;
@@ -2983,6 +2915,28 @@ static void YGNodelayoutImpl(
     // If we don't measure with exact main dimension we want to ensure we don't
     // violate min and max
     if (measureModeMainDim != YGMeasureModeExactly) {
+      const auto& minDimensions = node->getStyle().minDimensions();
+      const auto& maxDimensions = node->getStyle().maxDimensions();
+      const float minInnerWidth =
+          YGResolveValue(minDimensions[YGDimensionWidth], ownerWidth).unwrap() -
+          paddingAndBorderAxisRow;
+      const float maxInnerWidth =
+          YGResolveValue(maxDimensions[YGDimensionWidth], ownerWidth).unwrap() -
+          paddingAndBorderAxisRow;
+      const float minInnerHeight =
+          YGResolveValue(minDimensions[YGDimensionHeight], ownerHeight)
+              .unwrap() -
+          paddingAndBorderAxisColumn;
+      const float maxInnerHeight =
+          YGResolveValue(maxDimensions[YGDimensionHeight], ownerHeight)
+              .unwrap() -
+          paddingAndBorderAxisColumn;
+
+      const float minInnerMainDim =
+          isMainAxisRow ? minInnerWidth : minInnerHeight;
+      const float maxInnerMainDim =
+          isMainAxisRow ? maxInnerWidth : maxInnerHeight;
+
       if (!YGFloatIsUndefined(minInnerMainDim) &&
           collectedFlexItemsValues.sizeConsumedOnCurrentLine <
               minInnerMainDim) {
@@ -3557,7 +3511,8 @@ static void YGNodelayoutImpl(
   if (performLayout) {
     // STEP 10: SIZING AND POSITIONING ABSOLUTE CHILDREN
     for (auto child : node->getChildren()) {
-      if (child->getStyle().positionType() != YGPositionTypeAbsolute) {
+      if (child->getStyle().display() == YGDisplayNone ||
+          child->getStyle().positionType() != YGPositionTypeAbsolute) {
         continue;
       }
       YGNodeAbsoluteLayoutChild(
diff --git a/vnext/overrides.json b/vnext/overrides.json
index a93c288d451..444101920a3 100644
--- a/vnext/overrides.json
+++ b/vnext/overrides.json
@@ -2,30 +2,22 @@
   "includePatterns": [
     ".flowconfig",
     "ReactCopies/**",
-    "src/**",
-    "ReactCommon/TEMP_UntilReactCommonUpdate/**"
+    "src/**"
   ],
   "excludePatterns": [],
-  "baseVersion": "0.0.0-d477f8011",
+  "baseVersion": "0.0.0-cfb5b5e20",
   "overrides": [
     {
       "type": "derived",
       "file": ".flowconfig",
       "baseFile": ".flowconfig",
-      "baseHash": "f4da69b0623292df17b4cb39406edf68fecabe9d"
-    },
-    {
-      "type": "derived",
-      "file": "ReactCommon/TEMP_UntilReactCommonUpdate/react/renderer/mapbuffer/MapBuffer.cpp",
-      "baseFile": "ReactCommon/react/renderer/mapbuffer/MapBuffer.cpp",
-      "baseHash": "f810d614ada443e806fee88a0edf3bb6564d2c7d",
-      "issue": 7309
+      "baseHash": "718336b53dd84d09a5331cc4c6a3726114510030"
     },
     {
       "type": "patch",
       "file": "ReactCommon/Yoga.cpp",
       "baseFile": "ReactCommon/yoga/yoga/Yoga.cpp",
-      "baseHash": "2241c126cde8163f86570a3f5a4db670cf9a7944",
+      "baseHash": "12842ce403b4851e233d2c2cc4dd7309c0428c64",
       "issue": 3994
     },
     {
@@ -114,7 +106,7 @@
       "type": "patch",
       "file": "src/Libraries/Components/Button.windows.js",
       "baseFile": "Libraries/Components/Button.js",
-      "baseHash": "93f4b6047b238d31c2c72c44f11cd689c6a4b071"
+      "baseHash": "19798c7a92e544d8cc413a18ca00c3c169fcfcba"
     },
     {
       "type": "platform",
@@ -232,7 +224,7 @@
       "type": "patch",
       "file": "src/Libraries/Components/RefreshControl/RefreshControl.windows.js",
       "baseFile": "Libraries/Components/RefreshControl/RefreshControl.js",
-      "baseHash": "75d1508da1341e093768b8225de92d1e1eb7c444"
+      "baseHash": "2bed44fc601df3d89d5b85db2b7c9919bc33e60b"
     },
     {
       "type": "derived",
@@ -358,7 +350,7 @@
       "type": "patch",
       "file": "src/Libraries/Pressability/Pressability.windows.js",
       "baseFile": "Libraries/Pressability/Pressability.js",
-      "baseHash": "82f4338c74beba7c2321ab045bd00494b9669f61",
+      "baseHash": "ed5e7153ca1750dea21f40ed5d0ecd76c00cbddf",
       "issue": 4379
     },
     {
diff --git a/vnext/package.json b/vnext/package.json
index 708377a8130..1c08014fb11 100644
--- a/vnext/package.json
+++ b/vnext/package.json
@@ -67,7 +67,7 @@
     "just-scripts": "^1.3.3",
     "prettier": "1.19.1",
     "react": "17.0.1",
-    "react-native": "0.0.0-d477f8011",
+    "react-native": "0.0.0-cfb5b5e20",
     "react-native-platform-override": "^1.4.13",
     "react-refresh": "^0.4.0",
     "react-shallow-renderer": "16.14.1",
@@ -75,7 +75,7 @@
   },
   "peerDependencies": {
     "react": "17.0.1",
-    "react-native": "0.0.0-d477f8011"
+    "react-native": "0.0.0-cfb5b5e20"
   },
   "beachball": {
     "defaultNpmTag": "canary",
diff --git a/vnext/src/Libraries/Components/Button.windows.js b/vnext/src/Libraries/Components/Button.windows.js
index d87af53c4fb..c0b53c957e2 100644
--- a/vnext/src/Libraries/Components/Button.windows.js
+++ b/vnext/src/Libraries/Components/Button.windows.js
@@ -19,9 +19,9 @@ const Text = require('../Text/Text');
 const TouchableHighlight = require('./Touchable/TouchableHighlight');
 // Windows]
 const View = require('./View/View');
-
 const invariant = require('invariant');
 
+import type {AccessibilityState} from './View/ViewAccessibility';
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {ColorValue} from '../StyleSheet/StyleSheet';
 
@@ -136,6 +136,11 @@ type ButtonProps = $ReadOnly<{|
    */
   testID?: ?string,
 
+  /**
+   * Accessibility props.
+   */
+  accessibilityState?: ?AccessibilityState,
+  
   // [Windows
   /**
     Set the order in which elements receive focus when the user navigates through them by pressing Tab.
@@ -269,7 +274,6 @@ class Button extends React.Component<ButtonProps> {
       nextFocusLeft,
       nextFocusRight,
       nextFocusUp,
-      disabled,
       testID,
       tabIndex,
     } = this.props;
@@ -282,12 +286,22 @@ class Button extends React.Component<ButtonProps> {
         buttonStyles.push({backgroundColor: color});
       }
     }
-    const accessibilityState = {};
+
+    const disabled =
+      this.props.disabled != null
+        ? this.props.disabled
+        : this.props.accessibilityState?.disabled;
+
+    const accessibilityState =
+      disabled !== this.props.accessibilityState?.disabled
+        ? {...this.props.accessibilityState, disabled}
+        : this.props.accessibilityState;
+
     if (disabled) {
       buttonStyles.push(styles.buttonDisabled);
       textStyles.push(styles.textDisabled);
-      accessibilityState.disabled = true;
     }
+
     invariant(
       typeof title === 'string',
       'The title prop of a Button must be a string',
diff --git a/vnext/src/Libraries/Components/RefreshControl/RefreshControl.windows.js b/vnext/src/Libraries/Components/RefreshControl/RefreshControl.windows.js
index dc785060afe..e00357020eb 100644
--- a/vnext/src/Libraries/Components/RefreshControl/RefreshControl.windows.js
+++ b/vnext/src/Libraries/Components/RefreshControl/RefreshControl.windows.js
@@ -52,10 +52,6 @@ type AndroidProps = $ReadOnly<{|
    * Size of the refresh indicator.
    */
   size?: ?('default' | 'large'),
-  /**
-   * Progress view top offset
-   */
-  progressViewOffset?: ?number,
 |}>;
 
 export type RefreshControlProps = $ReadOnly<{|
@@ -72,6 +68,11 @@ export type RefreshControlProps = $ReadOnly<{|
    * Whether the view should be indicating an active refresh.
    */
   refreshing: boolean,
+
+  /**
+   * Progress view top offset
+   */
+  progressViewOffset?: ?number,
 |}>;
 
 /**
@@ -162,7 +163,6 @@ class RefreshControl extends React.Component<RefreshControlProps> {
         colors,
         progressBackgroundColor,
         size,
-        progressViewOffset,
         ...props
       } = this.props;
       return (
diff --git a/vnext/src/Libraries/Pressability/Pressability.windows.js b/vnext/src/Libraries/Pressability/Pressability.windows.js
index 9d8d086a002..886eb184e15 100644
--- a/vnext/src/Libraries/Pressability/Pressability.windows.js
+++ b/vnext/src/Libraries/Pressability/Pressability.windows.js
@@ -19,6 +19,8 @@ import type {
   MouseEvent,
   KeyEvent, // [Windows]
 } from '../Types/CoreEventTypes';
+import PressabilityPerformanceEventEmitter from './PressabilityPerformanceEventEmitter.js';
+import {type PressabilityTouchSignal as TouchSignal} from './PressabilityTypes.js';
 import Platform from '../Utilities/Platform';
 import UIManager from '../ReactNative/UIManager';
 import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
@@ -205,15 +207,6 @@ type TouchState =
   | 'RESPONDER_ACTIVE_LONG_PRESS_OUT'
   | 'ERROR';
 
-type TouchSignal =
-  | 'DELAY'
-  | 'RESPONDER_GRANT'
-  | 'RESPONDER_RELEASE'
-  | 'RESPONDER_TERMINATED'
-  | 'ENTER_PRESS_RECT'
-  | 'LEAVE_PRESS_RECT'
-  | 'LONG_PRESS_DETECTED';
-
 const Transitions = Object.freeze({
   NOT_RESPONDER: {
     DELAY: 'ERROR',
@@ -711,6 +704,13 @@ export default class Pressability {
         : '<<host component>>',
     );
     if (prevState !== nextState) {
+      PressabilityPerformanceEventEmitter.emitEvent(() => {
+        return {
+          signal,
+          touchDelayMs: Date.now() - event.nativeEvent.timestamp,
+        };
+      });
+
       this._performTransitionSideEffects(prevState, nextState, signal, event);
       this._touchState = nextState;
     }
diff --git a/yarn.lock b/yarn.lock
index 498de84f293..40b7e866659 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9063,10 +9063,10 @@ react-native-tscodegen@0.66.1:
     nullthrows "1.1.1"
     typescript "^3.5.3"
 
-react-native@0.0.0-d477f8011:
-  version "0.0.0-d477f8011"
-  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.0.0-d477f8011.tgz#9c4348c2404df96a12b73cf7da3219bfb5b31e9a"
-  integrity sha512-aEzCTzDOlBE6JeQ9u5EKLC32Gjcvbo1ZqM2STHkExZ9vuLfV1rZMl65Frwm42MIv8ftk9Fh/7a6TyswxF6CwBQ==
+react-native@0.0.0-cfb5b5e20:
+  version "0.0.0-cfb5b5e20"
+  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.0.0-cfb5b5e20.tgz#b00cba0dad57692f18a859388a5fb4d4b652e4ce"
+  integrity sha512-J9giG1ZqRyc5rMdiq+FYcVNPStR9371ACHfWZXSkV/r6SAz9SRS3DEyK0RsHBObNfZdvPcZHuYDm+hr+XzbR4w==
   dependencies:
     "@jest/create-cache-key-function" "^26.5.0"
     "@react-native-community/cli" "^5.0.1-alpha.0"

From ac5f8e08aa89a07e20a9f1e23c9b05bbca14965b Mon Sep 17 00:00:00 2001
From: Igor Klemenski <igklemen@microsoft.com>
Date: Thu, 8 Apr 2021 15:49:30 -0700
Subject: [PATCH 2/5] Change files

---
 ...-native-win32-0d8aceb9-f7cf-4bd3-99f1-61b1a0f90c40.json | 7 +++++++
 .../node-rnw-rpc-a4a4b07a-a174-49e3-894c-02e54e03611e.json | 7 +++++++
 ...ative-windows-9b8fed9e-be4c-430c-a6d8-324b0a1cf8d2.json | 7 +++++++
 3 files changed, 21 insertions(+)
 create mode 100644 change/@office-iss-react-native-win32-0d8aceb9-f7cf-4bd3-99f1-61b1a0f90c40.json
 create mode 100644 change/node-rnw-rpc-a4a4b07a-a174-49e3-894c-02e54e03611e.json
 create mode 100644 change/react-native-windows-9b8fed9e-be4c-430c-a6d8-324b0a1cf8d2.json

diff --git a/change/@office-iss-react-native-win32-0d8aceb9-f7cf-4bd3-99f1-61b1a0f90c40.json b/change/@office-iss-react-native-win32-0d8aceb9-f7cf-4bd3-99f1-61b1a0f90c40.json
new file mode 100644
index 00000000000..d0aed495488
--- /dev/null
+++ b/change/@office-iss-react-native-win32-0d8aceb9-f7cf-4bd3-99f1-61b1a0f90c40.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Integrate 3/18 nightly RN build.",
+  "packageName": "@office-iss/react-native-win32",
+  "email": "igklemen@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/node-rnw-rpc-a4a4b07a-a174-49e3-894c-02e54e03611e.json b/change/node-rnw-rpc-a4a4b07a-a174-49e3-894c-02e54e03611e.json
new file mode 100644
index 00000000000..eb80c0978fd
--- /dev/null
+++ b/change/node-rnw-rpc-a4a4b07a-a174-49e3-894c-02e54e03611e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Integrate 3/18 nightly RN build.",
+  "packageName": "node-rnw-rpc",
+  "email": "igklemen@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-9b8fed9e-be4c-430c-a6d8-324b0a1cf8d2.json b/change/react-native-windows-9b8fed9e-be4c-430c-a6d8-324b0a1cf8d2.json
new file mode 100644
index 00000000000..59325582e91
--- /dev/null
+++ b/change/react-native-windows-9b8fed9e-be4c-430c-a6d8-324b0a1cf8d2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Integrate 3/18 nightly RN build.",
+  "packageName": "react-native-windows",
+  "email": "igklemen@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 68684845acfd13adfd6a4ffa54d048e2a31e1c88 Mon Sep 17 00:00:00 2001
From: Igor Klemenski <igklemen@microsoft.com>
Date: Thu, 8 Apr 2021 16:17:38 -0700
Subject: [PATCH 3/5] run liter

---
 .../src/Libraries/Utilities/Dimensions.win32.js             | 6 ++----
 vnext/src/Libraries/Components/Button.windows.js            | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Utilities/Dimensions.win32.js b/packages/@office-iss/react-native-win32/src/Libraries/Utilities/Dimensions.win32.js
index 1679a302914..46d4ab4d84a 100644
--- a/packages/@office-iss/react-native-win32/src/Libraries/Utilities/Dimensions.win32.js
+++ b/packages/@office-iss/react-native-win32/src/Libraries/Utilities/Dimensions.win32.js
@@ -6,9 +6,7 @@
  * @flow
  */
 
- import {
-  type EventSubscription,
-} from '../vendor/emitter/EventEmitter';
+import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 
 class Dimensions {
   static get(dim: string): Object {
@@ -25,7 +23,7 @@ class Dimensions {
 
   static addEventListener(
     type: 'change',
-    handler: Function
+    handler: Function,
   ): EventSubscription {
     throw new Error(
       'Having a global Dimensions object is too simplistic for Win32, so this API does not work',
diff --git a/vnext/src/Libraries/Components/Button.windows.js b/vnext/src/Libraries/Components/Button.windows.js
index c0b53c957e2..7bf3bf0c157 100644
--- a/vnext/src/Libraries/Components/Button.windows.js
+++ b/vnext/src/Libraries/Components/Button.windows.js
@@ -140,7 +140,7 @@ type ButtonProps = $ReadOnly<{|
    * Accessibility props.
    */
   accessibilityState?: ?AccessibilityState,
-  
+
   // [Windows
   /**
     Set the order in which elements receive focus when the user navigates through them by pressing Tab.

From 278a35a39648e8793052153d2ac0a2b19cf803d4 Mon Sep 17 00:00:00 2001
From: Igor Klemenski <igklemen@microsoft.com>
Date: Thu, 8 Apr 2021 17:40:34 -0700
Subject: [PATCH 4/5] Remove DatePicker example from e2e test list.

---
 packages/e2e-test-app/test/visitAllPages.test.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/e2e-test-app/test/visitAllPages.test.ts b/packages/e2e-test-app/test/visitAllPages.test.ts
index 2defc289266..e3988415e6e 100644
--- a/packages/e2e-test-app/test/visitAllPages.test.ts
+++ b/packages/e2e-test-app/test/visitAllPages.test.ts
@@ -11,7 +11,6 @@ describe('visitAllPages', () => {
   const componentExamples = [
     'ActivityIndicator',
     'Button',
-    'DatePicker',
     'Fast Path Texts',
     'FlatList',
     'Flyout',

From 5cf4a4b7ee129795f0d7f5fee97af1c458579b7e Mon Sep 17 00:00:00 2001
From: Igor Klemenski <igklemen@microsoft.com>
Date: Thu, 8 Apr 2021 21:33:08 -0700
Subject: [PATCH 5/5] Add new FlatList pages to visitAll test.

---
 .../tester/src/js/utils/RNTesterList.windows.js              | 5 +++++
 packages/e2e-test-app/test/visitAllPages.test.ts             | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js b/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js
index 583a90f2e48..a3ac2845246 100644
--- a/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js
+++ b/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js
@@ -20,6 +20,11 @@ const ComponentExamples: Array<RNTesterExample> = [
     category: 'UI',
     module: require('../examples/Button/ButtonExample'),
   },
+  {
+    key: 'DatePickerExample',
+    category: 'UI',
+    module: require('../examples-win/DatePicker/DatePickerExample'),
+  },
   {
     key: 'FlatListExample',
     category: 'ListView',
diff --git a/packages/e2e-test-app/test/visitAllPages.test.ts b/packages/e2e-test-app/test/visitAllPages.test.ts
index e3988415e6e..926ef5c552c 100644
--- a/packages/e2e-test-app/test/visitAllPages.test.ts
+++ b/packages/e2e-test-app/test/visitAllPages.test.ts
@@ -11,8 +11,12 @@ describe('visitAllPages', () => {
   const componentExamples = [
     'ActivityIndicator',
     'Button',
+    'DatePicker',
     'Fast Path Texts',
     'FlatList',
+    'FlatList with Separators',
+    'FlatList onViewableItemsChanged',
+    'FlatList onEndReached',
     'Flyout',
     'Glyph UWP',
     'Image',