diff --git a/.github/workflows/react-integration.yml b/.github/workflows/react-integration.yml
index 9798e01361..624522a1f1 100644
--- a/.github/workflows/react-integration.yml
+++ b/.github/workflows/react-integration.yml
@@ -15,6 +15,6 @@ jobs:
         node-version: 16
     - run: npm install
     # Update react-native-web to use react@next
-    - run: npm install react@next react-dom@next -w react-native-web
+    - run: npm install --force react@next react-dom@next -w react-native-web
     # Run the unit tests
     - run: npm run unit
diff --git a/configs/.flowconfig b/configs/.flowconfig
index e2348f7f51..303c45a0fb 100644
--- a/configs/.flowconfig
+++ b/configs/.flowconfig
@@ -6,11 +6,14 @@
 <PROJECT_ROOT>/packages/.*/dist/.*
 <PROJECT_ROOT>/packages/react-native-web-docs/.*
 <PROJECT_ROOT>/packages/react-native-web-examples/.*
-.*/node_modules/.*/.*.json
 
 [include]
 
+[declarations]
+.*/node_modules/.*
+
 [libs]
 
 [options]
+indexed_access=true
 munge_underscores=true
diff --git a/package-lock.json b/package-lock.json
index 4af96be556..1ea21642bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2949,6 +2949,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@react-native/normalize-color": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native/normalize-color/-/normalize-color-2.1.0.tgz",
+      "integrity": "sha512-Z1jQI2NpdFJCVgpY+8Dq/Bt3d+YUi1928Q+/CZm/oh66fzM0RUl54vvuXlPJKybH4pdCZey1eDTPaLHkMPNgWA=="
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.24.51",
       "dev": true,
@@ -5722,9 +5727,10 @@
       }
     },
     "node_modules/engine.io": {
-      "version": "6.4.0",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.4.2.tgz",
+      "integrity": "sha512-FKn/3oMiJjrOEOeUub2WCox6JhxBXq/Zn3fZOMCBxKnNYtsdKjxhl7yR3fZhM9PV+rdE75SU5SYMc+2PGzo+Tg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@types/cookie": "^0.4.1",
         "@types/cors": "^2.8.12",
@@ -11179,6 +11185,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "dev": true,
@@ -11736,10 +11747,16 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/nullthrows": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
+      "integrity": "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw=="
+    },
     "node_modules/nunjucks": {
-      "version": "3.2.3",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz",
+      "integrity": "sha512-26XRV6BhkgK0VOxfbU5cQI+ICFUtMLixv1noZn1tGU38kQH5A5nmmbk/O45xdyBhD1esk47nKrY0mvQpZIhRjQ==",
       "dev": true,
-      "license": "BSD-2-Clause",
       "dependencies": {
         "a-sync-waterfall": "^1.0.0",
         "asap": "^2.0.3",
@@ -13669,9 +13686,10 @@
       }
     },
     "node_modules/socket.io-parser": {
-      "version": "4.2.2",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.3.tgz",
+      "integrity": "sha512-JMafRntWVO2DCJimKsRTh/wnqVvO4hrfwOqtO7f+uzwsQMuxO6VwImtYxaQ+ieoyshWOTJyV0fA21lccEXRPpQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@socket.io/component-emitter": "~3.1.0",
         "debug": "~4.3.1"
@@ -14370,9 +14388,10 @@
       }
     },
     "node_modules/tough-cookie": {
-      "version": "4.1.2",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
+      "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
       "dev": true,
-      "license": "BSD-3-Clause",
       "dependencies": {
         "psl": "^1.1.33",
         "punycode": "^2.1.1",
@@ -15164,9 +15183,10 @@
       }
     },
     "node_modules/word-wrap": {
-      "version": "1.2.3",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.4.tgz",
+      "integrity": "sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -15316,9 +15336,10 @@
       "license": "ISC"
     },
     "node_modules/yaml": {
-      "version": "2.2.1",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.2.tgz",
+      "integrity": "sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==",
       "dev": true,
-      "license": "ISC",
       "engines": {
         "node": ">= 14"
       }
@@ -15410,7 +15431,7 @@
       }
     },
     "packages/babel-plugin-react-native-web": {
-      "version": "0.19.1",
+      "version": "0.19.7",
       "license": "MIT",
       "devDependencies": {
         "babel-plugin-tester": "^10.1.0"
@@ -15466,15 +15487,17 @@
       "license": "MIT"
     },
     "packages/react-native-web": {
-      "version": "0.19.1",
+      "version": "0.19.7",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.6",
+        "@react-native/normalize-color": "^2.1.0",
         "fbjs": "^3.0.4",
         "inline-style-prefixer": "^6.0.1",
-        "normalize-css-color": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "nullthrows": "^1.1.1",
         "postcss-value-parser": "^4.2.0",
-        "styleq": "^0.1.2"
+        "styleq": "^0.1.3"
       },
       "peerDependencies": {
         "react": "^18.0.0",
@@ -15482,7 +15505,7 @@
       }
     },
     "packages/react-native-web-docs": {
-      "version": "0.19.1",
+      "version": "0.19.7",
       "devDependencies": {
         "@11ty/eleventy": "^1.0.1",
         "@11ty/eleventy-navigation": "^0.3.3",
@@ -15503,14 +15526,14 @@
       }
     },
     "packages/react-native-web-examples": {
-      "version": "0.19.1",
+      "version": "0.19.7",
       "license": "MIT",
       "dependencies": {
-        "babel-plugin-react-native-web": "0.19.1",
+        "babel-plugin-react-native-web": "0.19.7",
         "next": "^12.2.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
-        "react-native-web": "0.19.1"
+        "react-native-web": "0.19.7"
       },
       "devDependencies": {
         "@babel/core": "^7.18.6",
@@ -17321,6 +17344,11 @@
       "version": "1.0.0-next.21",
       "dev": true
     },
+    "@react-native/normalize-color": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native/normalize-color/-/normalize-color-2.1.0.tgz",
+      "integrity": "sha512-Z1jQI2NpdFJCVgpY+8Dq/Bt3d+YUi1928Q+/CZm/oh66fzM0RUl54vvuXlPJKybH4pdCZey1eDTPaLHkMPNgWA=="
+    },
     "@sinclair/typebox": {
       "version": "0.24.51",
       "dev": true
@@ -19238,7 +19266,9 @@
       "dev": true
     },
     "engine.io": {
-      "version": "6.4.0",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.4.2.tgz",
+      "integrity": "sha512-FKn/3oMiJjrOEOeUub2WCox6JhxBXq/Zn3fZOMCBxKnNYtsdKjxhl7yR3fZhM9PV+rdE75SU5SYMc+2PGzo+Tg==",
       "dev": true,
       "requires": {
         "@types/cookie": "^0.4.1",
@@ -22680,6 +22710,11 @@
       "version": "1.0.1",
       "dev": true
     },
+    "memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "memorystream": {
       "version": "0.3.1",
       "dev": true
@@ -23016,8 +23051,15 @@
         "boolbase": "^1.0.0"
       }
     },
+    "nullthrows": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
+      "integrity": "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw=="
+    },
     "nunjucks": {
-      "version": "3.2.3",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz",
+      "integrity": "sha512-26XRV6BhkgK0VOxfbU5cQI+ICFUtMLixv1noZn1tGU38kQH5A5nmmbk/O45xdyBhD1esk47nKrY0mvQpZIhRjQ==",
       "dev": true,
       "requires": {
         "a-sync-waterfall": "^1.0.0",
@@ -23605,11 +23647,13 @@
       "version": "file:packages/react-native-web",
       "requires": {
         "@babel/runtime": "^7.18.6",
+        "@react-native/normalize-color": "^2.1.0",
         "fbjs": "^3.0.4",
         "inline-style-prefixer": "^6.0.1",
-        "normalize-css-color": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "nullthrows": "^1.1.1",
         "postcss-value-parser": "^4.2.0",
-        "styleq": "^0.1.2"
+        "styleq": "^0.1.3"
       }
     },
     "react-native-web-docs": {
@@ -23638,11 +23682,11 @@
       "requires": {
         "@babel/core": "^7.18.6",
         "@babel/preset-flow": "^7.18.6",
-        "babel-plugin-react-native-web": "0.19.1",
+        "babel-plugin-react-native-web": "0.19.7",
         "next": "^12.2.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
-        "react-native-web": "0.19.1"
+        "react-native-web": "0.19.7"
       }
     },
     "read-pkg": {
@@ -24287,7 +24331,9 @@
       }
     },
     "socket.io-parser": {
-      "version": "4.2.2",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.3.tgz",
+      "integrity": "sha512-JMafRntWVO2DCJimKsRTh/wnqVvO4hrfwOqtO7f+uzwsQMuxO6VwImtYxaQ+ieoyshWOTJyV0fA21lccEXRPpQ==",
       "dev": true,
       "requires": {
         "@socket.io/component-emitter": "~3.1.0",
@@ -24713,7 +24759,9 @@
       "dev": true
     },
     "tough-cookie": {
-      "version": "4.1.2",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
+      "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
       "dev": true,
       "requires": {
         "psl": "^1.1.33",
@@ -25174,7 +25222,9 @@
       }
     },
     "word-wrap": {
-      "version": "1.2.3",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.4.tgz",
+      "integrity": "sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==",
       "dev": true
     },
     "wordwrap": {
@@ -25265,7 +25315,9 @@
       "dev": true
     },
     "yaml": {
-      "version": "2.2.1",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.2.tgz",
+      "integrity": "sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==",
       "dev": true
     },
     "yargs": {
diff --git a/packages/babel-plugin-react-native-web/package.json b/packages/babel-plugin-react-native-web/package.json
index b868e47745..ecd64bcf28 100644
--- a/packages/babel-plugin-react-native-web/package.json
+++ b/packages/babel-plugin-react-native-web/package.json
@@ -3,7 +3,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "name": "babel-plugin-react-native-web",
-  "version": "0.19.1",
+  "version": "0.19.7",
   "description": "Babel plugin for React Native for Web",
   "main": "index.js",
   "devDependencies": {
diff --git a/packages/babel-plugin-react-native-web/src/moduleMap.js b/packages/babel-plugin-react-native-web/src/moduleMap.js
index ad701cf822..a83dd77e1d 100644
--- a/packages/babel-plugin-react-native-web/src/moduleMap.js
+++ b/packages/babel-plugin-react-native-web/src/moduleMap.js
@@ -7,6 +7,7 @@ module.exports = {
   AppRegistry: true,
   AppState: true,
   Appearance: true,
+  BackHandler: true,
   Button: true,
   CheckBox: true,
   Clipboard: true,
diff --git a/packages/react-native-web-docs/package.json b/packages/react-native-web-docs/package.json
index 2f0a5e029c..eee78ccb06 100644
--- a/packages/react-native-web-docs/package.json
+++ b/packages/react-native-web-docs/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-native-web-docs",
-  "version": "0.19.1",
+  "version": "0.19.7",
   "description": "Documentation website for React Native for Web",
   "scripts": {
     "dev": "eleventy --serve",
diff --git a/packages/react-native-web-docs/src/includes/fragments/nav.html b/packages/react-native-web-docs/src/includes/fragments/nav.html
index 41289ef02e..23bb195597 100644
--- a/packages/react-native-web-docs/src/includes/fragments/nav.html
+++ b/packages/react-native-web-docs/src/includes/fragments/nav.html
@@ -3,7 +3,7 @@
 <nav id="navigation-scroller" class="view overflow-x-hidden overflow-y-auto h-full p-6 pt-12">
   <h1 class="m-0 mb-4" style="font-size:1rem;">
     <a class="view no-underline group font-semibold" href="{{ '/' | url }}" style="color:var(--docs-theme-color)">
-      <span class="view flex-row items-center overflow-x-hidden mb-1 text-xl">
+      <span class="view flex-row items-center overflow-hidden mb-1 text-xl">
         {{ site.name }}
       </span>
       <span>{{ site.packageName }}@{{ site.packageVersion }}</span>
diff --git a/packages/react-native-web-docs/src/includes/layouts/home.html b/packages/react-native-web-docs/src/includes/layouts/home.html
index ba21586eae..537db990e4 100644
--- a/packages/react-native-web-docs/src/includes/layouts/home.html
+++ b/packages/react-native-web-docs/src/includes/layouts/home.html
@@ -51,7 +51,7 @@ <h2>Try it out!</h2>
       ></iframe>
 
       <div class="callout">
-        <p><strong>Did you know?</strong> React Native for Web powers web support in multi-platform React tools like <a href="https://expo.dev">Expo</a>, <a href="https://reactnativeelements.com/">React Native Elements</a>, <a href="https://callstack.github.io/react-native-paper/using-on-the-web.html">React Native Paper</a>, and <a href="https://docs.nativebase.io/getting-started">React Native Base</a>.
+        <p><strong>Did you know?</strong> React Native for Web powers web support in multi-platform React tools like <a href="https://expo.dev">Expo</a>, <a href="https://reactnativeelements.com/">React Native Elements</a>, <a href="https://callstack.github.io/react-native-paper/using-on-the-web.html">React Native Paper</a>, and <a href="https://docs.nativebase.io/getting-started">NativeBase</a>.
       </div>
 
       <div style="height:2rem"><!-- spacer --></div>
diff --git a/packages/react-native-web-examples/next.config.js b/packages/react-native-web-examples/next.config.js
index 7fcc182978..ee1c14d7f1 100644
--- a/packages/react-native-web-examples/next.config.js
+++ b/packages/react-native-web-examples/next.config.js
@@ -7,6 +7,9 @@ const pages = fs
   .map((dirent) => dirent.name);
 
 module.exports = {
-  outDir: 'dist',
-  env: { pages }
+  env: { pages },
+  webpack: (config, options) => {
+    config.resolve.alias['react-native'] = 'react-native-web';
+    return config;
+  }
 };
diff --git a/packages/react-native-web-examples/package.json b/packages/react-native-web-examples/package.json
index b5e21299f3..a72b8cf71d 100644
--- a/packages/react-native-web-examples/package.json
+++ b/packages/react-native-web-examples/package.json
@@ -1,18 +1,18 @@
 {
   "private": true,
   "name": "react-native-web-examples",
-  "version": "0.19.1",
+  "version": "0.19.7",
   "scripts": {
     "build": "next build",
     "dev": "next",
     "start": "next start"
   },
   "dependencies": {
-    "babel-plugin-react-native-web": "0.19.1",
+    "babel-plugin-react-native-web": "0.19.7",
     "next": "^12.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-native-web": "0.19.1"
+    "react-native-web": "0.19.7"
   },
   "devDependencies": {
     "@babel/core": "^7.18.6",
diff --git a/packages/react-native-web-examples/pages/animated/index.js b/packages/react-native-web-examples/pages/animated/index.js
new file mode 100644
index 0000000000..f83c7a0604
--- /dev/null
+++ b/packages/react-native-web-examples/pages/animated/index.js
@@ -0,0 +1,59 @@
+import React, { useRef } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import Example from '../../shared/example';
+
+export default function AnimatedPage() {
+  const anim = useRef(new Animated.Value(0));
+
+  const animateBox = () => {
+    Animated.timing(anim.current, {
+      toValue: 1,
+      duration: 1000,
+      useNativeDriver: false
+    }).start();
+  };
+
+  const transform = anim.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['rotate(0deg)', 'rotate(45deg)']
+  });
+
+  return (
+    <Example title="Animated">
+      <View style={styles.container}>
+        <Animated.View style={[styles.animatedBox, { transform: transform }]} />
+        <Pressable
+          onPress={animateBox}
+          style={({ pressed }) => [
+            styles.button,
+            { opacity: pressed ? 0.4 : 1 }
+          ]}
+        >
+          <Text style={styles.buttonText}>Animate Box</Text>
+        </Pressable>
+      </View>
+    </Example>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  animatedBox: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'red',
+    alignSelf: 'center'
+  },
+  button: {
+    padding: 16,
+    paddingVertical: 8,
+    backgroundColor: 'blue',
+    borderRadius: 8,
+    marginTop: 24
+  },
+  buttonText: { color: 'white' }
+});
diff --git a/packages/react-native-web-examples/pages/checkbox/index.js b/packages/react-native-web-examples/pages/checkbox/index.js
index d7965cee0c..a987af006f 100644
--- a/packages/react-native-web-examples/pages/checkbox/index.js
+++ b/packages/react-native-web-examples/pages/checkbox/index.js
@@ -25,7 +25,7 @@ export default function CheckboxPage() {
         <Divider />
         <CheckBox disabled style={styles.item} value={true} />
         <Divider />
-        <CheckBox accessibilityReadOnly style={styles.item} value={true} />
+        <CheckBox aria-readonly style={styles.item} value={true} />
       </View>
       <View style={styles.row}>
         <CheckBox value={false} />
diff --git a/packages/react-native-web-examples/pages/clipboard/index.js b/packages/react-native-web-examples/pages/clipboard/index.js
index d2f19a265d..6fefd315f6 100644
--- a/packages/react-native-web-examples/pages/clipboard/index.js
+++ b/packages/react-native-web-examples/pages/clipboard/index.js
@@ -1,5 +1,6 @@
-import { Button, Clipboard, StyleSheet, TextInput, View } from 'react-native';
+import { Clipboard, StyleSheet, TextInput, View } from 'react-native';
 import React from 'react';
+import Button from '../../shared/button';
 import Example from '../../shared/example';
 
 export default function ClipboardPage() {
diff --git a/packages/react-native-web-examples/pages/image/index.js b/packages/react-native-web-examples/pages/image/index.js
index 7d95ae1b76..623f46c77a 100644
--- a/packages/react-native-web-examples/pages/image/index.js
+++ b/packages/react-native-web-examples/pages/image/index.js
@@ -59,7 +59,11 @@ export default function ImagePage() {
       <View style={styles.row}>
         <View style={styles.column}>
           <Text style={styles.text}>Static image</Text>
-          <Image source={'/image/ladybug.jpg'} style={styles.image} />
+          <Image
+            resizeMode="cover"
+            source={'/image/ladybug.jpg'}
+            style={styles.image}
+          />
         </View>
         <View style={styles.column}>
           <Text style={styles.text}>Progressive JPEG</Text>
@@ -166,8 +170,7 @@ const styles = StyleSheet.create({
     borderColor: 'black',
     borderWidth: 0.5,
     height: 120,
-    width: 120,
-    resizeMode: 'cover'
+    width: 120
   },
   resizeMode: {
     borderColor: 'black',
diff --git a/packages/react-native-web-examples/pages/index.js b/packages/react-native-web-examples/pages/index.js
index 011dda4f33..f78dd8a304 100644
--- a/packages/react-native-web-examples/pages/index.js
+++ b/packages/react-native-web-examples/pages/index.js
@@ -8,11 +8,7 @@ const logoUri =
 function Link(props) {
   return (
     <NextLink href={props.href}>
-      <Text
-        {...props}
-        accessibilityRole="link"
-        style={[styles.link, props.style]}
-      />
+      <Text {...props} role="link" style={[styles.link, props.style]} />
     </NextLink>
   );
 }
@@ -22,7 +18,7 @@ export default function IndexPage() {
     <View style={styles.app}>
       <View style={styles.header}>
         <Image
-          accessibilityLabel="React logo"
+          aria-label="React logo"
           resizeMode="contain"
           source={{ uri: logoUri }}
           style={styles.logo}
@@ -36,9 +32,9 @@ export default function IndexPage() {
         example app built on Next.js
       </Text>
 
-      <View accessibilityRole="list">
+      <View role="list">
         {process.env.pages.map((name) => (
-          <View accessibilityRole="listitem" key={name} style={styles.listitem}>
+          <View key={name} role="listitem" style={styles.listitem}>
             <Link href={'/' + name} style={styles.pageLink}>
               {name}
             </Link>
@@ -77,11 +73,11 @@ const styles = StyleSheet.create({
     color: '#1977f2'
   },
   listitem: {
-    marginVertical: '0.5rem',
-    textAlign: 'center'
+    marginVertical: '0.5rem'
   },
   pageLink: {
     fontSize: '1.25rem',
-    fontWeight: 'bold'
+    fontWeight: 'bold',
+    textAlign: 'center'
   }
 });
diff --git a/packages/react-native-web-examples/pages/linking/index.js b/packages/react-native-web-examples/pages/linking/index.js
index 125133a5b1..08eff4b5ca 100644
--- a/packages/react-native-web-examples/pages/linking/index.js
+++ b/packages/react-native-web-examples/pages/linking/index.js
@@ -1,35 +1,48 @@
 import { Linking, StyleSheet, Text } from 'react-native';
-import React, { PureComponent } from 'react';
+import React from 'react';
 import Example from '../../shared/example';
 
 const url = 'https://mathiasbynens.github.io/rel-noopener/malicious.html';
 
-export default class LinkingPage extends PureComponent {
-  handlePress() {
+export default function LinkingPage(props) {
+  const [, setCount] = React.useState(0);
+
+  React.useEffect(() => {
+    console.log('adding listener');
+    const listener = Linking.addEventListener('onOpen', () => {
+      console.log('onOpen event');
+    });
+    return () => {
+      console.log('removing listener');
+      listener.remove();
+    };
+  });
+
+  function handlePress() {
     Linking.canOpenURL(url).then((supported) => {
-      return Linking.openURL(url);
+      setCount((x) => x + 1);
+      const v = Linking.openURL(url);
+      return v;
     });
   }
 
-  render() {
-    return (
-      <Example title="Linking">
-        <Text onPress={this.handlePress} style={styles.text}>
-          Linking.openURL
-        </Text>
-        <Text
-          accessibilityRole="link"
-          href="https://mathiasbynens.github.io/rel-noopener/malicious.html"
-          hrefAttrs={{
-            target: '_blank'
-          }}
-          style={styles.text}
-        >
-          target="_blank"
-        </Text>
-      </Example>
-    );
-  }
+  return (
+    <Example title="Linking">
+      <Text onPress={handlePress} style={styles.text}>
+        Linking.openURL
+      </Text>
+      <Text
+        href="https://mathiasbynens.github.io/rel-noopener/malicious.html"
+        hrefAttrs={{
+          target: '_blank'
+        }}
+        role="link"
+        style={styles.text}
+      >
+        target="_blank"
+      </Text>
+    </Example>
+  );
 }
 
 const styles = StyleSheet.create({
diff --git a/packages/react-native-web-examples/pages/lists/index.js b/packages/react-native-web-examples/pages/lists/index.js
index bc4407c632..33bc86fa5f 100644
--- a/packages/react-native-web-examples/pages/lists/index.js
+++ b/packages/react-native-web-examples/pages/lists/index.js
@@ -15,7 +15,7 @@ import {
   Image,
   StyleSheet,
   Switch,
-  TouchableHighlight,
+  Pressable,
   Text,
   TextInput,
   View
@@ -92,14 +92,11 @@ class ItemComponent extends React.PureComponent<{
     const itemHash = Math.abs(hashCode(item.title));
     const imgSource = THUMB_URLS[itemHash % THUMB_URLS.length];
     return (
-      <TouchableHighlight
-        onHideUnderlay={this.props.onHideUnderlay}
+      <Pressable
         onPress={this._onPress}
-        onShowUnderlay={this.props.onShowUnderlay}
+        onPressIn={this.props.onShowUnderlay}
+        onPressOut={this.props.onHideUnderlay}
         style={horizontal ? styles.horizItem : styles.item}
-        tvParallaxProperties={{
-          pressMagnification: 1.1
-        }}
       >
         <View
           style={[
@@ -116,7 +113,7 @@ class ItemComponent extends React.PureComponent<{
             {item.title} - {item.text}
           </Text>
         </View>
-      </TouchableHighlight>
+      </Pressable>
     );
   }
 }
@@ -172,15 +169,11 @@ class Spindicator extends React.PureComponent<{}> {
         style={[
           styles.spindicator,
           {
-            transform: [
-              {
-                rotate: this.props.value.interpolate({
-                  inputRange: [0, 5000],
-                  outputRange: ['0deg', '360deg'],
-                  extrapolate: 'extend'
-                })
-              }
-            ]
+            rotate: this.props.value.interpolate({
+              inputRange: [0, 5000],
+              outputRange: ['0deg', '360deg'],
+              extrapolate: 'extend'
+            })
           }
         ]}
       />
@@ -263,9 +256,7 @@ class SingleColumnExample extends React.PureComponent {
   };
 
   _onChangeScrollToIndex = (text) => {
-    this._listRef
-      .getNode()
-      .scrollToIndex({ viewPosition: 0.5, index: Number(text) });
+    this._listRef.scrollToIndex({ viewPosition: 0.5, index: Number(text) });
   };
 
   _scrollPos = new Animated.Value(0);
@@ -283,7 +274,7 @@ class SingleColumnExample extends React.PureComponent {
   );
 
   componentDidUpdate() {
-    this._listRef.getNode().recordInteraction(); // e.g. flipping logViewable switch
+    this._listRef.recordInteraction(); // e.g. flipping logViewable switch
   }
 
   render() {
@@ -398,7 +389,7 @@ class SingleColumnExample extends React.PureComponent {
     }
   };
   _pressItem = (key: string) => {
-    this._listRef.getNode().recordInteraction();
+    this._listRef.recordInteraction();
     pressItem(this, key);
   };
   _listRef: AnimatedFlatList;
@@ -469,7 +460,7 @@ const styles = StyleSheet.create({
   smallSwitch: {
     top: 1,
     margin: -6,
-    transform: [{ scale: 0.7 }]
+    transform: 'scale(0.7)'
   },
   stacked: {
     alignItems: 'center',
diff --git a/packages/react-native-web-examples/pages/localization/index.js b/packages/react-native-web-examples/pages/localization/index.js
index 5c279066c3..2cc53d6e63 100644
--- a/packages/react-native-web-examples/pages/localization/index.js
+++ b/packages/react-native-web-examples/pages/localization/index.js
@@ -12,9 +12,9 @@
 
 import React from 'react';
 import {
-  Button,
   Image,
   PixelRatio,
+  Pressable,
   ScrollView,
   StyleSheet,
   Text,
@@ -41,7 +41,9 @@ function ListItem(props) {
         </View>
       </View>
       <View style={styles.column3}>
-        <Button onPress={() => {}} style={styles.smallButton} title="Button" />
+        <Pressable onPress={() => {}} style={styles.smallButton}>
+          <Text>Button</Text>
+        </Pressable>
       </View>
     </View>
   );
@@ -88,12 +90,13 @@ function withRTLState(Component) {
 const RTLToggler = ({ isRTL, setRTL }) => {
   const toggleRTL = () => setRTL(!isRTL);
   return (
-    <Button
-      accessibilityLabel="Change layout direction"
+    <Pressable
+      aria-label="Change layout direction"
       color="gray"
       onPress={toggleRTL}
-      title={isRTL ? 'RTL' : 'LTR'}
-    />
+    >
+      <Text>{isRTL ? 'RTL' : 'LTR'}</Text>
+    </Pressable>
   );
 };
 
diff --git a/packages/react-native-web-examples/pages/modal/index.js b/packages/react-native-web-examples/pages/modal/index.js
index 8cdd7fa989..ac0aa95c6a 100644
--- a/packages/react-native-web-examples/pages/modal/index.js
+++ b/packages/react-native-web-examples/pages/modal/index.js
@@ -1,5 +1,6 @@
 import React, { useState, useMemo } from 'react';
-import { Modal, View, Text, Button, StyleSheet } from 'react-native';
+import { Modal, View, Text, StyleSheet } from 'react-native';
+import Button from '../../shared/button';
 import Example from '../../shared/example';
 
 function Gap() {
diff --git a/packages/react-native-web-examples/pages/pan-responder/index.js b/packages/react-native-web-examples/pages/pan-responder/index.js
index 21ffbec848..5f4f519745 100644
--- a/packages/react-native-web-examples/pages/pan-responder/index.js
+++ b/packages/react-native-web-examples/pages/pan-responder/index.js
@@ -121,7 +121,7 @@ class LocationXY extends React.Component {
   };
 
   render() {
-    const transform = { transform: `translateX${this.state.translateX}` };
+    const transform = { transform: `translateX(${this.state.translateX}px)` };
     return (
       <View style={styles.box}>
         <View style={styles.outer} {...this.panResponder.panHandlers}>
diff --git a/packages/react-native-web-examples/pages/pressable/index.js b/packages/react-native-web-examples/pages/pressable/index.js
index 034303a07f..e4982bc73c 100644
--- a/packages/react-native-web-examples/pages/pressable/index.js
+++ b/packages/react-native-web-examples/pages/pressable/index.js
@@ -1,12 +1,6 @@
 import React from 'react';
-import {
-  Button,
-  ScrollView,
-  StyleSheet,
-  View,
-  Text,
-  Pressable
-} from 'react-native';
+import { ScrollView, StyleSheet, View, Text, Pressable } from 'react-native';
+import Button from '../../shared/button';
 import Example from '../../shared/example';
 
 export default function PressablePage() {
@@ -29,7 +23,6 @@ export default function PressablePage() {
     <Example title="Pressable">
       <View style={styles.container}>
         <Pressable
-          accessibilityRole="button"
           delayLongPress="750"
           delayPressIn={delay}
           delayPressOut={delay}
@@ -45,6 +38,7 @@ export default function PressablePage() {
           onPress={handleEvent(`onPress - ${delay}ms delay`)}
           onPressIn={handleEvent(`onPressIn - ${delay}ms delay`)}
           onPressOut={handleEvent(`oPressOut - ${delay}ms delay`)}
+          role="button"
           style={(state) => [
             styles.pressable,
             !disabled && state.focused && styles.focused,
diff --git a/packages/react-native-web-examples/pages/scroll-view/index.js b/packages/react-native-web-examples/pages/scroll-view/index.js
index 391d7b77b8..aff8007924 100644
--- a/packages/react-native-web-examples/pages/scroll-view/index.js
+++ b/packages/react-native-web-examples/pages/scroll-view/index.js
@@ -1,12 +1,6 @@
 import React from 'react';
-import {
-  Button,
-  ScrollView,
-  StyleSheet,
-  Text,
-  Pressable,
-  View
-} from 'react-native';
+import { ScrollView, StyleSheet, Text, Pressable, View } from 'react-native';
+import Button from '../../shared/button';
 import Example from '../../shared/example';
 
 const ITEMS = [...Array(12)].map((_, i) => `Item ${i}`);
diff --git a/packages/react-native-web-examples/pages/text-input/index.js b/packages/react-native-web-examples/pages/text-input/index.js
index cb4918696a..256a01ca82 100644
--- a/packages/react-native-web-examples/pages/text-input/index.js
+++ b/packages/react-native-web-examples/pages/text-input/index.js
@@ -39,13 +39,13 @@ export default function TextInputPage() {
           style={styles.textinput}
         />
         <TextInput
-          defaultValue="editable (false)"
-          editable={false}
+          defaultValue="readOnly (true)"
+          readOnly={true}
           style={styles.textinput}
         />
         <TextInput
-          keyboardType="numeric"
-          placeholder="keyboardType 'numeric'"
+          inputMode="numeric"
+          placeholder="inputMode 'numeric'"
           style={styles.textinput}
         />
         <TextInput
@@ -71,10 +71,15 @@ export default function TextInputPage() {
         />
         <TextInput
           multiline={true}
-          numberOfLines={3}
           placeholder="multiline"
+          rows={3}
           style={styles.multiline}
         />
+        <TextInput
+          caretHidden
+          defaultValue="caretHidden"
+          style={styles.textinput}
+        />
       </View>
     </Example>
   );
diff --git a/packages/react-native-web-examples/pages/text/index.js b/packages/react-native-web-examples/pages/text/index.js
index 828bf5bf72..c33f7a0218 100644
--- a/packages/react-native-web-examples/pages/text/index.js
+++ b/packages/react-native-web-examples/pages/text/index.js
@@ -6,8 +6,8 @@ const Spacer = () => <View style={{ height: '1rem' }} />;
 
 const Heading = ({ children }) => (
   <Text
-    accessibilityRole="heading"
     children={children}
+    role="heading"
     style={{ fontSize: '1rem', fontWeight: 'bold', marginBottom: '0.5rem' }}
   />
 );
@@ -298,9 +298,7 @@ function TextShadow() {
       <Text
         style={{
           fontSize: 20,
-          textShadowOffset: { width: 2, height: 2 },
-          textShadowRadius: 1,
-          textShadowColor: '#00cccc'
+          textShadow: '2px 2px 1px #00cccc'
         }}
       >
         Text shadow example
@@ -383,8 +381,9 @@ export default function TextPage() {
           />{' '}
           and an inline image{' '}
           <Image
+            resizeMode="cover"
             source={{ uri: 'http://lorempixel.com/30/11' }}
-            style={{ width: 30, height: 11, resizeMode: 'cover' }}
+            style={{ width: 30, height: 11 }}
           />
           .
         </Text>
@@ -412,14 +411,16 @@ export default function TextPage() {
           And then continues as text.
         </Text>
 
-        <Text selectable={true}>
+        <Text>
           This text is <Text style={{ fontWeight: 'bold' }}>selectable</Text> if
           you click-and-hold.
         </Text>
-        <Text selectable={false}>
+        <Text>
           This text is{' '}
-          <Text style={{ fontWeight: 'bold' }}>not selectable</Text> if you
-          click-and-hold.
+          <Text style={{ fontWeight: 'bold', userSelect: 'none' }}>
+            not selectable
+          </Text>{' '}
+          if you click-and-hold.
         </Text>
 
         <View style={{ paddingVertical: 20 }}>
diff --git a/packages/react-native-web-examples/pages/view/index.js b/packages/react-native-web-examples/pages/view/index.js
index fb8e32d4aa..6033304105 100644
--- a/packages/react-native-web-examples/pages/view/index.js
+++ b/packages/react-native-web-examples/pages/view/index.js
@@ -13,8 +13,11 @@ function Box({ pointerEvents }) {
   return (
     <Pressable
       onPress={log}
-      pointerEvents={pointerEvents}
-      style={({ pressed }) => [styles.box, pressed && styles.purple]}
+      style={({ pressed }) => [
+        styles.box,
+        pressed && styles.purple,
+        pointerEventsStyles[pointerEvents]
+      ]}
     >
       <Pressable
         onPress={log}
@@ -46,7 +49,7 @@ export default function ViewPage() {
   return (
     <Example title="View">
       <View style={styles.container}>
-        <Text accessibilityRole="heading" style={styles.heading}>
+        <Text role="heading" style={styles.heading}>
           onLayout
         </Text>
         <View>
@@ -56,11 +59,11 @@ export default function ViewPage() {
           <Text>{JSON.stringify(layoutInfo, null, 2)}</Text>
         </View>
 
-        <Text accessibilityRole="heading" style={styles.heading}>
+        <Text role="heading" style={styles.heading}>
           pointerEvents
         </Text>
-        <View pointerEvents="box-none">
-          <View pointerEvents="box-none" style={styles.boxContainer}>
+        <View style={pointerEventsStyles['box-none']}>
+          <View style={[styles.boxContainer, pointerEventsStyles['box-none']]}>
             <Box pointerEvents="none" />
             <Box pointerEvents="auto" />
             <Box pointerEvents="box-only" />
@@ -112,3 +115,18 @@ const styles = StyleSheet.create({
     backgroundColor: 'purple'
   }
 });
+
+const pointerEventsStyles = StyleSheet.create({
+  auto: {
+    pointerEvents: 'auto'
+  },
+  none: {
+    pointerEvents: 'none'
+  },
+  'box-only': {
+    pointerEvents: 'box-only'
+  },
+  'box-none': {
+    pointerEvents: 'box-none'
+  }
+});
diff --git a/packages/react-native-web-examples/shared/button.js b/packages/react-native-web-examples/shared/button.js
new file mode 100644
index 0000000000..73d298a5a9
--- /dev/null
+++ b/packages/react-native-web-examples/shared/button.js
@@ -0,0 +1,23 @@
+import { StyleSheet, Text, Pressable } from 'react-native';
+
+export default function Button(props) {
+  const { title, ...other } = props;
+  return (
+    <Pressable {...other} style={styles.button}>
+      <Text style={styles.buttonText}>{title}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: 'lightblue',
+    borderRadius: 10,
+    paddingBlock: 5,
+    paddingInline: 10
+  },
+  buttonText: {
+    fontWeight: 'bold',
+    textTransform: 'uppercase'
+  }
+});
diff --git a/packages/react-native-web-examples/shared/example.js b/packages/react-native-web-examples/shared/example.js
index 36f6ae9a52..ba2584523d 100644
--- a/packages/react-native-web-examples/shared/example.js
+++ b/packages/react-native-web-examples/shared/example.js
@@ -4,7 +4,7 @@ export default function Example(props) {
   return (
     <View style={styles.root}>
       <View style={styles.header}>
-        <Text accessibilityLabel="Back" href="/" style={styles.back}>
+        <Text aria-label="Back" href="/" style={styles.back}>
           <svg
             style={{ fill: '#555', height: '100%' }}
             viewBox="0 0 140 140"
@@ -13,7 +13,7 @@ export default function Example(props) {
             <path d="M105.614 118.681c3.398 3.396 3.4 8.912 0 12.311-3.396 3.399-8.91 3.398-12.311 0-.02-.02-.035-.04-.053-.061l-.025.022-57.66-57.66.024-.022a8.664 8.664 0 01-2.608-6.208 8.672 8.672 0 013.229-6.762l-.06-.058 57.66-57.66.025.024c.018-.021.033-.039.053-.058A8.706 8.706 0 01106.2 14.86c-.021.02-.041.034-.061.054l.023.024-52.119 52.125 51.54 51.54-.025.021c.015.022.036.036.056.057" />
           </svg>
         </Text>
-        <Text accessibilityRole="heading" style={styles.title}>
+        <Text role="heading" style={styles.title}>
           {props.title}
         </Text>
       </View>
diff --git a/packages/react-native-web/package.json b/packages/react-native-web/package.json
index 861439ab5e..bc22cce392 100644
--- a/packages/react-native-web/package.json
+++ b/packages/react-native-web/package.json
@@ -3,7 +3,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "name": "react-native-web",
-  "version": "0.19.1",
+  "version": "0.19.7",
   "description": "React Native for Web",
   "module": "dist/index.js",
   "main": "dist/cjs/index.js",
@@ -23,11 +23,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
+    "@react-native/normalize-color": "^2.1.0",
     "fbjs": "^3.0.4",
     "inline-style-prefixer": "^6.0.1",
-    "normalize-css-color": "^1.0.2",
+    "memoize-one": "^6.0.0",
+    "nullthrows": "^1.1.1",
     "postcss-value-parser": "^4.2.0",
-    "styleq": "^0.1.2"
+    "styleq": "^0.1.3"
   },
   "peerDependencies": {
     "react": "^18.0.0",
diff --git a/packages/react-native-web/src/exports/ActivityIndicator/index.js b/packages/react-native-web/src/exports/ActivityIndicator/index.js
index 6350c34306..151337204e 100644
--- a/packages/react-native-web/src/exports/ActivityIndicator/index.js
+++ b/packages/react-native-web/src/exports/ActivityIndicator/index.js
@@ -56,10 +56,10 @@ const ActivityIndicator: React.AbstractComponent<
   return (
     <View
       {...other}
-      accessibilityRole="progressbar"
-      accessibilityValueMax={1}
-      accessibilityValueMin={0}
+      aria-valuemax={1}
+      aria-valuemin={0}
       ref={forwardedRef}
+      role="progressbar"
       style={[styles.container, style]}
     >
       <View
diff --git a/packages/react-native-web/src/exports/BackHandler/index.js b/packages/react-native-web/src/exports/BackHandler/index.js
new file mode 100644
index 0000000000..205fc58a9d
--- /dev/null
+++ b/packages/react-native-web/src/exports/BackHandler/index.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+function emptyFunction() {}
+
+const BackHandler = {
+  exitApp: emptyFunction,
+  addEventListener(): {| remove: () => void |} {
+    console.error(
+      'BackHandler is not supported on web and should not be used.'
+    );
+    return {
+      remove: emptyFunction
+    };
+  },
+  removeEventListener: emptyFunction
+};
+
+export default BackHandler;
diff --git a/packages/react-native-web/src/exports/CheckBox/index.js b/packages/react-native-web/src/exports/CheckBox/index.js
index 1db62480e6..1df7f3ab7d 100644
--- a/packages/react-native-web/src/exports/CheckBox/index.js
+++ b/packages/react-native-web/src/exports/CheckBox/index.js
@@ -22,6 +22,7 @@ type CheckBoxProps = {
   disabled?: boolean,
   onChange?: ?(e: any) => void,
   onValueChange?: ?(e: any) => void,
+  readOnly?: boolean,
   value?: boolean
 };
 
@@ -35,6 +36,7 @@ const CheckBox: React.AbstractComponent<
     disabled,
     onChange,
     onValueChange,
+    readOnly,
     style,
     value,
     ...other
@@ -64,7 +66,10 @@ const CheckBox: React.AbstractComponent<
     checked: value,
     disabled: disabled,
     onChange: handleChange,
-    readOnly: ariaReadOnly || other.accessibilityReadOnly,
+    readOnly:
+      readOnly === true ||
+      ariaReadOnly === true ||
+      other.accessibilityReadOnly === true,
     ref: forwardedRef,
     style: [styles.nativeControl, styles.cursorInherit],
     type: 'checkbox'
diff --git a/packages/react-native-web/src/exports/Dimensions/index.js b/packages/react-native-web/src/exports/Dimensions/index.js
index 0f1b731296..ceb971af7f 100644
--- a/packages/react-native-web/src/exports/Dimensions/index.js
+++ b/packages/react-native-web/src/exports/Dimensions/index.js
@@ -66,8 +66,7 @@ function update() {
      * We are multiplying by scale because height and width from visual viewport
      * also react to pinch zoom, and become smaller when zoomed. But it is not desired
      * behaviour, since originally documentElement client height and width were used,
-     * and they do not react to pinch zoom. We had an issue where layouts were adopting to smaller measures
-     * when pinch zoomed. context - https://github.com/Expensify/App/issues/17246
+     * and they do not react to pinch zoom.
      */
     height = Math.round(visualViewport.height * visualViewport.scale);
     width = Math.round(visualViewport.width * visualViewport.scale);
diff --git a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap
index 55e2d30ac5..3ac2c39c5e 100644
--- a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap
@@ -351,7 +351,7 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 </div>
 `;
 
-exports[`components/Image prop "style" supports "shadow" properties (convert to filter) 1`] = `
+exports[`components/Image prop "style" supports "shadow" properties (converts to filter) 1`] = `
 <div
   class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
@@ -362,6 +362,17 @@ exports[`components/Image prop "style" supports "shadow" properties (convert to
 </div>
 `;
 
+exports[`components/Image prop "style" supports static and dynamic styles 1`] = `
+<div
+  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010 pos-abs"
+  style="transition-timing-function: ease-in;"
+>
+  <div
+    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
+  />
+</div>
+`;
+
 exports[`components/Image prop "testID" 1`] = `
 <div
   class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
@@ -379,7 +390,7 @@ exports[`components/Image prop "tintColor" convert to filter 1`] = `
 >
   <div
     class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-56);"
+    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-57);"
   />
   <img
     alt=""
@@ -392,7 +403,7 @@ exports[`components/Image prop "tintColor" convert to filter 1`] = `
   >
     <defs>
       <filter
-        id="tint-56"
+        id="tint-57"
       >
         <feflood
           flood-color="red"
diff --git a/packages/react-native-web/src/exports/Image/__tests__/index-test.js b/packages/react-native-web/src/exports/Image/__tests__/index-test.js
index 42392d973c..6bdd81337b 100644
--- a/packages/react-native-web/src/exports/Image/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Image/__tests__/index-test.js
@@ -345,7 +345,7 @@ describe('components/Image', () => {
   });
 
   describe('prop "style"', () => {
-    test('supports "shadow" properties (convert to filter)', () => {
+    test('supports "shadow" properties (converts to filter)', () => {
       const { container } = render(
         <Image
           style={{ shadowColor: 'red', shadowOffset: { width: 1, height: 1 } }}
@@ -360,6 +360,18 @@ describe('components/Image', () => {
       );
       expect(container.firstChild).toMatchSnapshot();
     });
+
+    test('supports static and dynamic styles', () => {
+      const { container } = render(
+        <Image
+          style={[
+            { $$css: true, position: 'pos-abs' },
+            { transitionTimingFunction: 'ease-in' }
+          ]}
+        />
+      );
+      expect(container.firstChild).toMatchSnapshot();
+    });
   });
 
   describe('prop "tintColor"', () => {
diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
index 6bc4587da0..be69529014 100644
--- a/packages/react-native-web/src/exports/Image/index.js
+++ b/packages/react-native-web/src/exports/Image/index.js
@@ -52,7 +52,12 @@ function createTintColorSVG(tintColor, id) {
   ) : null;
 }
 
-function getFlatStyle(style, blurRadius, filterId, tintColorProp) {
+function extractNonStandardStyleProps(
+  style,
+  blurRadius,
+  filterId,
+  tintColorProp
+) {
   const flatStyle = StyleSheet.flatten(style);
   const { filter, resizeMode, shadowOffset, tintColor } = flatStyle;
 
@@ -94,19 +99,7 @@ function getFlatStyle(style, blurRadius, filterId, tintColorProp) {
     _filter = filters.join(' ');
   }
 
-  // These styles are converted to CSS filters applied to the
-  // element displaying the background image.
-  delete flatStyle.blurRadius;
-  delete flatStyle.shadowColor;
-  delete flatStyle.shadowOpacity;
-  delete flatStyle.shadowOffset;
-  delete flatStyle.shadowRadius;
-  delete flatStyle.tintColor;
-  // These styles are not supported on View
-  delete flatStyle.overlayColor;
-  delete flatStyle.resizeMode;
-
-  return [flatStyle, resizeMode, _filter, tintColor];
+  return [resizeMode, _filter, tintColor];
 }
 
 function resolveAssetDimensions(source) {
@@ -237,7 +230,7 @@ const BaseImage: ImageComponent = React.forwardRef((props, ref) => {
     state === LOADED ||
     isCached ||
     (state === LOADING && defaultSource == null);
-  const [flatStyle, _resizeMode, filter, _tintColor] = getFlatStyle(
+  const [_resizeMode, filter, _tintColor] = extractNonStandardStyleProps(
     style,
     blurRadius,
     filterRef.current,
@@ -339,7 +332,11 @@ const BaseImage: ImageComponent = React.forwardRef((props, ref) => {
         styles.root,
         hasTextAncestor && styles.inline,
         imageSizeStyle,
-        flatStyle
+        style,
+        styles.undo,
+        // TEMP: avoid deprecated shadow props regression
+        // until Image refactored to use createElement.
+        { boxShadow: null }
       ]}
     >
       <View
@@ -449,6 +446,19 @@ const styles = StyleSheet.create({
   inline: {
     display: 'inline-flex'
   },
+  undo: {
+    // These styles are converted to CSS filters applied to the
+    // element displaying the background image.
+    blurRadius: null,
+    shadowColor: null,
+    shadowOpacity: null,
+    shadowOffset: null,
+    shadowRadius: null,
+    tintColor: null,
+    // These styles are not supported
+    overlayColor: null,
+    resizeMode: null
+  },
   image: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'transparent',
diff --git a/packages/react-native-web/src/exports/Image/types.js b/packages/react-native-web/src/exports/Image/types.js
index bb856c6cba..95695c76ec 100644
--- a/packages/react-native-web/src/exports/Image/types.js
+++ b/packages/react-native-web/src/exports/Image/types.js
@@ -9,16 +9,7 @@
  */
 
 import type { ColorValue, GenericStyleProp } from '../../types';
-import type { ViewProps } from '../View/types';
-
-import type {
-  AnimationStyles,
-  BorderStyles,
-  InteractionStyles,
-  LayoutStyles,
-  ShadowStyles,
-  TransformStyles
-} from '../../types/styles';
+import type { ViewProps, ViewStyle } from '../View/types';
 
 type SourceObject = {
   /**
@@ -88,16 +79,7 @@ export type ResizeMode =
 export type Source = number | string | SourceObject | Array<SourceObject>;
 
 export type ImageStyle = {
-  ...AnimationStyles,
-  ...BorderStyles,
-  ...InteractionStyles,
-  ...LayoutStyles,
-  ...ShadowStyles,
-  ...TransformStyles,
-  backgroundColor?: ColorValue,
-  boxShadow?: string,
-  filter?: string,
-  opacity?: number,
+  ...ViewStyle,
   // @deprecated
   resizeMode?: ResizeMode,
   tintColor?: ColorValue
diff --git a/packages/react-native-web/src/exports/Linking/index.js b/packages/react-native-web/src/exports/Linking/index.js
index ab992a30c2..ec365eb3e6 100644
--- a/packages/react-native-web/src/exports/Linking/index.js
+++ b/packages/react-native-web/src/exports/Linking/index.js
@@ -15,12 +15,6 @@ const initialURL = canUseDOM ? window.location.href : '';
 
 type Callback = (...args: any) => void;
 
-type OnOpenCallback = (
-  event: 'onOpen',
-  callback: (url: string) => void
-) => void;
-type GenericCallback = (event: string, callback: Callback) => void;
-
 class Linking {
   /**
    * An object mapping of event name
@@ -41,31 +35,44 @@ class Linking {
    * Adds a event listener for the specified event. The callback will be called when the
    * said event is dispatched.
    */
-  addEventListener: OnOpenCallback | GenericCallback = (
-    event: string,
+  addEventListener(
+    eventType: string,
     callback: Callback
-  ) => {
-    if (!this._eventCallbacks[event]) {
-      this._eventCallbacks[event] = [callback];
-      return;
+  ): {| remove(): void |} {
+    const _this = this;
+
+    if (!_this._eventCallbacks[eventType]) {
+      _this._eventCallbacks[eventType] = [callback];
     }
-    this._eventCallbacks[event].push(callback);
-  };
+    _this._eventCallbacks[eventType].push(callback);
+
+    return {
+      remove() {
+        const callbacks = _this._eventCallbacks[eventType];
+        const filteredCallbacks = callbacks.filter(
+          (c) => c.toString() !== callback.toString()
+        );
+        _this._eventCallbacks[eventType] = filteredCallbacks;
+      }
+    };
+  }
 
   /**
    * Removes a previously added event listener for the specified event. The callback must
    * be the same object as the one passed to `addEventListener`.
    */
-  removeEventListener: OnOpenCallback | GenericCallback = (
-    event: string,
-    callback: Callback
-  ) => {
-    const callbacks = this._eventCallbacks[event];
+  removeEventListener(eventType: string, callback: Callback): void {
+    console.error(
+      `Linking.removeEventListener('${eventType}', ...): Method has been ` +
+        'deprecated. Please instead use `remove()` on the subscription ' +
+        'returned by `Linking.addEventListener`.'
+    );
+    const callbacks = this._eventCallbacks[eventType];
     const filteredCallbacks = callbacks.filter(
       (c) => c.toString() !== callback.toString()
     );
-    this._eventCallbacks[event] = filteredCallbacks;
-  };
+    this._eventCallbacks[eventType] = filteredCallbacks;
+  }
 
   canOpenURL(): Promise<boolean> {
     return Promise.resolve(true);
diff --git a/packages/react-native-web/src/exports/Modal/ModalContent.js b/packages/react-native-web/src/exports/Modal/ModalContent.js
index e81a194ca4..0ce3ee493c 100644
--- a/packages/react-native-web/src/exports/Modal/ModalContent.js
+++ b/packages/react-native-web/src/exports/Modal/ModalContent.js
@@ -54,9 +54,9 @@ const ModalContent: React.AbstractComponent<
   return (
     <View
       {...rest}
-      accessibilityModal={true}
-      accessibilityRole={active ? 'dialog' : null}
+      aria-modal={true}
       ref={forwardedRef}
+      role={active ? 'dialog' : null}
       style={style}
     >
       <View style={styles.container}>{children}</View>
diff --git a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
index f293a9c8ab..f596bf60d2 100644
--- a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
+++ b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
@@ -25,7 +25,7 @@ import canUseDOM from '../../modules/canUseDom';
 
 const FocusBracket = () => {
   return createElement('div', {
-    accessibilityRole: 'none',
+    role: 'none',
     tabIndex: 0,
     style: styles.focusBracket
   });
diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap
index fbbaa3f7ea..1ba7385454 100644
--- a/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap
@@ -153,7 +153,7 @@ exports[`components/Pressable prop "accessibilityRole" value is set 1`] = `
 exports[`components/Pressable prop "disabled" 1`] = `
 <div
   aria-disabled="true"
-  class="css-view-175oi2r r-pointerEvents-633pao"
+  class="css-view-175oi2r r-pointerEvents-12vffkv"
   tabindex="-1"
 />
 `;
diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
index 5ff19e6539..7efc90a908 100644
--- a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
@@ -246,6 +246,35 @@ describe('components/Pressable', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  test('press interaction as button (keyboard)', () => {
+    const onPress = jest.fn();
+    const preventDefault = jest.fn();
+    const ref = React.createRef();
+
+    function TestCase() {
+      return (
+        <Pressable
+          onPress={(e) => {
+            onPress(e);
+          }}
+          ref={ref}
+          role="button"
+        />
+      );
+    }
+
+    act(() => {
+      render(<TestCase />);
+    });
+    const target = createEventTarget(ref.current);
+    act(() => {
+      target.keydown({ key: ' ', preventDefault });
+      jest.runAllTimers();
+    });
+    // Calling preventDefault prevents native 'click' event dispatch
+    expect(preventDefault).not.toHaveBeenCalled();
+  });
+
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();
diff --git a/packages/react-native-web/src/exports/Pressable/index.js b/packages/react-native-web/src/exports/Pressable/index.js
index 0d284214c8..19d3649129 100644
--- a/packages/react-native-web/src/exports/Pressable/index.js
+++ b/packages/react-native-web/src/exports/Pressable/index.js
@@ -229,7 +229,7 @@ const styles = StyleSheet.create({
     touchAction: 'manipulation'
   },
   disabled: {
-    pointerEvents: 'none'
+    pointerEvents: 'box-none'
   }
 });
 
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/preprocess-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/preprocess-test.js
index 9b03a7772e..06bfd14d24 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/preprocess-test.js
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/preprocess-test.js
@@ -99,6 +99,12 @@ describe('StyleSheet/preprocess', () => {
       expect(preprocess({ aspectRatio: 9 / 16 })).toEqual({
         aspectRatio: '0.5625'
       });
+
+      expect(preprocess({ aspectRatio: '0.5' })).toEqual({
+        aspectRatio: '0.5'
+      });
+
+      expect(preprocess({ aspectRatio: undefined })).toEqual({});
     });
 
     test('fontVariant', () => {
diff --git a/packages/react-native-web/src/exports/StyleSheet/index.js b/packages/react-native-web/src/exports/StyleSheet/index.js
index 89bacb89b6..12781c6970 100644
--- a/packages/react-native-web/src/exports/StyleSheet/index.js
+++ b/packages/react-native-web/src/exports/StyleSheet/index.js
@@ -18,14 +18,21 @@ import canUseDOM from '../../modules/canUseDom';
 const staticStyleMap: WeakMap<Object, Object> = new WeakMap();
 const sheet = createSheet();
 
-function customStyleq(styles, isRTL) {
+const defaultPreprocessOptions = { shadow: true, textShadow: true };
+
+function customStyleq(styles, options: Options = {}) {
+  const { writingDirection, ...preprocessOptions } = options;
+  const isRTL = writingDirection === 'rtl';
   return styleq.factory({
     transform(style) {
       const compiledStyle = staticStyleMap.get(style);
       if (compiledStyle != null) {
         return localizeStyle(compiledStyle, isRTL);
       }
-      return preprocess(style);
+      return preprocess(style, {
+        ...defaultPreprocessOptions,
+        ...preprocessOptions
+      });
     }
   })(styles);
 }
@@ -41,7 +48,9 @@ function insertRules(compiledOrderedRules) {
 }
 
 function compileAndInsertAtomic(style) {
-  const [compiledStyle, compiledOrderedRules] = atomic(preprocess(style));
+  const [compiledStyle, compiledOrderedRules] = atomic(
+    preprocess(style, defaultPreprocessOptions)
+  );
   insertRules(compiledOrderedRules);
   return compiledStyle;
 }
@@ -141,11 +150,15 @@ function getSheet(): { id: string, textContent: string } {
  * resolve
  */
 type StyleProps = [string, { [key: string]: mixed } | null];
-type Options = { writingDirection: 'ltr' | 'rtl' };
+type Options = {
+  shadow?: boolean,
+  textShadow?: boolean,
+  writingDirection: 'ltr' | 'rtl'
+};
 
-function StyleSheet(styles: any, options?: Options): StyleProps {
-  const isRTL = options != null && options.writingDirection === 'rtl';
-  const styleProps: StyleProps = customStyleq(styles, isRTL);
+function StyleSheet(styles: any, options?: Options = {}): StyleProps {
+  const isRTL = options.writingDirection === 'rtl';
+  const styleProps: StyleProps = customStyleq(styles, options);
   if (Array.isArray(styleProps) && styleProps[1] != null) {
     styleProps[1] = inline(styleProps[1], isRTL);
   }
diff --git a/packages/react-native-web/src/exports/StyleSheet/preprocess.js b/packages/react-native-web/src/exports/StyleSheet/preprocess.js
index 3ff077f98b..e9b4d366e5 100644
--- a/packages/react-native-web/src/exports/StyleSheet/preprocess.js
+++ b/packages/react-native-web/src/exports/StyleSheet/preprocess.js
@@ -107,17 +107,19 @@ const ignoredProps = {
  * Preprocess styles
  */
 export const preprocess = <T: {| [key: string]: any |}>(
-  originalStyle: T
+  originalStyle: T,
+  options?: { shadow?: boolean, textShadow?: boolean } = {}
 ): T => {
   const style = originalStyle || emptyObject;
   const nextStyle = {};
 
   // Convert shadow styles
   if (
+    (options.shadow === true,
     style.shadowColor != null ||
-    style.shadowOffset != null ||
-    style.shadowOpacity != null ||
-    style.shadowRadius != null
+      style.shadowOffset != null ||
+      style.shadowOpacity != null ||
+      style.shadowRadius != null)
   ) {
     warnOnce(
       'shadowStyles',
@@ -135,9 +137,10 @@ export const preprocess = <T: {| [key: string]: any |}>(
 
   // Convert text shadow styles
   if (
+    (options.textShadow === true,
     style.textShadowColor != null ||
-    style.textShadowOffset != null ||
-    style.textShadowRadius != null
+      style.textShadowOffset != null ||
+      style.textShadowRadius != null)
   ) {
     warnOnce(
       'textShadowStyles',
@@ -179,7 +182,7 @@ export const preprocess = <T: {| [key: string]: any |}>(
       continue;
     }
 
-    if (prop === 'aspectRatio') {
+    if (prop === 'aspectRatio' && typeof value === 'number') {
       nextStyle[prop] = value.toString();
     } else if (prop === 'fontVariant') {
       if (Array.isArray(value) && value.length > 0) {
diff --git a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js
index 8ae6101439..858a338a71 100644
--- a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js
@@ -23,7 +23,7 @@ function findSwitchThumb(container) {
 
 describe('components/Switch', () => {
   test('accessibilityLabel is applied to native checkbox', () => {
-    const { container } = render(<Switch accessibilityLabel="switch" />);
+    const { container } = render(<Switch aria-label="switch" />);
     expect(findCheckbox(container).getAttribute('aria-label')).toBe('switch');
   });
 
diff --git a/packages/react-native-web/src/exports/Switch/index.js b/packages/react-native-web/src/exports/Switch/index.js
index cc33f6427d..4f3e659d8e 100644
--- a/packages/react-native-web/src/exports/Switch/index.js
+++ b/packages/react-native-web/src/exports/Switch/index.js
@@ -44,6 +44,7 @@ const Switch: React.AbstractComponent<
   React.ElementRef<typeof View>
 > = React.forwardRef((props, forwardedRef) => {
   const {
+    'aria-label': ariaLabel,
     accessibilityLabel,
     activeThumbColor,
     activeTrackColor,
@@ -166,7 +167,7 @@ const Switch: React.AbstractComponent<
   ];
 
   const nativeControl = createElement('input', {
-    accessibilityLabel,
+    'aria-label': ariaLabel || accessibilityLabel,
     checked: value,
     disabled: disabled,
     onBlur: handleFocusState,
diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
index 6651b739da..56c2cd4514 100644
--- a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
@@ -105,6 +105,14 @@ describe('components/TextInput', () => {
     });
   });
 
+  describe('prop "caretHidden"', () => {
+    test('value "true"', () => {
+      const { container } = render(<TextInput caretHidden />);
+      const style = window.getComputedStyle(container.firstChild);
+      expect(style.caretColor).toEqual('transparent');
+    });
+  });
+
   describe('prop "clearTextOnFocus"', () => {
     const defaultValue = 'defaultValue';
 
diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js
index f342f65eb7..285cb2d2cf 100644
--- a/packages/react-native-web/src/exports/TextInput/index.js
+++ b/packages/react-native-web/src/exports/TextInput/index.js
@@ -99,14 +99,15 @@ const TextInput: React.AbstractComponent<
     autoCompleteType,
     autoCorrect = true,
     blurOnSubmit,
+    caretHidden,
     clearTextOnFocus,
     dir,
-    editable = true,
+    editable,
     enterKeyHint,
     inputMode,
-    keyboardType = 'default',
+    keyboardType,
     multiline = false,
-    numberOfLines = 1,
+    numberOfLines,
     onBlur,
     onChange,
     onChangeText,
@@ -133,7 +134,7 @@ const TextInput: React.AbstractComponent<
     onStartShouldSetResponderCapture,
     onSubmitEditing,
     placeholderTextColor,
-    readOnly,
+    readOnly = false,
     returnKeyType,
     rows,
     secureTextEntry = false,
@@ -401,24 +402,21 @@ const TextInput: React.AbstractComponent<
   if (editable != null) {
     warnOnce('editable', 'editable is deprecated. Use readOnly.');
   }
-  supportedProps.readOnly = readOnly || !editable;
+  supportedProps.readOnly = readOnly === true || editable === false;
   if (numberOfLines != null) {
     warnOnce(
       'numberOfLines',
       'TextInput numberOfLines is deprecated. Use rows.'
     );
   }
-  supportedProps.rows = multiline
-    ? rows != null
-      ? rows
-      : numberOfLines
-    : undefined;
+  supportedProps.rows = multiline ? (rows != null ? rows : numberOfLines) : 1;
   supportedProps.spellCheck = spellCheck != null ? spellCheck : autoCorrect;
   supportedProps.style = [
     { '--placeholderTextColor': placeholderTextColor },
     styles.textinput$raw,
     styles.placeholder,
-    props.style
+    props.style,
+    caretHidden && styles.caretHidden
   ];
   supportedProps.type = multiline ? undefined : type;
 
@@ -464,6 +462,9 @@ const styles = StyleSheet.create({
   },
   placeholder: {
     placeholderTextColor: 'var(--placeholderTextColor)'
+  },
+  caretHidden: {
+    caretColor: 'transparent'
   }
 });
 
diff --git a/packages/react-native-web/src/exports/TextInput/types.js b/packages/react-native-web/src/exports/TextInput/types.js
index a842a355d5..5e879d8d9b 100644
--- a/packages/react-native-web/src/exports/TextInput/types.js
+++ b/packages/react-native-web/src/exports/TextInput/types.js
@@ -25,6 +25,7 @@ export type TextInputProps = {
   autoCorrect?: ?boolean,
   autoFocus?: ?boolean,
   blurOnSubmit?: ?boolean,
+  caretHidden?: ?boolean,
   clearTextOnFocus?: ?boolean,
   defaultValue?: ?string,
   dir?: ?('auto' | 'ltr' | 'rtl'),
diff --git a/packages/react-native-web/src/exports/Touchable/index.js b/packages/react-native-web/src/exports/Touchable/index.js
index b0aee98cd7..c9a200bcbf 100644
--- a/packages/react-native-web/src/exports/Touchable/index.js
+++ b/packages/react-native-web/src/exports/Touchable/index.js
@@ -13,7 +13,7 @@ import type { Node } from 'React';
 
 import AccessibilityUtil from '../../modules/AccessibilityUtil';
 import BoundingDimensions from './BoundingDimensions';
-import normalizeColor from 'normalize-css-color';
+import normalizeColor from '@react-native/normalize-color';
 import Position from './Position';
 import React from 'react';
 import UIManager from '../UIManager';
diff --git a/packages/react-native-web/src/exports/TouchableHighlight/index.js b/packages/react-native-web/src/exports/TouchableHighlight/index.js
index eb76f0c014..7814fcc59f 100644
--- a/packages/react-native-web/src/exports/TouchableHighlight/index.js
+++ b/packages/react-native-web/src/exports/TouchableHighlight/index.js
@@ -175,7 +175,7 @@ function TouchableHighlight(props: Props, forwardedRef): React.Node {
       {...pressEventHandlers}
       accessibilityDisabled={disabled}
       focusable={!disabled && focusable !== false}
-      pointerEvents={disabled ? 'none' : undefined}
+      pointerEvents={disabled ? 'box-none' : undefined}
       ref={setRef}
       style={[
         styles.root,
diff --git a/packages/react-native-web/src/exports/TouchableOpacity/index.js b/packages/react-native-web/src/exports/TouchableOpacity/index.js
index 9b0239c676..5dba64e0ae 100644
--- a/packages/react-native-web/src/exports/TouchableOpacity/index.js
+++ b/packages/react-native-web/src/exports/TouchableOpacity/index.js
@@ -132,7 +132,7 @@ function TouchableOpacity(props: Props, forwardedRef): React.Node {
       {...pressEventHandlers}
       accessibilityDisabled={disabled}
       focusable={!disabled && focusable !== false}
-      pointerEvents={disabled ? 'none' : undefined}
+      pointerEvents={disabled ? 'box-none' : undefined}
       ref={setRef}
       style={[
         styles.root,
diff --git a/packages/react-native-web/src/exports/UIManager/index.js b/packages/react-native-web/src/exports/UIManager/index.js
index 8833347bd3..77eefe435b 100644
--- a/packages/react-native-web/src/exports/UIManager/index.js
+++ b/packages/react-native-web/src/exports/UIManager/index.js
@@ -7,28 +7,38 @@
  * @noflow
  */
 
-import getBoundingClientRect from '../../modules/getBoundingClientRect';
 import setValueForStyles from '../../modules/setValueForStyles';
 
 const getRect = (node) => {
-  // Unlike the DOM's getBoundingClientRect, React Native layout measurements
-  // for "height" and "width" ignore scale transforms.
-  // https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
-  const { x, y, top, left } = getBoundingClientRect(node);
-  const width = node.offsetWidth;
   const height = node.offsetHeight;
-  return { x, y, width, height, top, left };
+  const width = node.offsetWidth;
+  let left = node.offsetLeft;
+  let top = node.offsetTop;
+  node = node.offsetParent;
+
+  while (node && node.nodeType === 1 /* Node.ELEMENT_NODE */) {
+    left += node.offsetLeft + node.clientLeft - node.scrollLeft;
+    top += node.offsetTop + node.clientTop - node.scrollTop;
+    node = node.offsetParent;
+  }
+
+  top -= window.scrollY;
+  left -= window.scrollX;
+
+  return { width, height, top, left };
 };
 
 const measureLayout = (node, relativeToNativeNode, callback) => {
   const relativeNode = relativeToNativeNode || (node && node.parentNode);
   if (node && relativeNode) {
     setTimeout(() => {
-      const relativeRect = getBoundingClientRect(relativeNode);
-      const { height, left, top, width } = getRect(node);
-      const x = left - relativeRect.left;
-      const y = top - relativeRect.top;
-      callback(x, y, width, height, left, top);
+      if (node.isConnected && relativeNode.isConnected) {
+        const relativeRect = getRect(relativeNode);
+        const { height, left, top, width } = getRect(node);
+        const x = left - relativeRect.left;
+        const y = top - relativeRect.top;
+        callback(x, y, width, height, left, top);
+      }
     }, 0);
   }
 };
diff --git a/packages/react-native-web/src/exports/processColor/index.js b/packages/react-native-web/src/exports/processColor/index.js
index b06919abd5..b3329f61ba 100644
--- a/packages/react-native-web/src/exports/processColor/index.js
+++ b/packages/react-native-web/src/exports/processColor/index.js
@@ -8,7 +8,7 @@
  * @flow
  */
 
-import normalizeColor from 'normalize-css-color';
+import normalizeColor from '@react-native/normalize-color';
 
 const processColor = (color?: string | number): ?number => {
   if (color === undefined || color === null) {
diff --git a/packages/react-native-web/src/index.js b/packages/react-native-web/src/index.js
index d61a6ba6e7..f1a6f23fca 100644
--- a/packages/react-native-web/src/index.js
+++ b/packages/react-native-web/src/index.js
@@ -13,6 +13,7 @@ export { default as Animated } from './exports/Animated';
 export { default as Appearance } from './exports/Appearance';
 export { default as AppRegistry } from './exports/AppRegistry';
 export { default as AppState } from './exports/AppState';
+export { default as BackHandler } from './exports/BackHandler';
 export { default as Clipboard } from './exports/Clipboard';
 export { default as Dimensions } from './exports/Dimensions';
 export { default as Easing } from './exports/Easing';
diff --git a/packages/react-native-web/src/modules/createEventHandle/__tests__/index-test.js b/packages/react-native-web/src/modules/addEventListener/__tests__/index-test.js
similarity index 75%
rename from packages/react-native-web/src/modules/createEventHandle/__tests__/index-test.js
rename to packages/react-native-web/src/modules/addEventListener/__tests__/index-test.js
index f62e22ef95..2dea25f69a 100644
--- a/packages/react-native-web/src/modules/createEventHandle/__tests__/index-test.js
+++ b/packages/react-native-web/src/modules/addEventListener/__tests__/index-test.js
@@ -10,18 +10,17 @@
 import * as React from 'react';
 import { act, render } from '@testing-library/react';
 import { createEventTarget } from 'dom-event-testing-library';
-import createEventHandle from '..';
+import { addEventListener } from '..';
 
-describe('create-event-handle', () => {
-  describe('createEventTarget()', () => {
+describe('addEventListener', () => {
+  describe('addEventListener()', () => {
     test('event dispatched on target', () => {
       const listener = jest.fn();
       const targetRef = React.createRef();
-      const addClickListener = createEventHandle('click');
 
       function Component() {
         React.useEffect(() => {
-          return addClickListener(targetRef.current, listener);
+          return addEventListener(targetRef.current, 'click', listener);
         });
         return <div ref={targetRef} />;
       }
@@ -42,20 +41,19 @@ describe('create-event-handle', () => {
       const listenerCapture = jest.fn();
       const targetRef = React.createRef();
       const parentRef = React.createRef();
-      const addClickListener = createEventHandle('click');
-      const addClickCaptureListener = createEventHandle('click', {
-        capture: true
-      });
 
       function Component() {
         React.useEffect(() => {
-          const removeClickListener = addClickListener(
+          const removeClickListener = addEventListener(
             targetRef.current,
+            'click',
             listener
           );
-          const removeClickCaptureListener = addClickCaptureListener(
+          const removeClickCaptureListener = addEventListener(
             targetRef.current,
-            listenerCapture
+            'click',
+            listenerCapture,
+            { capture: true }
           );
           return () => {
             removeClickListener();
@@ -91,20 +89,19 @@ describe('create-event-handle', () => {
       });
       const targetRef = React.createRef();
       const childRef = React.createRef();
-      const addClickListener = createEventHandle('click');
-      const addClickCaptureListener = createEventHandle('click', {
-        capture: true
-      });
 
       function Component() {
         React.useEffect(() => {
-          const removeClickListener = addClickListener(
+          const removeClickListener = addEventListener(
             targetRef.current,
+            'click',
             listener
           );
-          const removeClickCaptureListener = addClickCaptureListener(
+          const removeClickCaptureListener = addEventListener(
             targetRef.current,
-            listenerCapture
+            'click',
+            listenerCapture,
+            { capture: true }
           );
           return () => {
             removeClickListener();
@@ -135,11 +132,10 @@ describe('create-event-handle', () => {
       const listener = jest.fn();
       const targetRef = React.createRef();
       const childRef = React.createRef();
-      const addClickListener = createEventHandle('click');
 
       function Component() {
         React.useEffect(() => {
-          return addClickListener(targetRef.current, listener);
+          return addEventListener(targetRef.current, 'click', listener);
         });
         return (
           <div ref={targetRef}>
@@ -162,11 +158,10 @@ describe('create-event-handle', () => {
     test('listener can be attached to document', () => {
       const listener = jest.fn();
       const targetRef = React.createRef();
-      const addClickListener = createEventHandle('click');
 
       function Component({ target }) {
         React.useEffect(() => {
-          return addClickListener(target, listener);
+          return addEventListener(target, 'click', listener);
         });
         return <div ref={targetRef} />;
       }
@@ -184,11 +179,10 @@ describe('create-event-handle', () => {
     test('listener can be attached to window ', () => {
       const listener = jest.fn();
       const targetRef = React.createRef();
-      const addClickListener = createEventHandle('click');
 
       function Component({ target }) {
         React.useEffect(() => {
-          return addClickListener(target, listener);
+          return addEventListener(target, 'click', listener);
         });
         return <div ref={targetRef} />;
       }
@@ -206,11 +200,10 @@ describe('create-event-handle', () => {
     test('custom event dispatched on target', () => {
       const listener = jest.fn();
       const targetRef = React.createRef();
-      const addMagicEventListener = createEventHandle('magic-event');
 
       function Component() {
         React.useEffect(() => {
-          return addMagicEventListener(targetRef.current, listener);
+          return addEventListener(targetRef.current, 'magic-event', listener);
         });
         return <div ref={targetRef} />;
       }
@@ -230,10 +223,7 @@ describe('create-event-handle', () => {
       const targetRef = React.createRef();
       const parentRef = React.createRef();
       const childRef = React.createRef();
-      const addClickListener = createEventHandle('click');
-      const addClickCaptureListener = createEventHandle('click', {
-        capture: true
-      });
+
       const listener = jest.fn((e) => {
         log.push(['bubble', e.currentTarget.id]);
       });
@@ -244,10 +234,14 @@ describe('create-event-handle', () => {
       function Component() {
         React.useEffect(() => {
           // the same event handle is used to set listeners on different targets
-          addClickListener(targetRef.current, listener);
-          addClickListener(parentRef.current, listener);
-          addClickCaptureListener(targetRef.current, listenerCapture);
-          addClickCaptureListener(parentRef.current, listenerCapture);
+          addEventListener(targetRef.current, 'click', listener);
+          addEventListener(parentRef.current, 'click', listener);
+          addEventListener(targetRef.current, 'click', listenerCapture, {
+            capture: true
+          });
+          addEventListener(parentRef.current, 'click', listenerCapture, {
+            capture: true
+          });
         });
         return (
           <div id="parent" ref={parentRef}>
@@ -280,14 +274,6 @@ describe('create-event-handle', () => {
       const log = [];
       const targetRef = React.createRef();
       const childRef = React.createRef();
-      const addClickListener = createEventHandle('click');
-      const addClickAltListener = createEventHandle('click');
-      const addClickCaptureListener = createEventHandle('click', {
-        capture: true
-      });
-      const addClickCaptureAltListener = createEventHandle('click', {
-        capture: true
-      });
       const listener = jest.fn((e) => {
         log.push(['bubble', 'target']);
       });
@@ -303,10 +289,14 @@ describe('create-event-handle', () => {
 
       function Component() {
         React.useEffect(() => {
-          addClickListener(targetRef.current, listener);
-          addClickAltListener(targetRef.current, listenerAlt);
-          addClickCaptureListener(targetRef.current, listenerCapture);
-          addClickCaptureAltListener(targetRef.current, listenerCaptureAlt);
+          addEventListener(targetRef.current, 'click', listener);
+          addEventListener(targetRef.current, 'click', listenerAlt);
+          addEventListener(targetRef.current, 'click', listenerCapture, {
+            capture: true
+          });
+          addEventListener(targetRef.current, 'click', listenerCaptureAlt, {
+            capture: true
+          });
         });
         return (
           <div id="target" ref={targetRef}>
@@ -344,12 +334,11 @@ describe('create-event-handle', () => {
       const targetListener = jest.fn();
       const targetRef = React.createRef();
       const childRef = React.createRef();
-      const addClickListener = createEventHandle('click');
 
       function Component() {
         React.useEffect(() => {
-          addClickListener(childRef.current, childListener);
-          addClickListener(targetRef.current, targetListener);
+          addEventListener(childRef.current, 'click', childListener);
+          addEventListener(targetRef.current, 'click', targetListener);
         });
         return (
           <div ref={targetRef}>
@@ -376,13 +365,11 @@ describe('create-event-handle', () => {
       });
       const secondListener = jest.fn();
       const targetRef = React.createRef();
-      const addFirstClickListener = createEventHandle('click');
-      const addSecondClickListener = createEventHandle('click');
 
       function Component() {
         React.useEffect(() => {
-          addFirstClickListener(targetRef.current, firstListener);
-          addSecondClickListener(targetRef.current, secondListener);
+          addEventListener(targetRef.current, 'click', firstListener);
+          addEventListener(targetRef.current, 'click', secondListener);
         });
         return <div ref={targetRef} />;
       }
diff --git a/packages/react-native-web/src/modules/createEventHandle/__tests__/index-test.node.js b/packages/react-native-web/src/modules/addEventListener/__tests__/index-test.node.js
similarity index 77%
rename from packages/react-native-web/src/modules/createEventHandle/__tests__/index-test.node.js
rename to packages/react-native-web/src/modules/addEventListener/__tests__/index-test.node.js
index b9c7e0e6ef..11d0c501c4 100644
--- a/packages/react-native-web/src/modules/createEventHandle/__tests__/index-test.node.js
+++ b/packages/react-native-web/src/modules/addEventListener/__tests__/index-test.node.js
@@ -9,17 +9,16 @@
 
 import * as React from 'react';
 import * as ReactDOMServer from 'react-dom/server';
-import createEventHandle from '..';
+import { addEventListener } from '..';
 
-describe('create-event-handle', () => {
+describe('addEventListener', () => {
   test('can render correctly using ReactDOMServer', () => {
     const listener = jest.fn();
     const targetRef = React.createRef();
-    const addClickListener = createEventHandle('click');
 
     function Component() {
       React.useEffect(() => {
-        return addClickListener(targetRef.current, listener);
+        return addEventListener(targetRef.current, 'click', listener);
       });
       return <div ref={targetRef} />;
     }
diff --git a/packages/react-native-web/src/modules/createEventHandle/index.js b/packages/react-native-web/src/modules/addEventListener/index.js
similarity index 70%
rename from packages/react-native-web/src/modules/createEventHandle/index.js
rename to packages/react-native-web/src/modules/addEventListener/index.js
index bc2bf524b5..105486fc53 100644
--- a/packages/react-native-web/src/modules/createEventHandle/index.js
+++ b/packages/react-native-web/src/modules/addEventListener/index.js
@@ -12,11 +12,10 @@ import canUseDOM from '../canUseDom';
 
 type Listener = (e: any) => void;
 
-type EventHandle = (target: EventTarget, callback: ?Listener) => () => void;
-
 export type EventOptions = {
   capture?: boolean,
-  passive?: boolean
+  passive?: boolean,
+  once?: boolean
 };
 
 const emptyFunction = () => {};
@@ -72,28 +71,19 @@ function normalizeEvent(event: any) {
 /**
  *
  */
-export default function createEventHandle(
-  type: string,
+export function addEventListener(
+  target: EventTarget,
+  type: any,
+  listener: Listener,
   options: ?EventOptions
-): EventHandle {
+): () => void {
   const opts = getOptions(options);
+  const compatListener = (e: any) => listener(normalizeEvent(e));
+  target.addEventListener(type, compatListener, opts);
 
-  return function (target: EventTarget, listener: ?Listener) {
-    if (target == null || typeof target.addEventListener !== 'function') {
-      throw new Error('createEventHandle: called on an invalid target.');
-    }
-
-    const element = (target: any);
-    if (listener != null) {
-      const compatListener = (e) => listener(normalizeEvent(e));
-      element.addEventListener(type, compatListener, opts);
-      return function removeListener() {
-        if (element != null) {
-          element.removeEventListener(type, compatListener, opts);
-        }
-      };
-    } else {
-      return emptyFunction;
+  return function removeEventListener() {
+    if (target != null) {
+      target.removeEventListener(type, compatListener, opts);
     }
   };
 }
diff --git a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js
index da796db75d..4dc3055cbe 100644
--- a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js
+++ b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js
@@ -71,7 +71,7 @@ describe('modules/createDOMProps', () => {
     expect(_props).toMatchInlineSnapshot(`
       {
         "aria-activedescendant": "activedescendant",
-        "aria-atomic": true,
+        "aria-atomic": "activedescendant",
         "aria-autocomplete": "list",
         "aria-busy": true,
         "aria-checked": true,
@@ -112,6 +112,7 @@ describe('modules/createDOMProps', () => {
         "aria-setsize": 5,
         "aria-sort": "ascending",
         "aria-valuemax": 5,
+        "aria-valuemin": 0,
         "aria-valuenow": 3,
         "aria-valuetext": "3",
         "className": "className",
diff --git a/packages/react-native-web/src/modules/createDOMProps/index.js b/packages/react-native-web/src/modules/createDOMProps/index.js
index 5e1074632a..d6386d8fed 100644
--- a/packages/react-native-web/src/modules/createDOMProps/index.js
+++ b/packages/react-native-web/src/modules/createDOMProps/index.js
@@ -168,7 +168,9 @@ const createDOMProps = (elementType, props, options) => {
     );
   }
   const _ariaActiveDescendant =
-    ariaActiveDescendant || accessibilityActiveDescendant;
+    ariaActiveDescendant != null
+      ? ariaActiveDescendant
+      : accessibilityActiveDescendant;
   if (_ariaActiveDescendant != null) {
     domProps['aria-activedescendant'] = _ariaActiveDescendant;
   }
@@ -179,7 +181,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityAtomic is deprecated. Use aria-atomic.`
     );
   }
-  const _ariaAtomic = ariaAtomic || accessibilityAtomic;
+  const _ariaAtomic =
+    ariaAtomic != null ? ariaActiveDescendant : accessibilityAtomic;
   if (_ariaAtomic != null) {
     domProps['aria-atomic'] = _ariaAtomic;
   }
@@ -190,7 +193,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityAutoComplete is deprecated. Use aria-autocomplete.`
     );
   }
-  const _ariaAutoComplete = ariaAutoComplete || accessibilityAutoComplete;
+  const _ariaAutoComplete =
+    ariaAutoComplete != null ? ariaAutoComplete : accessibilityAutoComplete;
   if (_ariaAutoComplete != null) {
     domProps['aria-autocomplete'] = _ariaAutoComplete;
   }
@@ -201,7 +205,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityBusy is deprecated. Use aria-busy.`
     );
   }
-  const _ariaBusy = ariaBusy || accessibilityBusy;
+  const _ariaBusy = ariaBusy != null ? ariaBusy : accessibilityBusy;
   if (_ariaBusy != null) {
     domProps['aria-busy'] = _ariaBusy;
   }
@@ -212,7 +216,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityChecked is deprecated. Use aria-checked.`
     );
   }
-  const _ariaChecked = ariaChecked || accessibilityChecked;
+  const _ariaChecked = ariaChecked != null ? ariaChecked : accessibilityChecked;
   if (_ariaChecked != null) {
     domProps['aria-checked'] = _ariaChecked;
   }
@@ -223,7 +227,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityColumnCount is deprecated. Use aria-colcount.`
     );
   }
-  const _ariaColumnCount = ariaColumnCount || accessibilityColumnCount;
+  const _ariaColumnCount =
+    ariaColumnCount != null ? ariaColumnCount : accessibilityColumnCount;
   if (_ariaColumnCount != null) {
     domProps['aria-colcount'] = _ariaColumnCount;
   }
@@ -234,7 +239,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityColumnIndex is deprecated. Use aria-colindex.`
     );
   }
-  const _ariaColumnIndex = ariaColumnIndex || accessibilityColumnIndex;
+  const _ariaColumnIndex =
+    ariaColumnIndex != null ? ariaColumnIndex : accessibilityColumnIndex;
   if (_ariaColumnIndex != null) {
     domProps['aria-colindex'] = _ariaColumnIndex;
   }
@@ -245,7 +251,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityColumnSpan is deprecated. Use aria-colspan.`
     );
   }
-  const _ariaColumnSpan = ariaColumnSpan || accessibilityColumnSpan;
+  const _ariaColumnSpan =
+    ariaColumnSpan != null ? ariaColumnSpan : accessibilityColumnSpan;
   if (_ariaColumnSpan != null) {
     domProps['aria-colspan'] = _ariaColumnSpan;
   }
@@ -256,7 +263,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityControls is deprecated. Use aria-controls.`
     );
   }
-  const _ariaControls = ariaControls || accessibilityControls;
+  const _ariaControls =
+    ariaControls != null ? ariaControls : accessibilityControls;
   if (_ariaControls != null) {
     domProps['aria-controls'] = processIDRefList(_ariaControls);
   }
@@ -267,7 +275,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityCurrent is deprecated. Use aria-current.`
     );
   }
-  const _ariaCurrent = ariaCurrent || accessibilityCurrent;
+  const _ariaCurrent = ariaCurrent != null ? ariaCurrent : accessibilityCurrent;
   if (_ariaCurrent != null) {
     domProps['aria-current'] = _ariaCurrent;
   }
@@ -278,7 +286,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityDescribedBy is deprecated. Use aria-describedby.`
     );
   }
-  const _ariaDescribedBy = ariaDescribedBy || accessibilityDescribedBy;
+  const _ariaDescribedBy =
+    ariaDescribedBy != null ? ariaDescribedBy : accessibilityDescribedBy;
   if (_ariaDescribedBy != null) {
     domProps['aria-describedby'] = processIDRefList(_ariaDescribedBy);
   }
@@ -289,7 +298,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityDetails is deprecated. Use aria-details.`
     );
   }
-  const _ariaDetails = ariaDetails || accessibilityDetails;
+  const _ariaDetails = ariaDetails != null ? ariaDetails : accessibilityDetails;
   if (_ariaDetails != null) {
     domProps['aria-details'] = _ariaDetails;
   }
@@ -314,7 +323,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityErrorMessage is deprecated. Use aria-errormessage.`
     );
   }
-  const _ariaErrorMessage = ariaErrorMessage || accessibilityErrorMessage;
+  const _ariaErrorMessage =
+    ariaErrorMessage != null ? ariaErrorMessage : accessibilityErrorMessage;
   if (_ariaErrorMessage != null) {
     domProps['aria-errormessage'] = _ariaErrorMessage;
   }
@@ -325,7 +335,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityExpanded is deprecated. Use aria-expanded.`
     );
   }
-  const _ariaExpanded = ariaExpanded || accessibilityExpanded;
+  const _ariaExpanded =
+    ariaExpanded != null ? ariaExpanded : accessibilityExpanded;
   if (_ariaExpanded != null) {
     domProps['aria-expanded'] = _ariaExpanded;
   }
@@ -336,7 +347,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityFlowTo is deprecated. Use aria-flowto.`
     );
   }
-  const _ariaFlowTo = ariaFlowTo || accessibilityFlowTo;
+  const _ariaFlowTo = ariaFlowTo != null ? ariaFlowTo : accessibilityFlowTo;
   if (_ariaFlowTo != null) {
     domProps['aria-flowto'] = processIDRefList(_ariaFlowTo);
   }
@@ -347,7 +358,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityHasPopup is deprecated. Use aria-haspopup.`
     );
   }
-  const _ariaHasPopup = ariaHasPopup || accessibilityHasPopup;
+  const _ariaHasPopup =
+    ariaHasPopup != null ? ariaHasPopup : accessibilityHasPopup;
   if (_ariaHasPopup != null) {
     domProps['aria-haspopup'] = _ariaHasPopup;
   }
@@ -358,7 +370,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityHidden is deprecated. Use aria-hidden.`
     );
   }
-  const _ariaHidden = ariaHidden || accessibilityHidden;
+  const _ariaHidden = ariaHidden != null ? ariaHidden : accessibilityHidden;
   if (_ariaHidden === true) {
     domProps['aria-hidden'] = _ariaHidden;
   }
@@ -369,7 +381,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityInvalid is deprecated. Use aria-invalid.`
     );
   }
-  const _ariaInvalid = ariaInvalid || accessibilityInvalid;
+  const _ariaInvalid = ariaInvalid != null ? ariaInvalid : accessibilityInvalid;
   if (_ariaInvalid != null) {
     domProps['aria-invalid'] = _ariaInvalid;
   }
@@ -380,7 +392,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityKeyShortcuts is deprecated. Use aria-keyshortcuts.`
     );
   }
-  const _ariaKeyShortcuts = ariaKeyShortcuts || accessibilityKeyShortcuts;
+  const _ariaKeyShortcuts =
+    ariaKeyShortcuts != null ? ariaKeyShortcuts : accessibilityKeyShortcuts;
   if (_ariaKeyShortcuts != null) {
     domProps['aria-keyshortcuts'] = processIDRefList(_ariaKeyShortcuts);
   }
@@ -391,7 +404,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityLabel is deprecated. Use aria-label.`
     );
   }
-  const _ariaLabel = ariaLabel || accessibilityLabel;
+  const _ariaLabel = ariaLabel != null ? ariaLabel : accessibilityLabel;
   if (_ariaLabel != null) {
     domProps['aria-label'] = _ariaLabel;
   }
@@ -402,7 +415,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityLabelledBy is deprecated. Use aria-labelledby.`
     );
   }
-  const _ariaLabelledBy = ariaLabelledBy || accessibilityLabelledBy;
+  const _ariaLabelledBy =
+    ariaLabelledBy != null ? ariaLabelledBy : accessibilityLabelledBy;
   if (_ariaLabelledBy != null) {
     domProps['aria-labelledby'] = processIDRefList(_ariaLabelledBy);
   }
@@ -413,7 +427,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityLevel is deprecated. Use aria-level.`
     );
   }
-  const _ariaLevel = ariaLevel || accessibilityLevel;
+  const _ariaLevel = ariaLevel != null ? ariaLevel : accessibilityLevel;
   if (_ariaLevel != null) {
     domProps['aria-level'] = _ariaLevel;
   }
@@ -424,7 +438,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityLiveRegion is deprecated. Use aria-live.`
     );
   }
-  const _ariaLive = ariaLive || accessibilityLiveRegion;
+  const _ariaLive = ariaLive != null ? ariaLive : accessibilityLiveRegion;
   if (_ariaLive != null) {
     domProps['aria-live'] = _ariaLive === 'none' ? 'off' : _ariaLive;
   }
@@ -435,7 +449,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityModal is deprecated. Use aria-modal.`
     );
   }
-  const _ariaModal = ariaModal || accessibilityModal;
+  const _ariaModal = ariaModal != null ? ariaModal : accessibilityModal;
   if (_ariaModal != null) {
     domProps['aria-modal'] = _ariaModal;
   }
@@ -446,7 +460,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityMultiline is deprecated. Use aria-multiline.`
     );
   }
-  const _ariaMultiline = ariaMultiline || accessibilityMultiline;
+  const _ariaMultiline =
+    ariaMultiline != null ? ariaMultiline : accessibilityMultiline;
   if (_ariaMultiline != null) {
     domProps['aria-multiline'] = _ariaMultiline;
   }
@@ -458,7 +473,9 @@ const createDOMProps = (elementType, props, options) => {
     );
   }
   const _ariaMultiSelectable =
-    ariaMultiSelectable || accessibilityMultiSelectable;
+    ariaMultiSelectable != null
+      ? ariaMultiSelectable
+      : accessibilityMultiSelectable;
   if (_ariaMultiSelectable != null) {
     domProps['aria-multiselectable'] = _ariaMultiSelectable;
   }
@@ -469,7 +486,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityOrientation is deprecated. Use aria-orientation.`
     );
   }
-  const _ariaOrientation = ariaOrientation || accessibilityOrientation;
+  const _ariaOrientation =
+    ariaOrientation != null ? ariaOrientation : accessibilityOrientation;
   if (_ariaOrientation != null) {
     domProps['aria-orientation'] = _ariaOrientation;
   }
@@ -480,7 +498,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityOwns is deprecated. Use aria-owns.`
     );
   }
-  const _ariaOwns = ariaOwns || accessibilityOwns;
+  const _ariaOwns = ariaOwns != null ? ariaOwns : accessibilityOwns;
   if (_ariaOwns != null) {
     domProps['aria-owns'] = processIDRefList(_ariaOwns);
   }
@@ -491,7 +509,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityPlaceholder is deprecated. Use aria-placeholder.`
     );
   }
-  const _ariaPlaceholder = ariaPlaceholder || accessibilityPlaceholder;
+  const _ariaPlaceholder =
+    ariaPlaceholder != null ? ariaPlaceholder : accessibilityPlaceholder;
   if (_ariaPlaceholder != null) {
     domProps['aria-placeholder'] = _ariaPlaceholder;
   }
@@ -502,7 +521,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityPosInSet is deprecated. Use aria-posinset.`
     );
   }
-  const _ariaPosInSet = ariaPosInSet || accessibilityPosInSet;
+  const _ariaPosInSet =
+    ariaPosInSet != null ? ariaPosInSet : accessibilityPosInSet;
   if (_ariaPosInSet != null) {
     domProps['aria-posinset'] = _ariaPosInSet;
   }
@@ -513,7 +533,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityPressed is deprecated. Use aria-pressed.`
     );
   }
-  const _ariaPressed = ariaPressed || accessibilityPressed;
+  const _ariaPressed = ariaPressed != null ? ariaPressed : accessibilityPressed;
   if (_ariaPressed != null) {
     domProps['aria-pressed'] = _ariaPressed;
   }
@@ -524,7 +544,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityReadOnly is deprecated. Use aria-readonly.`
     );
   }
-  const _ariaReadOnly = ariaReadOnly || accessibilityReadOnly;
+  const _ariaReadOnly =
+    ariaReadOnly != null ? ariaReadOnly : accessibilityReadOnly;
   if (_ariaReadOnly != null) {
     domProps['aria-readonly'] = _ariaReadOnly;
     // Enhance with native semantics
@@ -543,7 +564,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityRequired is deprecated. Use aria-required.`
     );
   }
-  const _ariaRequired = ariaRequired || accessibilityRequired;
+  const _ariaRequired =
+    ariaRequired != null ? ariaRequired : accessibilityRequired;
   if (_ariaRequired != null) {
     domProps['aria-required'] = _ariaRequired;
     // Enhance with native semantics
@@ -571,7 +593,9 @@ const createDOMProps = (elementType, props, options) => {
     );
   }
   const _ariaRoleDescription =
-    ariaRoleDescription || accessibilityRoleDescription;
+    ariaRoleDescription != null
+      ? ariaRoleDescription
+      : accessibilityRoleDescription;
   if (_ariaRoleDescription != null) {
     domProps['aria-roledescription'] = _ariaRoleDescription;
   }
@@ -582,7 +606,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityRowCount is deprecated. Use aria-rowcount.`
     );
   }
-  const _ariaRowCount = ariaRowCount || accessibilityRowCount;
+  const _ariaRowCount =
+    ariaRowCount != null ? ariaRowCount : accessibilityRowCount;
   if (_ariaRowCount != null) {
     domProps['aria-rowcount'] = _ariaRowCount;
   }
@@ -593,7 +618,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityRowIndex is deprecated. Use aria-rowindex.`
     );
   }
-  const _ariaRowIndex = ariaRowIndex || accessibilityRowIndex;
+  const _ariaRowIndex =
+    ariaRowIndex != null ? ariaRowIndex : accessibilityRowIndex;
   if (_ariaRowIndex != null) {
     domProps['aria-rowindex'] = _ariaRowIndex;
   }
@@ -604,7 +630,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityRowSpan is deprecated. Use aria-rowspan.`
     );
   }
-  const _ariaRowSpan = ariaRowSpan || accessibilityRowSpan;
+  const _ariaRowSpan = ariaRowSpan != null ? ariaRowSpan : accessibilityRowSpan;
   if (_ariaRowSpan != null) {
     domProps['aria-rowspan'] = _ariaRowSpan;
   }
@@ -615,7 +641,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilitySelected is deprecated. Use aria-selected.`
     );
   }
-  const _ariaSelected = ariaSelected || accessibilitySelected;
+  const _ariaSelected =
+    ariaSelected != null ? ariaSelected : accessibilitySelected;
   if (_ariaSelected != null) {
     domProps['aria-selected'] = _ariaSelected;
   }
@@ -626,7 +653,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilitySetSize is deprecated. Use aria-setsize.`
     );
   }
-  const _ariaSetSize = ariaSetSize || accessibilitySetSize;
+  const _ariaSetSize = ariaSetSize != null ? ariaSetSize : accessibilitySetSize;
   if (_ariaSetSize != null) {
     domProps['aria-setsize'] = _ariaSetSize;
   }
@@ -637,7 +664,7 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilitySort is deprecated. Use aria-sort.`
     );
   }
-  const _ariaSort = ariaSort || accessibilitySort;
+  const _ariaSort = ariaSort != null ? ariaSort : accessibilitySort;
   if (_ariaSort != null) {
     domProps['aria-sort'] = _ariaSort;
   }
@@ -648,7 +675,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityValueMax is deprecated. Use aria-valuemax.`
     );
   }
-  const _ariaValueMax = ariaValueMax || accessibilityValueMax;
+  const _ariaValueMax =
+    ariaValueMax != null ? ariaValueMax : accessibilityValueMax;
   if (_ariaValueMax != null) {
     domProps['aria-valuemax'] = _ariaValueMax;
   }
@@ -659,7 +687,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityValueMin is deprecated. Use aria-valuemin.`
     );
   }
-  const _ariaValueMin = ariaValueMin || accessibilityValueMin;
+  const _ariaValueMin =
+    ariaValueMin != null ? ariaValueMin : accessibilityValueMin;
   if (_ariaValueMin != null) {
     domProps['aria-valuemin'] = _ariaValueMin;
   }
@@ -670,7 +699,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityValueNow is deprecated. Use aria-valuenow.`
     );
   }
-  const _ariaValueNow = ariaValueNow || accessibilityValueNow;
+  const _ariaValueNow =
+    ariaValueNow != null ? ariaValueNow : accessibilityValueNow;
   if (_ariaValueNow != null) {
     domProps['aria-valuenow'] = _ariaValueNow;
   }
@@ -681,7 +711,8 @@ const createDOMProps = (elementType, props, options) => {
       `accessibilityValueText is deprecated. Use aria-valuetext.`
     );
   }
-  const _ariaValueText = ariaValueText || accessibilityValueText;
+  const _ariaValueText =
+    ariaValueText != null ? ariaValueText : accessibilityValueText;
   if (_ariaValueText != null) {
     domProps['aria-valuetext'] = _ariaValueText;
   }
@@ -756,7 +787,10 @@ const createDOMProps = (elementType, props, options) => {
   }
   const [className, inlineStyle] = StyleSheet(
     [style, pointerEvents && pointerEventsStyles[pointerEvents]],
-    { writingDirection: options ? options.writingDirection : 'ltr' }
+    {
+      writingDirection: 'ltr',
+      ...options
+    }
   );
   if (className) {
     domProps.className = className;
@@ -770,7 +804,7 @@ const createDOMProps = (elementType, props, options) => {
   if (nativeID != null) {
     warnOnce('nativeID', `nativeID is deprecated. Use id.`);
   }
-  const _id = id || nativeID;
+  const _id = id != null ? id : nativeID;
   if (_id != null) {
     domProps.id = _id;
   }
diff --git a/packages/react-native-web/src/modules/modality/index.js b/packages/react-native-web/src/modules/modality/index.js
index a998ff02c5..dfdba393fe 100644
--- a/packages/react-native-web/src/modules/modality/index.js
+++ b/packages/react-native-web/src/modules/modality/index.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import createEventHandle from '../createEventHandle';
+import { addEventListener } from '../addEventListener';
 import canUseDOM from '../canUseDom';
 
 export type Modality = 'keyboard' | 'mouse' | 'touch' | 'pen';
@@ -45,32 +45,6 @@ const VISIBILITYCHANGE = 'visibilitychange';
 const bubbleOptions = { passive: true };
 const captureOptions = { capture: true, passive: true };
 
-// Window events
-const addBlurListener = createEventHandle(BLUR, bubbleOptions);
-const addFocusListener = createEventHandle(FOCUS, bubbleOptions);
-// Must be capture phase because 'stopPropagation' might prevent these
-// events bubbling to the document.
-const addVisibilityChangeListener = createEventHandle(
-  VISIBILITYCHANGE,
-  captureOptions
-);
-const addKeyDownListener = createEventHandle(KEYDOWN, captureOptions);
-const addPointerDownListener = createEventHandle(POINTERDOWN, captureOptions);
-const addPointerMoveListener = createEventHandle(POINTERMOVE, captureOptions);
-// Fallback events
-const addContextMenuListener = createEventHandle(CONTEXTMENU, captureOptions);
-const addMouseDownListener = createEventHandle(MOUSEDOWN, captureOptions);
-const addMouseMoveListener = createEventHandle(MOUSEMOVE, captureOptions);
-const addMouseUpListener = createEventHandle(MOUSEUP, captureOptions);
-const addScrollListener = createEventHandle(SCROLL, captureOptions);
-const addSelectiomChangeListener = createEventHandle(
-  SELECTIONCHANGE,
-  captureOptions
-);
-const addTouchCancelListener = createEventHandle(TOUCHCANCEL, captureOptions);
-const addTouchMoveListener = createEventHandle(TOUCHMOVE, captureOptions);
-const addTouchStartListener = createEventHandle(TOUCHSTART, captureOptions);
-
 function restoreModality() {
   if (previousModality != null || previousActiveModality != null) {
     if (previousModality != null) {
@@ -184,22 +158,30 @@ function onPointerish(event: any) {
 }
 
 if (canUseDOM) {
-  addBlurListener(window, onBlurWindow);
-  addFocusListener(window, onFocusWindow);
-  addKeyDownListener(document, onKeyDown);
-  addPointerDownListener(document, onPointerish);
-  addPointerMoveListener(document, onPointerish);
-  addVisibilityChangeListener(document, onVisibilityChange);
-  // fallbacks
-  addContextMenuListener(document, onPointerish);
-  addMouseDownListener(document, onPointerish);
-  addMouseMoveListener(document, onPointerish);
-  addMouseUpListener(document, onPointerish);
-  addTouchCancelListener(document, onPointerish);
-  addTouchMoveListener(document, onPointerish);
-  addTouchStartListener(document, onPointerish);
-  addSelectiomChangeListener(document, onPointerish);
-  addScrollListener(document, onPointerish);
+  // Window events
+  addEventListener(window, BLUR, onBlurWindow, bubbleOptions);
+  addEventListener(window, FOCUS, onFocusWindow, bubbleOptions);
+  // Must be capture phase because 'stopPropagation' might prevent these
+  // events bubbling to the document.
+  addEventListener(document, KEYDOWN, onKeyDown, captureOptions);
+  addEventListener(
+    document,
+    VISIBILITYCHANGE,
+    onVisibilityChange,
+    captureOptions
+  );
+  addEventListener(document, POINTERDOWN, onPointerish, captureOptions);
+  addEventListener(document, POINTERMOVE, onPointerish, captureOptions);
+  // Fallback events
+  addEventListener(document, CONTEXTMENU, onPointerish, captureOptions);
+  addEventListener(document, MOUSEDOWN, onPointerish, captureOptions);
+  addEventListener(document, MOUSEMOVE, onPointerish, captureOptions);
+  addEventListener(document, MOUSEUP, onPointerish, captureOptions);
+  addEventListener(document, TOUCHCANCEL, onPointerish, captureOptions);
+  addEventListener(document, TOUCHMOVE, onPointerish, captureOptions);
+  addEventListener(document, TOUCHSTART, onPointerish, captureOptions);
+  addEventListener(document, SELECTIONCHANGE, onPointerish, captureOptions);
+  addEventListener(document, SCROLL, onPointerish, captureOptions);
 }
 
 function callListeners() {
diff --git a/packages/react-native-web/src/modules/useEvent/index.js b/packages/react-native-web/src/modules/useEvent/index.js
index 22b654463d..3d726b35a7 100644
--- a/packages/react-native-web/src/modules/useEvent/index.js
+++ b/packages/react-native-web/src/modules/useEvent/index.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import createEventHandle from '../createEventHandle';
+import { addEventListener } from '../addEventListener';
 import useLayoutEffect from '../useLayoutEffect';
 import useStable from '../useStable';
 
@@ -27,16 +27,16 @@ type AddListener = (
  * }).
  */
 export default function useEvent(
-  event: string,
+  eventType: string,
   options?: ?{
     capture?: boolean,
-    passive?: boolean
+    passive?: boolean,
+    once?: boolean
   }
 ): AddListener {
   const targetListeners = useStable(() => new Map());
 
   const addListener = useStable(() => {
-    const addEventListener = createEventHandle(event, options);
     return (target: EventTarget, callback: Callback) => {
       const removeTargetListener = targetListeners.get(target);
       if (removeTargetListener != null) {
@@ -44,8 +44,14 @@ export default function useEvent(
       }
       if (callback == null) {
         targetListeners.delete(target);
+        callback = () => {};
       }
-      const removeEventListener = addEventListener(target, callback);
+      const removeEventListener = addEventListener(
+        target,
+        eventType,
+        callback,
+        options
+      );
       targetListeners.set(target, removeEventListener);
       return removeEventListener;
     };
diff --git a/packages/react-native-web/src/modules/usePressEvents/PressResponder.js b/packages/react-native-web/src/modules/usePressEvents/PressResponder.js
index 2b03203de1..857db94b96 100644
--- a/packages/react-native-web/src/modules/usePressEvents/PressResponder.js
+++ b/packages/react-native-web/src/modules/usePressEvents/PressResponder.js
@@ -116,11 +116,15 @@ const Transitions = Object.freeze({
   }
 });
 
+const getElementRole = (element) => element.getAttribute('role');
+
+const getElementType = (element) => element.tagName.toLowerCase();
+
 const isActiveSignal = (signal) =>
   signal === RESPONDER_ACTIVE_PRESS_START ||
   signal === RESPONDER_ACTIVE_LONG_PRESS_START;
 
-const isButtonRole = (element) => element.getAttribute('role') === 'button';
+const isButtonRole = (element) => getElementRole(element) === 'button';
 
 const isPressStartSignal = (signal) =>
   signal === RESPONDER_INACTIVE_PRESS_START ||
@@ -132,10 +136,10 @@ const isTerminalSignal = (signal) =>
 
 const isValidKeyPress = (event) => {
   const { key, target } = event;
-  const role = target.getAttribute('role');
   const isSpacebar = key === ' ' || key === 'Spacebar';
-
-  return key === 'Enter' || (isSpacebar && role === 'button');
+  const isButtonish =
+    getElementType(target) === 'button' || isButtonRole(target);
+  return key === 'Enter' || (isSpacebar && isButtonish);
 };
 
 const DEFAULT_LONG_PRESS_DELAY_MS = 450; // 500 - 50
@@ -307,7 +311,7 @@ export default class PressResponder {
         document.removeEventListener('keyup', keyupHandler);
 
         const role = target.getAttribute('role');
-        const elementType = target.tagName.toLowerCase();
+        const elementType = getElementType(target);
 
         const isNativeInteractiveElement =
           role === 'link' ||
@@ -345,11 +349,15 @@ export default class PressResponder {
             // focus is moved to another element during 'keydown'.
             document.addEventListener('keyup', keyupHandler);
           }
-          const role = target.getAttribute('role');
           const isSpacebarKey = key === ' ' || key === 'Spacebar';
-          const isButtonRole = role === 'button' || role === 'menuitem';
-          if (isSpacebarKey && isButtonRole) {
-            // Prevent spacebar scrolling the window
+          const role = getElementRole(target);
+          const isButtonLikeRole = role === 'button' || role === 'menuitem';
+          if (
+            isSpacebarKey &&
+            isButtonLikeRole &&
+            getElementType(target) !== 'button'
+          ) {
+            // Prevent spacebar scrolling the window if using non-native button
             event.preventDefault();
           }
           event.stopPropagation();
diff --git a/packages/react-native-web/src/types/styles.js b/packages/react-native-web/src/types/styles.js
index b9e37147a0..4f02e84e36 100644
--- a/packages/react-native-web/src/types/styles.js
+++ b/packages/react-native-web/src/types/styles.js
@@ -188,7 +188,7 @@ export type LayoutStyles = {|
     | 'flex-start'
     | 'stretch'
   ),
-  aspectRatio?: ?number,
+  aspectRatio?: ?NumberOrString,
   backfaceVisibility?: ?VisiblilityValue,
   borderWidth?: ?DimensionValue,
   borderBlockWidth?: ?DimensionValue,
@@ -306,7 +306,7 @@ export type LayoutStyles = {|
 export type ShadowStyles = {|
   // @deprecated
   shadowColor?: ?ColorValue,
-  shadowOffset?: {|
+  shadowOffset?: ?{|
     width?: DimensionValue,
     height?: DimensionValue
   |},
diff --git a/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedColor.js b/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedColor.js
index 8e72cc2457..e57b59da2f 100644
--- a/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedColor.js
+++ b/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedColor.js
@@ -12,7 +12,7 @@
 
 import AnimatedValue from './AnimatedValue';
 import AnimatedWithChildren from './AnimatedWithChildren';
-import normalizeColor from 'normalize-css-color';
+import normalizeColor from '@react-native/normalize-color';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
diff --git a/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedInterpolation.js b/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedInterpolation.js
index 8103e84ef7..0b790089f5 100644
--- a/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedInterpolation.js
+++ b/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedInterpolation.js
@@ -18,7 +18,7 @@ import AnimatedWithChildren from './AnimatedWithChildren';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
 import invariant from 'fbjs/lib/invariant';
-import normalizeColor from 'normalize-css-color';
+import normalizeColor from '@react-native/normalize-color';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
diff --git a/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js b/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js
index 1b654319a2..fdfd2a78c5 100644
--- a/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js
+++ b/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js
@@ -24,7 +24,7 @@ function createAnimatedStyle(inputStyle: any): Object {
   const animatedStyles = {}
   for (const key in style) {
     const value = style[key];
-    if (key === 'transform') {
+    if (key === 'transform' && Array.isArray(value)) {
       animatedStyles[key] = new AnimatedTransform(value);
     }
     else if (value instanceof AnimatedNode) {
diff --git a/packages/react-native-web/src/vendor/react-native/Animated/useAnimatedProps.js b/packages/react-native-web/src/vendor/react-native/Animated/useAnimatedProps.js
index c37a00b622..64b31b03b4 100644
--- a/packages/react-native-web/src/vendor/react-native/Animated/useAnimatedProps.js
+++ b/packages/react-native-web/src/vendor/react-native/Animated/useAnimatedProps.js
@@ -17,12 +17,13 @@ import NativeAnimatedHelper from './NativeAnimatedHelper';
 import {
   useCallback,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useReducer,
   useRef,
 } from 'react';
 
+import useLayoutEffect from '../../../modules/useLayoutEffect';
+
 type ReducedProps<TProps> = {
   ...TProps,
   collapsable: boolean,
diff --git a/packages/react-native-web/src/vendor/react-native/Batchinator/index.js b/packages/react-native-web/src/vendor/react-native/Batchinator/index.js
index 47071a96a1..4ed33030af 100644
--- a/packages/react-native-web/src/vendor/react-native/Batchinator/index.js
+++ b/packages/react-native-web/src/vendor/react-native/Batchinator/index.js
@@ -37,7 +37,7 @@ import InteractionManager from '../../../exports/InteractionManager';
 class Batchinator {
   _callback: () => void;
   _delay: number;
-  _taskHandle: ?{cancel: () => void};
+  _taskHandle: ?{cancel: () => void, ...};
   constructor(callback: () => void, delayMS: number) {
     this._delay = delayMS;
     this._callback = callback;
@@ -48,7 +48,7 @@ class Batchinator {
    * By default, if there is a pending task the callback is run immediately. Set the option abort to
    * true to not call the callback if it was pending.
    */
-  dispose(options: {abort: boolean} = {abort: false}) {
+  dispose(options: {abort: boolean, ...} = {abort: false}) {
     if (this._taskHandle) {
       this._taskHandle.cancel();
       if (!options.abort) {
diff --git a/packages/react-native-web/src/vendor/react-native/FillRateHelper/index.js b/packages/react-native-web/src/vendor/react-native/FillRateHelper/index.js
index e5353013b2..a0c78d2450 100644
--- a/packages/react-native-web/src/vendor/react-native/FillRateHelper/index.js
+++ b/packages/react-native-web/src/vendor/react-native/FillRateHelper/index.js
@@ -10,6 +10,8 @@
 
 'use strict';
 
+import type {FrameMetricProps} from '../VirtualizedList/VirtualizedListProps';
+
 export type FillRateInfo = Info;
 
 class Info {
@@ -47,16 +49,17 @@ let _sampleRate = DEBUG ? 1 : null;
  * `SceneTracker.getActiveScene` to determine the context of the events.
  */
 class FillRateHelper {
-  _anyBlankStartTime = (null: ?number);
+  _anyBlankStartTime: ?number = null;
   _enabled = false;
-  _getFrameMetrics: (index: number) => ?FrameMetrics;
-  _info = new Info();
-  _mostlyBlankStartTime = (null: ?number);
-  _samplesStartTime = (null: ?number);
-
-  static addListener(
-    callback: FillRateInfo => void,
-  ): {remove: () => void, ...} {
+  _getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics;
+  _info: Info = new Info();
+  _mostlyBlankStartTime: ?number = null;
+  _samplesStartTime: ?number = null;
+
+  static addListener(callback: FillRateInfo => void): {
+    remove: () => void,
+    ...
+  } {
     if (_sampleRate === null) {
       console.warn('Call `FillRateHelper.setSampleRate` before `addListener`.');
     }
@@ -76,7 +79,9 @@ class FillRateHelper {
     _minSampleCount = minSampleCount;
   }
 
-  constructor(getFrameMetrics: (index: number) => ?FrameMetrics) {
+  constructor(
+    getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics,
+  ) {
     this._getFrameMetrics = getFrameMetrics;
     this._enabled = (_sampleRate || 0) > Math.random();
     this._resetData();
@@ -123,6 +128,7 @@ class FillRateHelper {
         mostly_blank_time_frac: this._info.mostly_blank_ms / total_time_spent,
       };
       for (const key in derived) {
+        // $FlowFixMe[prop-missing]
         derived[key] = Math.round(1000 * derived[key]) / 1000;
       }
       console.debug('FillRateHelper deactivateAndFlush: ', {derived, info});
@@ -133,12 +139,11 @@ class FillRateHelper {
 
   computeBlankness(
     props: {
-      data: any,
-      getItemCount: (data: any) => number,
-      initialNumToRender: number,
+      ...FrameMetricProps,
+      initialNumToRender?: ?number,
       ...
     },
-    state: {
+    cellsAroundViewport: {
       first: number,
       last: number,
       ...
@@ -154,6 +159,7 @@ class FillRateHelper {
     if (
       !this._enabled ||
       props.getItemCount(props.data) === 0 ||
+      cellsAroundViewport.last < cellsAroundViewport.first ||
       this._samplesStartTime == null
     ) {
       return 0;
@@ -179,10 +185,13 @@ class FillRateHelper {
     this._mostlyBlankStartTime = null;
 
     let blankTop = 0;
-    let first = state.first;
-    let firstFrame = this._getFrameMetrics(first);
-    while (first <= state.last && (!firstFrame || !firstFrame.inLayout)) {
-      firstFrame = this._getFrameMetrics(first);
+    let first = cellsAroundViewport.first;
+    let firstFrame = this._getFrameMetrics(first, props);
+    while (
+      first <= cellsAroundViewport.last &&
+      (!firstFrame || !firstFrame.inLayout)
+    ) {
+      firstFrame = this._getFrameMetrics(first, props);
       first++;
     }
     // Only count blankTop if we aren't rendering the first item, otherwise we will count the header
@@ -194,10 +203,13 @@ class FillRateHelper {
       );
     }
     let blankBottom = 0;
-    let last = state.last;
-    let lastFrame = this._getFrameMetrics(last);
-    while (last >= state.first && (!lastFrame || !lastFrame.inLayout)) {
-      lastFrame = this._getFrameMetrics(last);
+    let last = cellsAroundViewport.last;
+    let lastFrame = this._getFrameMetrics(last, props);
+    while (
+      last >= cellsAroundViewport.first &&
+      (!lastFrame || !lastFrame.inLayout)
+    ) {
+      lastFrame = this._getFrameMetrics(last, props);
       last--;
     }
     // Only count blankBottom if we aren't rendering the last item, otherwise we will count the
@@ -238,4 +250,4 @@ class FillRateHelper {
   }
 }
 
-export default FillRateHelper;
+export default FillRateHelper;
\ No newline at end of file
diff --git a/packages/react-native-web/src/vendor/react-native/FlatList/index.js b/packages/react-native-web/src/vendor/react-native/FlatList/index.js
index 72360e5683..eefb789425 100644
--- a/packages/react-native-web/src/vendor/react-native/FlatList/index.js
+++ b/packages/react-native-web/src/vendor/react-native/FlatList/index.js
@@ -8,33 +8,34 @@
  * @format
  */
 
-import Platform from '../../../exports/Platform';
-import deepDiffer from '../deepDiffer';
-import * as React from 'react';
 import View, { type ViewProps } from '../../../exports/View';
-import VirtualizedList from '../VirtualizedList';
 import StyleSheet from '../../../exports/StyleSheet';
-
+import deepDiffer from '../deepDiffer';
+import Platform from '../../../exports/Platform';
 import invariant from 'fbjs/lib/invariant';
+import * as React from 'react';
 
 type ScrollViewNativeComponent = any;
-type ScrollResponderType = any;
 type ViewStyleProp = $PropertyType<ViewProps, 'style'>;
 import type {
   ViewToken,
   ViewabilityConfigCallbackPair,
 } from '../ViewabilityHelper';
 import type {RenderItemType, RenderItemProps} from '../VirtualizedList';
+type ScrollResponderType = any;
+import VirtualizedList from '../VirtualizedList';
 import {keyExtractor as defaultKeyExtractor} from '../VirtualizeUtils';
 
+import memoizeOne from 'memoize-one';
+
 type $FlowFixMe = any;
 
 type RequiredProps<ItemT> = {|
   /**
-   * For simplicity, data is just a plain array. If you want to use something else, like an
-   * immutable list, use the underlying `VirtualizedList` directly.
+   * An array (or array-like list) of items to render. Other data types can be
+   * used by targetting VirtualizedList directly.
    */
-  data: ?$ReadOnlyArray<ItemT>,
+  data: ?$ArrayLike<ItemT>,
 |};
 type OptionalProps<ItemT> = {|
   /**
@@ -89,7 +90,7 @@ type OptionalProps<ItemT> = {|
    * specify `ItemSeparatorComponent`.
    */
   getItemLayout?: (
-    data: ?Array<ItemT>,
+    data: ?$ArrayLike<ItemT>,
     index: number,
   ) => {
     length: number,
@@ -143,6 +144,10 @@ type OptionalProps<ItemT> = {|
    * See `ScrollView` for flow type and further documentation.
    */
   fadingEdgeLength?: ?number,
+  /**
+   * Enable an optimization to memoize the item renderer to prevent unnecessary rerenders.
+   */
+  strictMode?: boolean,
 |};
 
 /**
@@ -160,6 +165,11 @@ function numColumnsOrDefault(numColumns: ?number) {
   return numColumns ?? 1;
 }
 
+function isArrayLike(data: mixed): boolean {
+  // $FlowExpectedError[incompatible-use]
+  return typeof Object(data).length === 'number';
+}
+
 type FlatListProps<ItemT> = {|
   ...RequiredProps<ItemT>,
   ...OptionalProps<ItemT>,
@@ -331,6 +341,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   scrollToItem(params: {
     animated?: ?boolean,
     item: ItemT,
+    viewOffset?: number,
     viewPosition?: number,
     ...
   }) {
@@ -424,6 +435,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     }
   }
 
+  // $FlowFixMe[missing-local-annot]
   componentDidUpdate(prevProps: Props<ItemT>) {
     invariant(
       prevProps.numColumns === this.props.numColumns,
@@ -450,10 +462,11 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   _listRef: ?React.ElementRef<typeof VirtualizedList>;
   _virtualizedListPairs: Array<ViewabilityConfigCallbackPair> = [];
 
-  _captureRef = ref => {
+  _captureRef = (ref: ?React.ElementRef<typeof VirtualizedList>) => {
     this._listRef = ref;
   };
 
+  // $FlowFixMe[missing-local-annot]
   _checkProps(props: Props<ItemT>) {
     const {
       // $FlowFixMe[prop-missing] this prop doesn't exist, is only used for an invariant
@@ -485,13 +498,17 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     );
   }
 
-  _getItem = (data: Array<ItemT>, index: number) => {
+  _getItem = (
+    data: $ArrayLike<ItemT>,
+    index: number,
+  ): ?(ItemT | $ReadOnlyArray<ItemT>) => {
     const numColumns = numColumnsOrDefault(this.props.numColumns);
     if (numColumns > 1) {
       const ret = [];
       for (let kk = 0; kk < numColumns; kk++) {
-        const item = data[index * numColumns + kk];
-        if (item != null) {
+        const itemIndex = index * numColumns + kk;
+        if (itemIndex < data.length) {
+          const item = data[itemIndex];
           ret.push(item);
         }
       }
@@ -501,8 +518,14 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     }
   };
 
-  _getItemCount = (data: ?Array<ItemT>): number => {
-    if (data) {
+  _getItemCount = (data: ?$ArrayLike<ItemT>): number => {
+    // Legacy behavior of FlatList was to forward "undefined" length if invalid
+    // data like a non-arraylike object is passed. VirtualizedList would then
+    // coerce this, and the math would work out to no-op. For compatibility, if
+    // invalid data is passed, we tell VirtualizedList there are zero items
+    // available to prevent it from trying to read from the invalid data
+    // (without propagating invalidly typed data).
+    if (data != null && isArrayLike(data)) {
       const numColumns = numColumnsOrDefault(this.props.numColumns);
       return numColumns > 1 ? Math.ceil(data.length / numColumns) : data.length;
     } else {
@@ -510,29 +533,26 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     }
   };
 
-  _keyExtractor = (items: ItemT | Array<ItemT>, index: number) => {
+  _keyExtractor = (items: ItemT | Array<ItemT>, index: number): string => {
     const numColumns = numColumnsOrDefault(this.props.numColumns);
     const keyExtractor = this.props.keyExtractor ?? defaultKeyExtractor;
 
     if (numColumns > 1) {
-      if (Array.isArray(items)) {
-        return items
-          .map((item, kk) =>
-            keyExtractor(((item: $FlowFixMe): ItemT), index * numColumns + kk),
-          )
-          .join(':');
-      } else {
-        invariant(
-          Array.isArray(items),
-          'FlatList: Encountered internal consistency error, expected each item to consist of an ' +
-            'array with 1-%s columns; instead, received a single item.',
-          numColumns,
-        );
-      }
-    } else {
-      // $FlowFixMe[incompatible-call] Can't call keyExtractor with an array
-      return keyExtractor(items, index);
+      invariant(
+        Array.isArray(items),
+        'FlatList: Encountered internal consistency error, expected each item to consist of an ' +
+          'array with 1-%s columns; instead, received a single item.',
+        numColumns,
+      );
+      return items
+        .map((item, kk) =>
+          keyExtractor(((item: $FlowFixMe): ItemT), index * numColumns + kk),
+        )
+        .join(':');
     }
+
+    // $FlowFixMe[incompatible-call] Can't call keyExtractor with an array
+    return keyExtractor(items, index);
   };
 
   _pushMultiColumnViewable(arr: Array<ViewToken>, v: ViewToken): void {
@@ -551,6 +571,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
       changed: Array<ViewToken>,
       ...
     }) => void,
+    // $FlowFixMe[missing-local-annot]
   ) {
     return (info: {
       viewableItems: Array<ViewToken>,
@@ -560,8 +581,8 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
       const numColumns = numColumnsOrDefault(this.props.numColumns);
       if (onViewableItemsChanged) {
         if (numColumns > 1) {
-          const changed = [];
-          const viewableItems = [];
+          const changed: Array<ViewToken> = [];
+          const viewableItems: Array<ViewToken> = [];
           info.viewableItems.forEach(v =>
             this._pushMultiColumnViewable(viewableItems, v),
           );
@@ -574,15 +595,17 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     };
   }
 
-  _renderer = () => {
-    const {ListItemComponent, renderItem, columnWrapperStyle} = this.props;
-    const numColumns = numColumnsOrDefault(this.props.numColumns);
-
-    let virtualizedListRenderKey = ListItemComponent
-      ? 'ListItemComponent'
-      : 'renderItem';
+  _renderer = (
+    ListItemComponent: ?(React.ComponentType<any> | React.Element<any>),
+    renderItem: ?RenderItemType<ItemT>,
+    columnWrapperStyle: ?ViewStyleProp,
+    numColumns: ?number,
+    extraData: ?any,
+    // $FlowFixMe[missing-local-annot]
+  ) => {
+    const cols = numColumnsOrDefault(numColumns);
 
-    const renderer = (props): React.Node => {
+    const render = (props: RenderItemProps<ItemT>): React.Node => {
       if (ListItemComponent) {
         // $FlowFixMe[not-a-component] Component isn't valid
         // $FlowFixMe[incompatible-type-arg] Component isn't valid
@@ -596,47 +619,54 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
       }
     };
 
-    return {
-      /* $FlowFixMe[invalid-computed-prop] (>=0.111.0 site=react_native_fb)
-       * This comment suppresses an error found when Flow v0.111 was deployed.
-       * To see the error, delete this comment and run Flow. */
-      [virtualizedListRenderKey]: (info: RenderItemProps<ItemT>) => {
-        if (numColumns > 1) {
-          const {item, index} = info;
-          invariant(
-            Array.isArray(item),
-            'Expected array of items with numColumns > 1',
-          );
-          return (
-            <View style={[styles.row, columnWrapperStyle]}>
-              {item.map((it, kk) => {
-                const element = renderer({
-                  item: it,
-                  index: index * numColumns + kk,
-                  separators: info.separators,
-                });
-                return element != null ? (
-                  <React.Fragment key={kk}>{element}</React.Fragment>
-                ) : null;
-              })}
-            </View>
-          );
-        } else {
-          return renderer(info);
-        }
-      },
+    const renderProp = (info: RenderItemProps<ItemT>) => {
+      if (cols > 1) {
+        const {item, index} = info;
+        invariant(
+          Array.isArray(item),
+          'Expected array of items with numColumns > 1',
+        );
+        return (
+          <View style={[styles.row, columnWrapperStyle]}>
+            {item.map((it, kk) => {
+              const element = render({
+                // $FlowFixMe[incompatible-call]
+                item: it,
+                index: index * cols + kk,
+                separators: info.separators,
+              });
+              return element != null ? (
+                <React.Fragment key={kk}>{element}</React.Fragment>
+              ) : null;
+            })}
+          </View>
+        );
+      } else {
+        return render(info);
+      }
     };
+
+    return ListItemComponent
+      ? {ListItemComponent: renderProp}
+      : {renderItem: renderProp};
   };
 
+  // $FlowFixMe[missing-local-annot]
+  _memoizedRenderer = memoizeOne(this._renderer);
+
   render(): React.Node {
     const {
       numColumns,
       columnWrapperStyle,
       removeClippedSubviews: _removeClippedSubviews,
+      strictMode = false,
       ...restProps
     } = this.props;
 
+    const renderer = strictMode ? this._memoizedRenderer : this._renderer;
+
     return (
+      // $FlowFixMe[incompatible-exact] - `restProps` (`Props`) is inexact.
       <VirtualizedList
         {...restProps}
         getItem={this._getItem}
@@ -647,7 +677,13 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
         removeClippedSubviews={removeClippedSubviewsOrDefault(
           _removeClippedSubviews,
         )}
-        {...this._renderer()}
+        {...renderer(
+          this.props.ListItemComponent,
+          this.props.renderItem,
+          columnWrapperStyle,
+          numColumns,
+          this.props.extraData,
+        )}
       />
     );
   }
diff --git a/packages/react-native-web/src/vendor/react-native/Types/CoreEventTypes.js b/packages/react-native-web/src/vendor/react-native/Types/CoreEventTypes.js
index 3dd26e4187..c35d2d0303 100644
--- a/packages/react-native-web/src/vendor/react-native/Types/CoreEventTypes.js
+++ b/packages/react-native-web/src/vendor/react-native/Types/CoreEventTypes.js
@@ -10,7 +10,7 @@
 
 'use strict';
 
-export type SyntheticEvent<T> = $ReadOnly<{|
+export type SyntheticEvent<+T> = $ReadOnly<{|
   bubbles: ?boolean,
   cancelable: ?boolean,
   currentTarget: HTMLElement,
@@ -82,6 +82,144 @@ export type TextLayoutEvent = SyntheticEvent<
   |}>,
 >;
 
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
+ */
+export interface NativeUIEvent {
+  /**
+   * Returns a long with details about the event, depending on the event type.
+   */
+  +detail: number;
+}
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
+ */
+export interface NativeMouseEvent extends NativeUIEvent {
+  /**
+   * The X coordinate of the mouse pointer in global (screen) coordinates.
+   */
+  +screenX: number;
+  /**
+   * The Y coordinate of the mouse pointer in global (screen) coordinates.
+   */
+  +screenY: number;
+  /**
+   * The X coordinate of the mouse pointer relative to the whole document.
+   */
+  +pageX: number;
+  /**
+   * The Y coordinate of the mouse pointer relative to the whole document.
+   */
+  +pageY: number;
+  /**
+   * The X coordinate of the mouse pointer in local (DOM content) coordinates.
+   */
+  +clientX: number;
+  /**
+   * The Y coordinate of the mouse pointer in local (DOM content) coordinates.
+   */
+  +clientY: number;
+  /**
+   * Alias for NativeMouseEvent.clientX
+   */
+  +x: number;
+  /**
+   * Alias for NativeMouseEvent.clientY
+   */
+  +y: number;
+  /**
+   * Returns true if the control key was down when the mouse event was fired.
+   */
+  +ctrlKey: boolean;
+  /**
+   * Returns true if the shift key was down when the mouse event was fired.
+   */
+  +shiftKey: boolean;
+  /**
+   * Returns true if the alt key was down when the mouse event was fired.
+   */
+  +altKey: boolean;
+  /**
+   * Returns true if the meta key was down when the mouse event was fired.
+   */
+  +metaKey: boolean;
+  /**
+   * The button number that was pressed (if applicable) when the mouse event was fired.
+   */
+  +button: number;
+  /**
+   * The buttons being depressed (if any) when the mouse event was fired.
+   */
+  +buttons: number;
+  /**
+   * The secondary target for the event, if there is one.
+   */
+  +relatedTarget: HTMLElement;
+  // offset is proposed: https://drafts.csswg.org/cssom-view/#extensions-to-the-mouseevent-interface
+  /**
+   * The X coordinate of the mouse pointer between that event and the padding edge of the target node
+   */
+  +offsetX: number;
+  /**
+   * The Y coordinate of the mouse pointer between that event and the padding edge of the target node
+   */
+  +offsetY: number;
+}
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent
+ */
+export interface NativePointerEvent extends NativeMouseEvent {
+  /**
+   * A unique identifier for the pointer causing the event.
+   */
+  +pointerId: number;
+  /**
+   * The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer
+   */
+  +width: number;
+  /**
+   * The height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer.
+   */
+  +height: number;
+  /**
+   * The normalized pressure of the pointer input in the range 0 to 1, where 0 and 1 represent
+   * the minimum and maximum pressure the hardware is capable of detecting, respectively.
+   */
+  +pressure: number;
+  /**
+   * The normalized tangential pressure of the pointer input (also known as barrel pressure or
+   * cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control.
+   */
+  +tangentialPressure: number;
+  /**
+   * The plane angle (in degrees, in the range of -90 to 90) between the Y–Z plane and the plane
+   * containing both the pointer (e.g. pen stylus) axis and the Y axis.
+   */
+  +tiltX: number;
+  /**
+   * The plane angle (in degrees, in the range of -90 to 90) between the X–Z plane and the plane
+   * containing both the pointer (e.g. pen stylus) axis and the X axis.
+   */
+  +tiltY: number;
+  /**
+   * The clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees,
+   * with a value in the range 0 to 359.
+   */
+  +twist: number;
+  /**
+   * Indicates the device type that caused the event (mouse, pen, touch, etc.)
+   */
+  +pointerType: string;
+  /**
+   * Indicates if the pointer represents the primary pointer of this pointer type.
+   */
+  +isPrimary: boolean;
+}
+
+export type PointerEvent = SyntheticEvent<NativePointerEvent>;
+
 export type PressEvent = ResponderSyntheticEvent<
   $ReadOnly<{|
     changedTouches: $ReadOnlyArray<$PropertyType<PressEvent, 'nativeEvent'>>,
@@ -130,8 +268,24 @@ export type ScrollEvent = SyntheticEvent<
   |}>,
 >;
 
-export type SwitchChangeEvent = SyntheticEvent<
+export type BlurEvent = SyntheticEvent<
   $ReadOnly<{|
-    value: boolean,
+    target: number,
+  |}>,
+>;
+
+export type FocusEvent = SyntheticEvent<
+  $ReadOnly<{|
+    target: number,
+  |}>,
+>;
+
+export type MouseEvent = SyntheticEvent<
+  $ReadOnly<{|
+    clientX: number,
+    clientY: number,
+    pageX: number,
+    pageY: number,
+    timestamp: number,
   |}>,
 >;
diff --git a/packages/react-native-web/src/vendor/react-native/Utilities/clamp.js b/packages/react-native-web/src/vendor/react-native/Utilities/clamp.js
new file mode 100644
index 0000000000..7bed615751
--- /dev/null
+++ b/packages/react-native-web/src/vendor/react-native/Utilities/clamp.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 strict
+ */
+
+'use strict';
+
+function clamp(min: number, value: number, max: number): number {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+}
+
+module.exports = clamp;
diff --git a/packages/react-native-web/src/vendor/react-native/ViewabilityHelper/index.js b/packages/react-native-web/src/vendor/react-native/ViewabilityHelper/index.js
index b0ed947f05..850118e85c 100644
--- a/packages/react-native-web/src/vendor/react-native/ViewabilityHelper/index.js
+++ b/packages/react-native-web/src/vendor/react-native/ViewabilityHelper/index.js
@@ -7,8 +7,11 @@
  * @flow
  * @format
  */
+
 'use strict';
 
+import type {FrameMetricProps} from '../VirtualizedList/VirtualizedListProps';
+
 import invariant from 'fbjs/lib/invariant';
 
 export type ViewToken = {
@@ -17,6 +20,7 @@ export type ViewToken = {
   index: ?number,
   isViewable: boolean,
   section?: any,
+  ...
 };
 
 export type ViewabilityConfigCallbackPair = {
@@ -24,7 +28,9 @@ export type ViewabilityConfigCallbackPair = {
   onViewableItemsChanged: (info: {
     viewableItems: Array<ViewToken>,
     changed: Array<ViewToken>,
+    ...
   }) => void,
+  ...
 };
 
 export type ViewabilityConfig = {|
@@ -71,7 +77,7 @@ export type ViewabilityConfig = {|
 class ViewabilityHelper {
   _config: ViewabilityConfig;
   _hasInteracted: boolean = false;
-  _timers: Set<TimeoutID> = new Set();
+  _timers: Set<number> = new Set();
   _viewableIndices: Array<number> = [];
   _viewableItems: Map<string, ViewToken> = new Map();
 
@@ -85,6 +91,9 @@ class ViewabilityHelper {
    * Cleanup, e.g. on unmount. Clears any pending timers.
    */
   dispose() {
+    /* $FlowFixMe[incompatible-call] (>=0.63.0 site=react_native_fb) This
+     * comment suppresses an error found when Flow v0.63 was deployed. To see
+     * the error delete this comment and run Flow. */
     this._timers.forEach(clearTimeout);
   }
 
@@ -92,16 +101,27 @@ class ViewabilityHelper {
    * Determines which items are viewable based on the current metrics and config.
    */
   computeViewableItems(
-    itemCount: number,
+    props: FrameMetricProps,
     scrollOffset: number,
     viewportHeight: number,
-    getFrameMetrics: (index: number) => ?{length: number, offset: number},
-    renderRange?: {first: number, last: number}, // Optional optimization to reduce the scan size
+    getFrameMetrics: (
+      index: number,
+      props: FrameMetricProps,
+    ) => ?{
+      length: number,
+      offset: number,
+      ...
+    },
+    // Optional optimization to reduce the scan size
+    renderRange?: {
+      first: number,
+      last: number,
+      ...
+    },
   ): Array<number> {
-    const {
-      itemVisiblePercentThreshold,
-      viewAreaCoveragePercentThreshold,
-    } = this._config;
+    const itemCount = props.getItemCount(props.data);
+    const {itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold} =
+      this._config;
     const viewAreaMode = viewAreaCoveragePercentThreshold != null;
     const viewablePercentThreshold = viewAreaMode
       ? viewAreaCoveragePercentThreshold
@@ -126,7 +146,7 @@ class ViewabilityHelper {
       return [];
     }
     for (let idx = first; idx <= last; idx++) {
-      const metrics = getFrameMetrics(idx);
+      const metrics = getFrameMetrics(idx, props);
       if (!metrics) {
         continue;
       }
@@ -158,28 +178,46 @@ class ViewabilityHelper {
    * `onViewableItemsChanged` as appropriate.
    */
   onUpdate(
-    itemCount: number,
+    props: FrameMetricProps,
     scrollOffset: number,
     viewportHeight: number,
-    getFrameMetrics: (index: number) => ?{length: number, offset: number},
-    createViewToken: (index: number, isViewable: boolean) => ViewToken,
+    getFrameMetrics: (
+      index: number,
+      props: FrameMetricProps,
+    ) => ?{
+      length: number,
+      offset: number,
+      ...
+    },
+    createViewToken: (
+      index: number,
+      isViewable: boolean,
+      props: FrameMetricProps,
+    ) => ViewToken,
     onViewableItemsChanged: ({
       viewableItems: Array<ViewToken>,
       changed: Array<ViewToken>,
+      ...
     }) => void,
-    renderRange?: {first: number, last: number}, // Optional optimization to reduce the scan size
+    // Optional optimization to reduce the scan size
+    renderRange?: {
+      first: number,
+      last: number,
+      ...
+    },
   ): void {
+    const itemCount = props.getItemCount(props.data);
     if (
       (this._config.waitForInteraction && !this._hasInteracted) ||
       itemCount === 0 ||
-      !getFrameMetrics(0)
+      !getFrameMetrics(0, props)
     ) {
       return;
     }
-    let viewableIndices = [];
+    let viewableIndices: Array<number> = [];
     if (itemCount) {
       viewableIndices = this.computeViewableItems(
-        itemCount,
+        props,
         scrollOffset,
         viewportHeight,
         getFrameMetrics,
@@ -196,17 +234,25 @@ class ViewabilityHelper {
     }
     this._viewableIndices = viewableIndices;
     if (this._config.minimumViewTime) {
-      const handle = setTimeout(() => {
+      const handle: TimeoutID = setTimeout(() => {
+        /* $FlowFixMe[incompatible-call] (>=0.63.0 site=react_native_fb) This
+         * comment suppresses an error found when Flow v0.63 was deployed. To
+         * see the error delete this comment and run Flow. */
         this._timers.delete(handle);
         this._onUpdateSync(
+          props,
           viewableIndices,
           onViewableItemsChanged,
           createViewToken,
         );
       }, this._config.minimumViewTime);
+      /* $FlowFixMe[incompatible-call] (>=0.63.0 site=react_native_fb) This
+       * comment suppresses an error found when Flow v0.63 was deployed. To see
+       * the error delete this comment and run Flow. */
       this._timers.add(handle);
     } else {
       this._onUpdateSync(
+        props,
         viewableIndices,
         onViewableItemsChanged,
         createViewToken,
@@ -229,12 +275,18 @@ class ViewabilityHelper {
   }
 
   _onUpdateSync(
-    // $FlowFixMe
-    viewableIndicesToCheck,
-    // $FlowFixMe
-    onViewableItemsChanged,
-    // $FlowFixMe
-    createViewToken,
+    props: FrameMetricProps,
+    viewableIndicesToCheck: Array<number>,
+    onViewableItemsChanged: ({
+      changed: Array<ViewToken>,
+      viewableItems: Array<ViewToken>,
+      ...
+    }) => void,
+    createViewToken: (
+      index: number,
+      isViewable: boolean,
+      props: FrameMetricProps,
+    ) => ViewToken,
   ) {
     // Filter out indices that have gone out of view since this call was scheduled.
     viewableIndicesToCheck = viewableIndicesToCheck.filter(ii =>
@@ -243,7 +295,7 @@ class ViewabilityHelper {
     const prevItems = this._viewableItems;
     const nextItems = new Map(
       viewableIndicesToCheck.map(ii => {
-        const viewable = createViewToken(ii, true);
+        const viewable = createViewToken(ii, true, props);
         return [viewable.key, viewable];
       }),
     );
diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizeUtils/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizeUtils/index.js
index f696472a00..9a2dbd1266 100644
--- a/packages/react-native-web/src/vendor/react-native/VirtualizeUtils/index.js
+++ b/packages/react-native-web/src/vendor/react-native/VirtualizeUtils/index.js
@@ -10,7 +10,7 @@
 
 'use strict';
 
-import invariant from 'fbjs/lib/invariant';
+import type {FrameMetricProps} from '../VirtualizedList/VirtualizedListProps';
 
 /**
  * Used to find the indices of the frames that overlap the given offsets. Useful for finding the
@@ -19,34 +19,48 @@ import invariant from 'fbjs/lib/invariant';
  */
 export function elementsThatOverlapOffsets(
   offsets: Array<number>,
-  itemCount: number,
-  getFrameMetrics: (index: number) => {
+  props: FrameMetricProps,
+  getFrameMetrics: (
+    index: number,
+    props: FrameMetricProps,
+  ) => {
     length: number,
     offset: number,
     ...
   },
+  zoomScale: number = 1,
 ): Array<number> {
-  const out = [];
-  let outLength = 0;
-  for (let ii = 0; ii < itemCount; ii++) {
-    const frame = getFrameMetrics(ii);
-    const trailingOffset = frame.offset + frame.length;
-    for (let kk = 0; kk < offsets.length; kk++) {
-      if (out[kk] == null && trailingOffset >= offsets[kk]) {
-        out[kk] = ii;
-        outLength++;
-        if (kk === offsets.length - 1) {
-          invariant(
-            outLength === offsets.length,
-            'bad offsets input, should be in increasing order: %s',
-            JSON.stringify(offsets),
-          );
-          return out;
-        }
+  const itemCount = props.getItemCount(props.data);
+  const result = [];
+  for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
+    const currentOffset = offsets[offsetIndex];
+    let left = 0;
+    let right = itemCount - 1;
+
+    while (left <= right) {
+      // eslint-disable-next-line no-bitwise
+      const mid = left + ((right - left) >>> 1);
+      const frame = getFrameMetrics(mid, props);
+      const scaledOffsetStart = frame.offset * zoomScale;
+      const scaledOffsetEnd = (frame.offset + frame.length) * zoomScale;
+
+      // We want the first frame that contains the offset, with inclusive bounds. Thus, for the
+      // first frame the scaledOffsetStart is inclusive, while for other frames it is exclusive.
+      if (
+        (mid === 0 && currentOffset < scaledOffsetStart) ||
+        (mid !== 0 && currentOffset <= scaledOffsetStart)
+      ) {
+        right = mid - 1;
+      } else if (currentOffset > scaledOffsetEnd) {
+        left = mid + 1;
+      } else {
+        result[offsetIndex] = mid;
+        break;
       }
     }
   }
-  return out;
+
+  return result;
 }
 
 /**
@@ -85,16 +99,17 @@ export function newRangeCount(
  * biased in the direction of scroll.
  */
 export function computeWindowedRenderLimits(
-  data: any,
-  getItemCount: (data: any) => number,
+  props: FrameMetricProps,
   maxToRenderPerBatch: number,
   windowSize: number,
   prev: {
     first: number,
     last: number,
-    ...
   },
-  getFrameMetricsApprox: (index: number) => {
+  getFrameMetricsApprox: (
+    index: number,
+    props: FrameMetricProps,
+  ) => {
     length: number,
     offset: number,
     ...
@@ -104,18 +119,18 @@ export function computeWindowedRenderLimits(
     offset: number,
     velocity: number,
     visibleLength: number,
+    zoomScale: number,
     ...
   },
 ): {
   first: number,
   last: number,
-  ...
 } {
-  const itemCount = getItemCount(data);
+  const itemCount = props.getItemCount(props.data);
   if (itemCount === 0) {
-    return prev;
+    return {first: 0, last: -1};
   }
-  const {offset, velocity, visibleLength} = scrollMetrics;
+  const {offset, velocity, visibleLength, zoomScale = 1} = scrollMetrics;
 
   // Start with visible area, then compute maximum overscan region by expanding from there, biased
   // in the direction of scroll. Total overscan area is capped, which should cap memory consumption
@@ -136,7 +151,8 @@ export function computeWindowedRenderLimits(
   );
   const overscanEnd = Math.max(0, visibleEnd + leadFactor * overscanLength);
 
-  const lastItemOffset = getFrameMetricsApprox(itemCount - 1).offset;
+  const lastItemOffset =
+    getFrameMetricsApprox(itemCount - 1, props).offset * zoomScale;
   if (lastItemOffset < overscanBegin) {
     // Entire list is before our overscan window
     return {
@@ -148,8 +164,9 @@ export function computeWindowedRenderLimits(
   // Find the indices that correspond to the items at the render boundaries we're targeting.
   let [overscanFirst, first, last, overscanLast] = elementsThatOverlapOffsets(
     [overscanBegin, visibleBegin, visibleEnd, overscanEnd],
-    itemCount,
+    props,
     getFrameMetricsApprox,
+    zoomScale,
   );
   overscanFirst = overscanFirst == null ? 0 : overscanFirst;
   first = first == null ? Math.max(0, overscanFirst) : first;
@@ -238,4 +255,4 @@ export function keyExtractor(item: any, index: number): string {
     return item.id;
   }
   return String(index);
-}
\ No newline at end of file
+}
diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/CellRenderMask.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/CellRenderMask.js
new file mode 100644
index 0000000000..a234607ca6
--- /dev/null
+++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/CellRenderMask.js
@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ * @format
+ */
+
+import invariant from 'fbjs/lib/invariant';
+
+export type CellRegion = {
+  first: number,
+  last: number,
+  isSpacer: boolean,
+};
+
+export class CellRenderMask {
+  _numCells: number;
+  _regions: Array<CellRegion>;
+
+  constructor(numCells: number) {
+    invariant(
+      numCells >= 0,
+      'CellRenderMask must contain a non-negative number os cells',
+    );
+
+    this._numCells = numCells;
+
+    if (numCells === 0) {
+      this._regions = [];
+    } else {
+      this._regions = [
+        {
+          first: 0,
+          last: numCells - 1,
+          isSpacer: true,
+        },
+      ];
+    }
+  }
+
+  enumerateRegions(): $ReadOnlyArray<CellRegion> {
+    return this._regions;
+  }
+
+  addCells(cells: {first: number, last: number}): void {
+    invariant(
+      cells.first >= 0 &&
+        cells.first < this._numCells &&
+        cells.last >= -1 &&
+        cells.last < this._numCells &&
+        cells.last >= cells.first - 1,
+      'CellRenderMask.addCells called with invalid cell range',
+    );
+
+    // VirtualizedList uses inclusive ranges, where zero-count states are
+    // possible. E.g. [0, -1] for no cells, starting at 0.
+    if (cells.last < cells.first) {
+      return;
+    }
+
+    const [firstIntersect, firstIntersectIdx] = this._findRegion(cells.first);
+    const [lastIntersect, lastIntersectIdx] = this._findRegion(cells.last);
+
+    // Fast-path if the cells to add are already all present in the mask. We
+    // will otherwise need to do some mutation.
+    if (firstIntersectIdx === lastIntersectIdx && !firstIntersect.isSpacer) {
+      return;
+    }
+
+    // We need to replace the existing covered regions with 1-3 new regions
+    // depending whether we need to split spacers out of overlapping regions.
+    const newLeadRegion: Array<CellRegion> = [];
+    const newTailRegion: Array<CellRegion> = [];
+    const newMainRegion: CellRegion = {
+      ...cells,
+      isSpacer: false,
+    };
+
+    if (firstIntersect.first < newMainRegion.first) {
+      if (firstIntersect.isSpacer) {
+        newLeadRegion.push({
+          first: firstIntersect.first,
+          last: newMainRegion.first - 1,
+          isSpacer: true,
+        });
+      } else {
+        newMainRegion.first = firstIntersect.first;
+      }
+    }
+
+    if (lastIntersect.last > newMainRegion.last) {
+      if (lastIntersect.isSpacer) {
+        newTailRegion.push({
+          first: newMainRegion.last + 1,
+          last: lastIntersect.last,
+          isSpacer: true,
+        });
+      } else {
+        newMainRegion.last = lastIntersect.last;
+      }
+    }
+
+    const replacementRegions: Array<CellRegion> = [
+      ...newLeadRegion,
+      newMainRegion,
+      ...newTailRegion,
+    ];
+    const numRegionsToDelete = lastIntersectIdx - firstIntersectIdx + 1;
+    this._regions.splice(
+      firstIntersectIdx,
+      numRegionsToDelete,
+      ...replacementRegions,
+    );
+  }
+
+  numCells(): number {
+    return this._numCells;
+  }
+
+  equals(other: CellRenderMask): boolean {
+    return (
+      this._numCells === other._numCells &&
+      this._regions.length === other._regions.length &&
+      this._regions.every(
+        (region, i) =>
+          region.first === other._regions[i].first &&
+          region.last === other._regions[i].last &&
+          region.isSpacer === other._regions[i].isSpacer,
+      )
+    );
+  }
+
+  _findRegion(cellIdx: number): [CellRegion, number] {
+    let firstIdx = 0;
+    let lastIdx = this._regions.length - 1;
+
+    while (firstIdx <= lastIdx) {
+      const middleIdx = Math.floor((firstIdx + lastIdx) / 2);
+      const middleRegion = this._regions[middleIdx];
+
+      if (cellIdx >= middleRegion.first && cellIdx <= middleRegion.last) {
+        return [middleRegion, middleIdx];
+      } else if (cellIdx < middleRegion.first) {
+        lastIdx = middleIdx - 1;
+      } else if (cellIdx > middleRegion.last) {
+        firstIdx = middleIdx + 1;
+      }
+    }
+
+    invariant(false, `A region was not found containing cellIdx ${cellIdx}`);
+  }
+}
diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/ChildListCollection.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/ChildListCollection.js
new file mode 100644
index 0000000000..dc8cfe7c1f
--- /dev/null
+++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/ChildListCollection.js
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ * @format
+ */
+
+import invariant from 'fbjs/lib/invariant';
+
+export default class ChildListCollection<TList> {
+  _cellKeyToChildren: Map<string, Set<TList>> = new Map();
+  _childrenToCellKey: Map<TList, string> = new Map();
+
+  add(list: TList, cellKey: string): void {
+    invariant(
+      !this._childrenToCellKey.has(list),
+      'Trying to add already present child list',
+    );
+
+    const cellLists = this._cellKeyToChildren.get(cellKey) ?? new Set();
+    cellLists.add(list);
+    this._cellKeyToChildren.set(cellKey, cellLists);
+
+    this._childrenToCellKey.set(list, cellKey);
+  }
+
+  remove(list: TList): void {
+    const cellKey = this._childrenToCellKey.get(list);
+    invariant(cellKey != null, 'Trying to remove non-present child list');
+    this._childrenToCellKey.delete(list);
+
+    const cellLists = this._cellKeyToChildren.get(cellKey);
+    invariant(cellLists, '_cellKeyToChildren should contain cellKey');
+    cellLists.delete(list);
+
+    if (cellLists.size === 0) {
+      this._cellKeyToChildren.delete(cellKey);
+    }
+  }
+
+  forEach(fn: TList => void): void {
+    for (const listSet of this._cellKeyToChildren.values()) {
+      for (const list of listSet) {
+        fn(list);
+      }
+    }
+  }
+
+  forEachInCell(cellKey: string, fn: TList => void): void {
+    const listSet = this._cellKeyToChildren.get(cellKey) ?? [];
+    for (const list of listSet) {
+      fn(list);
+    }
+  }
+
+  anyInCell(cellKey: string, fn: TList => boolean): boolean {
+    const listSet = this._cellKeyToChildren.get(cellKey) ?? [];
+    for (const list of listSet) {
+      if (fn(list)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  size(): number {
+    return this._childrenToCellKey.size;
+  }
+}
diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/StateSafePureComponent.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/StateSafePureComponent.js
new file mode 100644
index 0000000000..145a4ebce0
--- /dev/null
+++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/StateSafePureComponent.js
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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
+ * @format
+ */
+
+import invariant from 'fbjs/lib/invariant';
+import * as React from 'react';
+
+/**
+ * `setState` is called asynchronously, and should not rely on the value of
+ * `this.props` or `this.state`:
+ * https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
+ *
+ * SafePureComponent adds runtime enforcement, to catch cases where these
+ * variables are read in a state updater function, instead of the ones passed
+ * in.
+ */
+export default class StateSafePureComponent<
+  Props,
+  State: interface {},
+> extends React.PureComponent<Props, State> {
+  _inAsyncStateUpdate = false;
+
+  constructor(props: Props) {
+    super(props);
+    this._installSetStateHooks();
+  }
+
+  setState(
+    partialState: ?($Shape<State> | ((State, Props) => ?$Shape<State>)),
+    callback?: () => mixed,
+  ): void {
+    if (typeof partialState === 'function') {
+      super.setState((state, props) => {
+        this._inAsyncStateUpdate = true;
+        let ret;
+        try {
+          ret = partialState(state, props);
+        } catch (err) {
+          throw err;
+        } finally {
+          this._inAsyncStateUpdate = false;
+        }
+        return ret;
+      }, callback);
+    } else {
+      super.setState(partialState, callback);
+    }
+  }
+
+  _installSetStateHooks() {
+    const that = this;
+    let {props, state} = this;
+
+    Object.defineProperty(this, 'props', {
+      get() {
+        invariant(
+          !that._inAsyncStateUpdate,
+          '"this.props" should not be accessed during state updates',
+        );
+        return props;
+      },
+      set(newProps: Props) {
+        props = newProps;
+      },
+    });
+    Object.defineProperty(this, 'state', {
+      get() {
+        invariant(
+          !that._inAsyncStateUpdate,
+          '"this.state" should not be acceessed during state updates',
+        );
+        return state;
+      },
+      set(newState: State) {
+        state = newState;
+      },
+    });
+  }
+}
diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/VirtualizedListCellRenderer.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/VirtualizedListCellRenderer.js
new file mode 100644
index 0000000000..b251487513
--- /dev/null
+++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/VirtualizedListCellRenderer.js
@@ -0,0 +1,247 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import type { LayoutEvent } from '../../../types';
+import type {
+  FocusEvent,
+} from '../Types/CoreEventTypes';
+import type {CellRendererProps, RenderItemType} from './VirtualizedListProps';
+
+import View, { type ViewProps } from '../../../exports/View';
+import StyleSheet from '../../../exports/StyleSheet';
+import {VirtualizedListCellContextProvider} from './VirtualizedListContext.js';
+import invariant from 'fbjs/lib/invariant';
+import * as React from 'react';
+
+type ViewStyleProp = $PropertyType<ViewProps, 'style'>;
+
+export type Props<ItemT> = {
+  CellRendererComponent?: ?React.ComponentType<CellRendererProps<ItemT>>,
+  ItemSeparatorComponent: ?React.ComponentType<
+    any | {highlighted: boolean, leadingItem: ?ItemT},
+  >,
+  ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  cellKey: string,
+  horizontal: ?boolean,
+  index: number,
+  inversionStyle: ViewStyleProp,
+  item: ItemT,
+  onCellLayout?: (event: LayoutEvent, cellKey: string, index: number) => void,
+  onCellFocusCapture?: (event: FocusEvent) => void,
+  onUnmount: (cellKey: string) => void,
+  onUpdateSeparators: (
+    cellKeys: Array<?string>,
+    props: $Shape<SeparatorProps<ItemT>>,
+  ) => void,
+  prevCellKey: ?string,
+  renderItem?: ?RenderItemType<ItemT>,
+  ...
+};
+
+type SeparatorProps<ItemT> = $ReadOnly<{|
+  highlighted: boolean,
+  leadingItem: ?ItemT,
+|}>;
+
+type State<ItemT> = {
+  separatorProps: SeparatorProps<ItemT>,
+  ...
+};
+
+export default class CellRenderer<ItemT> extends React.Component<
+  Props<ItemT>,
+  State<ItemT>,
+> {
+  state: State<ItemT> = {
+    separatorProps: {
+      highlighted: false,
+      leadingItem: this.props.item,
+    },
+  };
+
+  static getDerivedStateFromProps(
+    props: Props<ItemT>,
+    prevState: State<ItemT>,
+  ): ?State<ItemT> {
+    return {
+      separatorProps: {
+        ...prevState.separatorProps,
+        leadingItem: props.item,
+      },
+    };
+  }
+
+  // TODO: consider factoring separator stuff out of VirtualizedList into FlatList since it's not
+  // reused by SectionList and we can keep VirtualizedList simpler.
+  // $FlowFixMe[missing-local-annot]
+  _separators = {
+    highlight: () => {
+      const {cellKey, prevCellKey} = this.props;
+      this.props.onUpdateSeparators([cellKey, prevCellKey], {
+        highlighted: true,
+      });
+    },
+    unhighlight: () => {
+      const {cellKey, prevCellKey} = this.props;
+      this.props.onUpdateSeparators([cellKey, prevCellKey], {
+        highlighted: false,
+      });
+    },
+    updateProps: (
+      select: 'leading' | 'trailing',
+      newProps: SeparatorProps<ItemT>,
+    ) => {
+      const {cellKey, prevCellKey} = this.props;
+      this.props.onUpdateSeparators(
+        [select === 'leading' ? prevCellKey : cellKey],
+        newProps,
+      );
+    },
+  };
+
+  updateSeparatorProps(newProps: SeparatorProps<ItemT>) {
+    this.setState(state => ({
+      separatorProps: {...state.separatorProps, ...newProps},
+    }));
+  }
+
+  componentWillUnmount() {
+    this.props.onUnmount(this.props.cellKey);
+  }
+
+  _onLayout = (nativeEvent: LayoutEvent): void => {
+    this.props.onCellLayout &&
+      this.props.onCellLayout(
+        nativeEvent,
+        this.props.cellKey,
+        this.props.index,
+      );
+  };
+
+  _renderElement(
+    renderItem: ?RenderItemType<ItemT>,
+    ListItemComponent: any,
+    item: ItemT,
+    index: number,
+  ): React.Node {
+    if (renderItem && ListItemComponent) {
+      console.warn(
+        'VirtualizedList: Both ListItemComponent and renderItem props are present. ListItemComponent will take' +
+          ' precedence over renderItem.',
+      );
+    }
+
+    if (ListItemComponent) {
+      /* $FlowFixMe[not-a-component] (>=0.108.0 site=react_native_fb) This
+       * comment suppresses an error found when Flow v0.108 was deployed. To
+       * see the error, delete this comment and run Flow. */
+      /* $FlowFixMe[incompatible-type-arg] (>=0.108.0 site=react_native_fb)
+       * This comment suppresses an error found when Flow v0.108 was deployed.
+       * To see the error, delete this comment and run Flow. */
+      return React.createElement(ListItemComponent, {
+        item,
+        index,
+        separators: this._separators,
+      });
+    }
+
+    if (renderItem) {
+      return renderItem({
+        item,
+        index,
+        separators: this._separators,
+      });
+    }
+
+    invariant(
+      false,
+      'VirtualizedList: Either ListItemComponent or renderItem props are required but none were found.',
+    );
+  }
+
+  render(): React.Node {
+    const {
+      CellRendererComponent,
+      ItemSeparatorComponent,
+      ListItemComponent,
+      cellKey,
+      horizontal,
+      item,
+      index,
+      inversionStyle,
+      onCellFocusCapture,
+      onCellLayout,
+      renderItem,
+    } = this.props;
+    const element = this._renderElement(
+      renderItem,
+      ListItemComponent,
+      item,
+      index,
+    );
+
+    // NOTE: that when this is a sticky header, `onLayout` will get automatically extracted and
+    // called explicitly by `ScrollViewStickyHeader`.
+    const itemSeparator: React.Node = React.isValidElement(
+      ItemSeparatorComponent,
+    )
+      ? // $FlowFixMe[incompatible-type]
+        ItemSeparatorComponent
+      : // $FlowFixMe[incompatible-type]
+        ItemSeparatorComponent && (
+          <ItemSeparatorComponent {...this.state.separatorProps} />
+        );
+    const cellStyle = inversionStyle
+      ? horizontal
+        ? [styles.rowReverse, inversionStyle]
+        : [styles.columnReverse, inversionStyle]
+      : horizontal
+      ? [styles.row, inversionStyle]
+      : inversionStyle;
+    const result = !CellRendererComponent ? (
+      <View
+        style={cellStyle}
+        onFocusCapture={onCellFocusCapture}
+        {...(onCellLayout && {onLayout: this._onLayout})}>
+        {element}
+        {itemSeparator}
+      </View>
+    ) : (
+      <CellRendererComponent
+        cellKey={cellKey}
+        index={index}
+        item={item}
+        style={cellStyle}
+        onFocusCapture={onCellFocusCapture}
+        {...(onCellLayout && {onLayout: this._onLayout})}>
+        {element}
+        {itemSeparator}
+      </CellRendererComponent>
+    );
+
+    return (
+      <VirtualizedListCellContextProvider cellKey={this.props.cellKey}>
+        {result}
+      </VirtualizedListCellContextProvider>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+  },
+  rowReverse: {
+    flexDirection: 'row-reverse',
+  },
+  columnReverse: {
+    flexDirection: 'column-reverse',
+  },
+});
diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/VirtualizedListContext.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/VirtualizedListContext.js
index 9f71928159..6b7b9108ab 100644
--- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/VirtualizedListContext.js
+++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/VirtualizedListContext.js
@@ -8,37 +8,13 @@
  * @format
  */
 
-import type VirtualizedList from './';
+import typeof VirtualizedList from '../VirtualizedList';
+
 import * as React from 'react';
-import {useMemo, useContext} from 'react';
+import {useContext, useMemo} from 'react';
 
 const __DEV__ = process.env.NODE_ENV !== 'production';
 
-type Frame = $ReadOnly<{
-  offset: number,
-  length: number,
-  index: number,
-  inLayout: boolean,
-}>;
-
-export type ChildListState = $ReadOnly<{
-  first: number,
-  last: number,
-  frames: {[key: number]: Frame},
-}>;
-
-// Data propagated through nested lists (regardless of orientation) that is
-// useful for producing diagnostics for usage errors involving nesting (e.g
-// missing/duplicate keys).
-export type ListDebugInfo = $ReadOnly<{
-  cellKey: string,
-  listKey: string,
-  parent: ?ListDebugInfo,
-  // We include all ancestors regardless of orientation, so this is not always
-  // identical to the child's orientation.
-  horizontal: boolean,
-}>;
-
 type Context = $ReadOnly<{
   cellKey: ?string,
   getScrollMetrics: () => {
@@ -49,26 +25,21 @@ type Context = $ReadOnly<{
     timestamp: number,
     velocity: number,
     visibleLength: number,
+    zoomScale: number,
   },
   horizontal: ?boolean,
-  getOutermostParentListRef: () => VirtualizedList,
-  getNestedChildState: string => ?ChildListState,
+  getOutermostParentListRef: () => React.ElementRef<VirtualizedList>,
   registerAsNestedChild: ({
     cellKey: string,
-    key: string,
-    ref: VirtualizedList,
-    parentDebugInfo: ListDebugInfo,
-  }) => ?ChildListState,
+    ref: React.ElementRef<VirtualizedList>,
+  }) => void,
   unregisterAsNestedChild: ({
-    key: string,
-    state: ChildListState,
+    ref: React.ElementRef<VirtualizedList>,
   }) => void,
-  debugInfo: ListDebugInfo,
 }>;
 
-export const VirtualizedListContext: React.Context<?Context> = React.createContext(
-  null,
-);
+export const VirtualizedListContext: React.Context<?Context> =
+  React.createContext(null);
 if (__DEV__) {
   VirtualizedListContext.displayName = 'VirtualizedListContext';
 }
@@ -105,27 +76,15 @@ export function VirtualizedListContextProvider({
       getScrollMetrics: value.getScrollMetrics,
       horizontal: value.horizontal,
       getOutermostParentListRef: value.getOutermostParentListRef,
-      getNestedChildState: value.getNestedChildState,
       registerAsNestedChild: value.registerAsNestedChild,
       unregisterAsNestedChild: value.unregisterAsNestedChild,
-      debugInfo: {
-        cellKey: value.debugInfo.cellKey,
-        horizontal: value.debugInfo.horizontal,
-        listKey: value.debugInfo.listKey,
-        parent: value.debugInfo.parent,
-      },
     }),
     [
       value.getScrollMetrics,
       value.horizontal,
       value.getOutermostParentListRef,
-      value.getNestedChildState,
       value.registerAsNestedChild,
       value.unregisterAsNestedChild,
-      value.debugInfo.cellKey,
-      value.debugInfo.horizontal,
-      value.debugInfo.listKey,
-      value.debugInfo.parent,
     ],
   );
   return (
@@ -145,10 +104,14 @@ export function VirtualizedListCellContextProvider({
   cellKey: string,
   children: React.Node,
 }): React.Node {
-  const context = useContext(VirtualizedListContext);
+  // Avoid setting a newly created context object if the values are identical.
+  const currContext = useContext(VirtualizedListContext);
+  const context = useMemo(
+    () => (currContext == null ? null : {...currContext, cellKey}),
+    [currContext, cellKey],
+  );
   return (
-    <VirtualizedListContext.Provider
-      value={context == null ? null : {...context, cellKey}}>
+    <VirtualizedListContext.Provider value={context}>
       {children}
     </VirtualizedListContext.Provider>
   );
diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/VirtualizedListProps.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/VirtualizedListProps.js
new file mode 100644
index 0000000000..e2d511ccc7
--- /dev/null
+++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/VirtualizedListProps.js
@@ -0,0 +1,307 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import ScrollView from '../../../exports/ScrollView';
+import type { LayoutEvent } from '../../../types';
+import type {
+  FocusEvent,
+} from '../Types/CoreEventTypes';
+import { type ViewProps } from '../../../exports/View';
+type ViewStyleProp = $PropertyType<ViewProps, 'style'>;
+import type {
+  ViewabilityConfig,
+  ViewabilityConfigCallbackPair,
+  ViewToken,
+} from '../ViewabilityHelper';
+
+import * as React from 'react';
+
+export type Item = any;
+
+export type Separators = {
+  highlight: () => void,
+  unhighlight: () => void,
+  updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
+  ...
+};
+
+export type RenderItemProps<ItemT> = {
+  item: ItemT,
+  index: number,
+  separators: Separators,
+  ...
+};
+
+export type CellRendererProps<ItemT> = $ReadOnly<{
+  cellKey: string,
+  children: React.Node,
+  index: number,
+  item: ItemT,
+  onFocusCapture?: (event: FocusEvent) => void,
+  onLayout?: (event: LayoutEvent) => void,
+  style: ViewStyleProp,
+}>;
+
+export type RenderItemType<ItemT> = (
+  info: RenderItemProps<ItemT>,
+) => React.Node;
+
+type RequiredProps = {|
+  /**
+   * The default accessor functions assume this is an Array<{key: string} | {id: string}> but you can override
+   * getItem, getItemCount, and keyExtractor to handle any type of index-based data.
+   */
+  data?: any,
+  /**
+   * A generic accessor for extracting an item from any sort of data blob.
+   */
+  getItem: (data: any, index: number) => ?Item,
+  /**
+   * Determines how many items are in the data blob.
+   */
+  getItemCount: (data: any) => number,
+|};
+type OptionalProps = {|
+  renderItem?: ?RenderItemType<Item>,
+  /**
+   * `debug` will turn on extra logging and visual overlays to aid with debugging both usage and
+   * implementation, but with a significant perf hit.
+   */
+  debug?: ?boolean,
+  /**
+   * DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully
+   * unmounts react instances that are outside of the render window. You should only need to disable
+   * this for debugging purposes. Defaults to false.
+   */
+  disableVirtualization?: ?boolean,
+  /**
+   * A marker property for telling the list to re-render (since it implements `PureComponent`). If
+   * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the
+   * `data` prop, stick it here and treat it immutably.
+   */
+  extraData?: any,
+  // e.g. height, y
+  getItemLayout?: (
+    data: any,
+    index: number,
+  ) => {
+    length: number,
+    offset: number,
+    index: number,
+    ...
+  },
+  horizontal?: ?boolean,
+  /**
+   * How many items to render in the initial batch. This should be enough to fill the screen but not
+   * much more. Note these items will never be unmounted as part of the windowed rendering in order
+   * to improve perceived performance of scroll-to-top actions.
+   */
+  initialNumToRender?: ?number,
+  /**
+   * Instead of starting at the top with the first item, start at `initialScrollIndex`. This
+   * disables the "scroll to top" optimization that keeps the first `initialNumToRender` items
+   * always rendered and immediately renders the items starting at this initial index. Requires
+   * `getItemLayout` to be implemented.
+   */
+  initialScrollIndex?: ?number,
+  /**
+   * Reverses the direction of scroll. Uses scale transforms of -1.
+   */
+  inverted?: ?boolean,
+  keyExtractor?: ?(item: Item, index: number) => string,
+  /**
+   * CellRendererComponent allows customizing how cells rendered by
+   * `renderItem`/`ListItemComponent` are wrapped when placed into the
+   * underlying ScrollView. This component must accept event handlers which
+   * notify VirtualizedList of changes within the cell.
+   */
+  CellRendererComponent?: ?React.ComponentType<CellRendererProps<Item>>,
+  /**
+   * Rendered in between each item, but not at the top or bottom. By default, `highlighted` and
+   * `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight`
+   * which will update the `highlighted` prop, but you can also add custom props with
+   * `separators.updateProps`.
+   */
+  ItemSeparatorComponent?: ?React.ComponentType<any>,
+  /**
+   * Takes an item from `data` and renders it into the list. Example usage:
+   *
+   *     <FlatList
+   *       ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (
+   *         <View style={[style.separator, highlighted && {marginLeft: 0}]} />
+   *       )}
+   *       data={[{title: 'Title Text', key: 'item1'}]}
+   *       ListItemComponent={({item, separators}) => (
+   *         <TouchableHighlight
+   *           onPress={() => this._onPress(item)}
+   *           onShowUnderlay={separators.highlight}
+   *           onHideUnderlay={separators.unhighlight}>
+   *           <View style={{backgroundColor: 'white'}}>
+   *             <Text>{item.title}</Text>
+   *           </View>
+   *         </TouchableHighlight>
+   *       )}
+   *     />
+   *
+   * Provides additional metadata like `index` if you need it, as well as a more generic
+   * `separators.updateProps` function which let's you set whatever props you want to change the
+   * rendering of either the leading separator or trailing separator in case the more common
+   * `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for
+   * your use-case.
+   */
+  ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  /**
+   * Rendered when the list is empty. Can be a React Component Class, a render function, or
+   * a rendered element.
+   */
+  ListEmptyComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  /**
+   * Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
+   * a rendered element.
+   */
+  ListFooterComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  /**
+   * Styling for internal View for ListFooterComponent
+   */
+  ListFooterComponentStyle?: ViewStyleProp,
+  /**
+   * Rendered at the top of all the items. Can be a React Component Class, a render function, or
+   * a rendered element.
+   */
+  ListHeaderComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  /**
+   * Styling for internal View for ListHeaderComponent
+   */
+  ListHeaderComponentStyle?: ViewStyleProp,
+  /**
+   * The maximum number of items to render in each incremental render batch. The more rendered at
+   * once, the better the fill rate, but responsiveness may suffer because rendering content may
+   * interfere with responding to button taps or other interactions.
+   */
+  maxToRenderPerBatch?: ?number,
+  /**
+   * Called once when the scroll position gets within within `onEndReachedThreshold`
+   * from the logical end of the list.
+   */
+  onEndReached?: ?(info: {distanceFromEnd: number, ...}) => void,
+  /**
+   * How far from the end (in units of visible length of the list) the trailing edge of the
+   * list must be from the end of the content to trigger the `onEndReached` callback.
+   * Thus, a value of 0.5 will trigger `onEndReached` when the end of the content is
+   * within half the visible length of the list.
+   */
+  onEndReachedThreshold?: ?number,
+  /**
+   * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
+   * sure to also set the `refreshing` prop correctly.
+   */
+  onRefresh?: ?() => void,
+  /**
+   * Used to handle failures when scrolling to an index that has not been measured yet. Recommended
+   * action is to either compute your own offset and `scrollTo` it, or scroll as far as possible and
+   * then try again after more items have been rendered.
+   */
+  onScrollToIndexFailed?: ?(info: {
+    index: number,
+    highestMeasuredFrameIndex: number,
+    averageItemLength: number,
+    ...
+  }) => void,
+  /**
+   * Called once when the scroll position gets within within `onStartReachedThreshold`
+   * from the logical start of the list.
+   */
+  onStartReached?: ?(info: {distanceFromStart: number, ...}) => void,
+  /**
+   * How far from the start (in units of visible length of the list) the leading edge of the
+   * list must be from the start of the content to trigger the `onStartReached` callback.
+   * Thus, a value of 0.5 will trigger `onStartReached` when the start of the content is
+   * within half the visible length of the list.
+   */
+  onStartReachedThreshold?: ?number,
+  /**
+   * Called when the viewability of rows changes, as defined by the
+   * `viewabilityConfig` prop.
+   */
+  onViewableItemsChanged?: ?(info: {
+    viewableItems: Array<ViewToken>,
+    changed: Array<ViewToken>,
+    ...
+  }) => void,
+  persistentScrollbar?: ?boolean,
+  /**
+   * Set this when offset is needed for the loading indicator to show correctly.
+   */
+  progressViewOffset?: number,
+  /**
+   * A custom refresh control element. When set, it overrides the default
+   * <RefreshControl> component built internally. The onRefresh and refreshing
+   * props are also ignored. Only works for vertical VirtualizedList.
+   */
+  refreshControl?: ?React.Element<any>,
+  /**
+   * Set this true while waiting for new data from a refresh.
+   */
+  refreshing?: ?boolean,
+  /**
+   * Note: may have bugs (missing content) in some circumstances - use at your own risk.
+   *
+   * This may improve scroll performance for large lists.
+   */
+  removeClippedSubviews?: boolean,
+  /**
+   * Render a custom scroll component, e.g. with a differently styled `RefreshControl`.
+   */
+  renderScrollComponent?: (props: Object) => React.Element<any>,
+  /**
+   * Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
+   * screen. Similar fill rate/responsiveness tradeoff as `maxToRenderPerBatch`.
+   */
+  updateCellsBatchingPeriod?: ?number,
+  /**
+   * See `ViewabilityHelper` for flow type and further documentation.
+   */
+  viewabilityConfig?: ViewabilityConfig,
+  /**
+   * List of ViewabilityConfig/onViewableItemsChanged pairs. A specific onViewableItemsChanged
+   * will be called when its corresponding ViewabilityConfig's conditions are met.
+   */
+  viewabilityConfigCallbackPairs?: Array<ViewabilityConfigCallbackPair>,
+  /**
+   * Determines the maximum number of items rendered outside of the visible area, in units of
+   * visible lengths. So if your list fills the screen, then `windowSize={21}` (the default) will
+   * render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing
+   * this number will reduce memory consumption and may improve performance, but will increase the
+   * chance that fast scrolling may reveal momentary blank areas of unrendered content.
+   */
+  windowSize?: ?number,
+  /**
+   * The legacy implementation is no longer supported.
+   */
+  legacyImplementation?: empty,
+|};
+
+export type Props = {|
+  ...React.ElementConfig<typeof ScrollView>,
+  ...RequiredProps,
+  ...OptionalProps,
+|};
+
+/**
+ * Subset of properties needed to calculate frame metrics
+ */
+export type FrameMetricProps = {
+  data: RequiredProps['data'],
+  getItemCount: RequiredProps['getItemCount'],
+  getItem: RequiredProps['getItem'],
+  getItemLayout?: OptionalProps['getItemLayout'],
+  keyExtractor?: OptionalProps['keyExtractor'],
+  ...
+};
diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
index 5c4196dc49..98a9776a7e 100644
--- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
+++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
@@ -8,63 +8,61 @@
  * @format
  */
 
-import Batchinator from '../Batchinator';
-import FillRateHelper from '../FillRateHelper';
+import type { LayoutEvent } from '../../../types';
+import type {
+  ScrollEvent,
+} from '../Types/CoreEventTypes';
+import type {ViewToken} from '../ViewabilityHelper';
+import type {
+  FrameMetricProps,
+  Item,
+  Props,
+  RenderItemProps,
+  RenderItemType,
+  Separators,
+} from './VirtualizedListProps';
+
 import RefreshControl from '../../../exports/RefreshControl';
 import ScrollView from '../../../exports/ScrollView';
+import View, { type ViewProps } from '../../../exports/View';
 import StyleSheet from '../../../exports/StyleSheet';
-import View from '../../../exports/View';
-import ViewabilityHelper from '../ViewabilityHelper';
+import findNodeHandle from '../../../exports/findNodeHandle';
 
-const flattenStyle = StyleSheet.flatten;
+import Batchinator from '../Batchinator';
+import clamp from '../Utilities/clamp';
 import infoLog from '../infoLog';
-import invariant from 'fbjs/lib/invariant';
-
-import {
-  keyExtractor as defaultKeyExtractor,
-  computeWindowedRenderLimits,
-} from '../VirtualizeUtils';
-
-import * as React from 'react';
-type ScrollResponderType = any;
-import type { ViewProps } from '../../../exports/View';
-type ViewStyleProp = $PropertyType<ViewProps, 'style'>;
-import type {
-  ViewabilityConfig,
-  ViewToken,
-  ViewabilityConfigCallbackPair,
-} from '../ViewabilityHelper';
+import {CellRenderMask} from './CellRenderMask';
+import ChildListCollection from './ChildListCollection';
+import FillRateHelper from '../FillRateHelper';
+import StateSafePureComponent from './StateSafePureComponent';
+import ViewabilityHelper from '../ViewabilityHelper';
+import CellRenderer from './VirtualizedListCellRenderer';
 import {
   VirtualizedListCellContextProvider,
   VirtualizedListContext,
   VirtualizedListContextProvider,
-  type ChildListState,
-  type ListDebugInfo,
 } from './VirtualizedListContext.js';
+import {
+  computeWindowedRenderLimits,
+  keyExtractor as defaultKeyExtractor,
+} from '../VirtualizeUtils';
+import invariant from 'fbjs/lib/invariant';
+import nullthrows from 'nullthrows';
+import * as React from 'react';
 
-type Item = any;
+export type {RenderItemProps, RenderItemType, Separators};
 
 const __DEV__ = process.env.NODE_ENV !== 'production';
 
 const SCROLL_WHEEL_SENSITIVITY = 0.5;
 
-export type Separators = {
-  highlight: () => void,
-  unhighlight: () => void,
-  updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
-  ...
-};
+const ON_EDGE_REACHED_EPSILON = 0.001;
 
-export type RenderItemProps<ItemT> = {
-  item: ItemT,
-  index: number,
-  separators: Separators,
-  ...
-};
+let _usedIndexForKey = false;
+let _keylessItemComponentName: string = '';
 
-export type RenderItemType<ItemT> = (
-  info: RenderItemProps<ItemT>,
-) => React.Node;
+type ScrollResponderType = any;
+type ViewStyleProp = $PropertyType<ViewProps, 'style'>;
 
 type ViewabilityHelperCallbackTuple = {
   viewabilityHelper: ViewabilityHelper,
@@ -76,262 +74,9 @@ type ViewabilityHelperCallbackTuple = {
   ...
 };
 
-type RequiredProps = {|
-  /**
-   * The default accessor functions assume this is an Array<{key: string} | {id: string}> but you can override
-   * getItem, getItemCount, and keyExtractor to handle any type of index-based data.
-   */
-  data?: any,
-  /**
-   * A generic accessor for extracting an item from any sort of data blob.
-   */
-  getItem: (data: any, index: number) => ?Item,
-  /**
-   * Determines how many items are in the data blob.
-   */
-  getItemCount: (data: any) => number,
-|};
-type OptionalProps = {|
-  renderItem?: ?RenderItemType<Item>,
-  /**
-   * `debug` will turn on extra logging and visual overlays to aid with debugging both usage and
-   * implementation, but with a significant perf hit.
-   */
-  debug?: ?boolean,
-  /**
-   * DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully
-   * unmounts react instances that are outside of the render window. You should only need to disable
-   * this for debugging purposes. Defaults to false.
-   */
-  disableVirtualization?: ?boolean,
-  /**
-   * A marker property for telling the list to re-render (since it implements `PureComponent`). If
-   * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the
-   * `data` prop, stick it here and treat it immutably.
-   */
-  extraData?: any,
-  // e.g. height, y
-  getItemLayout?: (
-    data: any,
-    index: number,
-  ) => {
-    length: number,
-    offset: number,
-    index: number,
-    ...
-  },
-  horizontal?: ?boolean,
-  /**
-   * How many items to render in the initial batch. This should be enough to fill the screen but not
-   * much more. Note these items will never be unmounted as part of the windowed rendering in order
-   * to improve perceived performance of scroll-to-top actions.
-   */
-  initialNumToRender?: ?number,
-  /**
-   * Instead of starting at the top with the first item, start at `initialScrollIndex`. This
-   * disables the "scroll to top" optimization that keeps the first `initialNumToRender` items
-   * always rendered and immediately renders the items starting at this initial index. Requires
-   * `getItemLayout` to be implemented.
-   */
-  initialScrollIndex?: ?number,
-  /**
-   * Reverses the direction of scroll. Uses scale transforms of -1.
-   */
-  inverted?: ?boolean,
-  keyExtractor?: ?(item: Item, index: number) => string,
-  /**
-   * Each cell is rendered using this element. Can be a React Component Class,
-   * or a render function. Defaults to using View.
-   */
-  CellRendererComponent?: ?React.ComponentType<any>,
-  /**
-   * Rendered in between each item, but not at the top or bottom. By default, `highlighted` and
-   * `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight`
-   * which will update the `highlighted` prop, but you can also add custom props with
-   * `separators.updateProps`.
-   */
-  ItemSeparatorComponent?: ?React.ComponentType<any>,
-  /**
-   * Takes an item from `data` and renders it into the list. Example usage:
-   *
-   *     <FlatList
-   *       ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (
-   *         <View style={[style.separator, highlighted && {marginLeft: 0}]} />
-   *       )}
-   *       data={[{title: 'Title Text', key: 'item1'}]}
-   *       ListItemComponent={({item, separators}) => (
-   *         <TouchableHighlight
-   *           onPress={() => this._onPress(item)}
-   *           onShowUnderlay={separators.highlight}
-   *           onHideUnderlay={separators.unhighlight}>
-   *           <View style={{backgroundColor: 'white'}}>
-   *             <Text>{item.title}</Text>
-   *           </View>
-   *         </TouchableHighlight>
-   *       )}
-   *     />
-   *
-   * Provides additional metadata like `index` if you need it, as well as a more generic
-   * `separators.updateProps` function which let's you set whatever props you want to change the
-   * rendering of either the leading separator or trailing separator in case the more common
-   * `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for
-   * your use-case.
-   */
-  ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),
-  /**
-   * Rendered when the list is empty. Can be a React Component Class, a render function, or
-   * a rendered element.
-   */
-  ListEmptyComponent?: ?(React.ComponentType<any> | React.Element<any>),
-  /**
-   * Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
-   * a rendered element.
-   */
-  ListFooterComponent?: ?(React.ComponentType<any> | React.Element<any>),
-  /**
-   * Styling for internal View for ListFooterComponent
-   */
-  ListFooterComponentStyle?: ViewStyleProp,
-  /**
-   * Rendered at the top of all the items. Can be a React Component Class, a render function, or
-   * a rendered element.
-   */
-  ListHeaderComponent?: ?(React.ComponentType<any> | React.Element<any>),
-  /**
-   * Styling for internal View for ListHeaderComponent
-   */
-  ListHeaderComponentStyle?: ViewStyleProp,
-  /**
-   * A unique identifier for this list. If there are multiple VirtualizedLists at the same level of
-   * nesting within another VirtualizedList, this key is necessary for virtualization to
-   * work properly.
-   */
-  listKey?: string,
-  /**
-   * The maximum number of items to render in each incremental render batch. The more rendered at
-   * once, the better the fill rate, but responsiveness may suffer because rendering content may
-   * interfere with responding to button taps or other interactions.
-   */
-  maxToRenderPerBatch?: ?number,
-  /**
-   * Called once when the scroll position gets within `onStartReachedThreshold` of the rendered
-   * content.
-   */
-  onStartReached?: ?(info: {distanceFromStart: number, ...}) => void,
-  /**
-   * How far from the start (in units of visible length of the list) the leading edge of the
-   * list must be from the start of the content to trigger the `onStartReached` callback.
-   * Thus, a value of 0.5 will trigger `onStartReached` when the start of the content is
-   * within half the visible length of the list.
-   */
-  onStartReachedThreshold?: ?number,
-  /**
-   * Called once when the scroll position gets within `onEndReachedThreshold` of the rendered
-   * content.
-   */
-  onEndReached?: ?(info: {distanceFromEnd: number, ...}) => void,
-  /**
-   * How far from the end (in units of visible length of the list) the trailing edge of the
-   * list must be from the end of the content to trigger the `onEndReached` callback.
-   * Thus, a value of 0.5 will trigger `onEndReached` when the end of the content is
-   * within half the visible length of the list.
-   */
-  onEndReachedThreshold?: ?number,
-  /**
-   * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
-   * sure to also set the `refreshing` prop correctly.
-   */
-  onRefresh?: ?() => void,
-  /**
-   * Used to handle failures when scrolling to an index that has not been measured yet. Recommended
-   * action is to either compute your own offset and `scrollTo` it, or scroll as far as possible and
-   * then try again after more items have been rendered.
-   */
-  onScrollToIndexFailed?: ?(info: {
-    index: number,
-    highestMeasuredFrameIndex: number,
-    averageItemLength: number,
-    ...
-  }) => void,
-  /**
-   * Called when the viewability of rows changes, as defined by the
-   * `viewabilityConfig` prop.
-   */
-  onViewableItemsChanged?: ?(info: {
-    viewableItems: Array<ViewToken>,
-    changed: Array<ViewToken>,
-    ...
-  }) => void,
-  persistentScrollbar?: ?boolean,
-  /**
-   * Set this when offset is needed for the loading indicator to show correctly.
-   */
-  progressViewOffset?: number,
-  /**
-   * A custom refresh control element. When set, it overrides the default
-   * <RefreshControl> component built internally. The onRefresh and refreshing
-   * props are also ignored. Only works for vertical VirtualizedList.
-   */
-  refreshControl?: ?React.Element<any>,
-  /**
-   * Set this true while waiting for new data from a refresh.
-   */
-  refreshing?: ?boolean,
-  /**
-   * Note: may have bugs (missing content) in some circumstances - use at your own risk.
-   *
-   * This may improve scroll performance for large lists.
-   */
-  removeClippedSubviews?: boolean,
-  /**
-   * Render a custom scroll component, e.g. with a differently styled `RefreshControl`.
-   */
-  renderScrollComponent?: (props: Object) => React.Element<any>,
-  /**
-   * Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
-   * screen. Similar fill rate/responsiveness tradeoff as `maxToRenderPerBatch`.
-   */
-  updateCellsBatchingPeriod?: ?number,
-  /**
-   * See `ViewabilityHelper` for flow type and further documentation.
-   */
-  viewabilityConfig?: ViewabilityConfig,
-  /**
-   * List of ViewabilityConfig/onViewableItemsChanged pairs. A specific onViewableItemsChanged
-   * will be called when its corresponding ViewabilityConfig's conditions are met.
-   */
-  viewabilityConfigCallbackPairs?: Array<ViewabilityConfigCallbackPair>,
-  /**
-   * Determines the maximum number of items rendered outside of the visible area, in units of
-   * visible lengths. So if your list fills the screen, then `windowSize={21}` (the default) will
-   * render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing
-   * this number will reduce memory consumption and may improve performance, but will increase the
-   * chance that fast scrolling may reveal momentary blank areas of unrendered content.
-   */
-  windowSize?: ?number,
-  /**
-   * The legacy implementation is no longer supported.
-   */
-  legacyImplementation?: empty,
-|};
-
-type Props = {|
-  ...React.ElementConfig<typeof ScrollView>,
-  ...RequiredProps,
-  ...OptionalProps,
-|};
-
-let _usedIndexForKey = false;
-let _keylessItemComponentName: string = '';
-
 type State = {
-  first: number,
-  last: number,
-  // Used to track items added at the start of the list for maintainVisibleContentPosition.
-  firstItemKey: ?string,
-  // When using maintainVisibleContentPosition we need to adjust the window to make sure
-  // make sure that the visible elements are still rendered.
-  maintainVisibleContentPositionAdjustment: ?number,
+  renderMask: CellRenderMask,
+  cellsAroundViewport: {first: number, last: number},
 };
 
 /**
@@ -344,7 +89,7 @@ function horizontalOrDefault(horizontal: ?boolean) {
   return horizontal ?? false;
 }
 
-// initialNumToRenderOrDefault(this.props.initialNumToRenderOrDefault)
+// initialNumToRenderOrDefault(this.props.initialNumToRender)
 function initialNumToRenderOrDefault(initialNumToRender: ?number) {
   return initialNumToRender ?? 10;
 }
@@ -379,40 +124,19 @@ function windowSizeOrDefault(windowSize: ?number) {
   return windowSize ?? 21;
 }
 
-function extractKey(props: Props, item: Item, index: number): string {
-  if (props.keyExtractor != null) {
-    return props.keyExtractor(item, index);
-  }
-
-  const key = defaultKeyExtractor(item, index);
-  if (key === String(index)) {
-    _usedIndexForKey = true;
-    if (item.type && item.type.displayName) {
-      _keylessItemComponentName = item.type.displayName;
+function findLastWhere<T>(
+  arr: $ReadOnlyArray<T>,
+  predicate: (element: T) => boolean,
+): T | null {
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if (predicate(arr[i])) {
+      return arr[i];
     }
   }
-  return key;
-}
 
-function findItemIndexWithKey(props: Props, key: string): ?number {
-  for (let ii = 0; ii < props.getItemCount(props.data); ii++) {
-    const item = props.getItem(props.data, ii);
-    const curKey = extractKey(props, item, ii);
-    if (curKey === key) {
-      return ii;
-    }
-  }
   return null;
 }
 
-function getItemKey(props: Props, index: number): ?string {
-  const item = props.getItem(props.data, index);
-  if (item == null) {
-    return null;
-  }
-  return extractKey(props, item, 0);
-}
-
 /**
  * Base implementation for the more convenient [`<FlatList>`](https://reactnative.dev/docs/flatlist)
  * and [`<SectionList>`](https://reactnative.dev/docs/sectionlist) components, which are also better
@@ -442,22 +166,17 @@ function getItemKey(props: Props, index: number): ?string {
  * - As an effort to remove defaultProps, use helper functions when referencing certain props
  *
  */
-class VirtualizedList extends React.PureComponent<Props, State> {
+class VirtualizedList extends StateSafePureComponent<Props, State> {
   static contextType: typeof VirtualizedListContext = VirtualizedListContext;
 
-  pushOrUnshift(input: Array<any>, item: Item) {
-    if (this.props.inverted) {
-      input.unshift(item)
-    } else {
-      input.push(item)
-    }
-  }
-
   // scrollToEnd may be janky without getItemLayout prop
   scrollToEnd(params?: ?{animated?: ?boolean, ...}) {
     const animated = params ? params.animated : true;
     const veryLast = this.props.getItemCount(this.props.data) - 1;
-    const frame = this._getFrameMetricsApprox(veryLast);
+    if (veryLast < 0) {
+      return;
+    }
+    const frame = this.__getFrameMetricsApprox(veryLast, this.props);
     const offset = Math.max(
       0,
       frame.offset +
@@ -493,7 +212,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     viewOffset?: number,
     viewPosition?: number,
     ...
-  }) {
+  }): $FlowFixMe {
     const {
       data,
       horizontal,
@@ -531,11 +250,11 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       });
       return;
     }
-    const frame = this._getFrameMetricsApprox(index);
+    const frame = this.__getFrameMetricsApprox(Math.floor(index), this.props);
     const offset =
       Math.max(
         0,
-        frame.offset -
+        this._getOffsetApprox(index, this.props) -
           (viewPosition || 0) *
             (this._scrollMetrics.visibleLength - frame.length),
       ) - (viewOffset || 0);
@@ -563,6 +282,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   scrollToItem(params: {
     animated?: ?boolean,
     item: Item,
+    viewOffset?: number,
     viewPosition?: number,
     ...
   }) {
@@ -612,12 +332,12 @@ class VirtualizedList extends React.PureComponent<Props, State> {
 
   recordInteraction() {
     this._nestedChildLists.forEach(childList => {
-      childList.ref && childList.ref.recordInteraction();
+      childList.recordInteraction();
     });
     this._viewabilityTuples.forEach(t => {
       t.viewabilityHelper.recordInteraction();
     });
-    this._updateViewableItems(this.props.data);
+    this._updateViewableItems(this.props, this.state.cellsAroundViewport);
   }
 
   flashScrollIndicators() {
@@ -661,19 +381,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     return this.context?.cellKey || 'rootList';
   }
 
-  _getListKey(): string {
-    return this.props.listKey || this._getCellKey();
-  }
-
-  _getDebugInfo(): ListDebugInfo {
-    return {
-      listKey: this._getListKey(),
-      cellKey: this._getCellKey(),
-      horizontal: horizontalOrDefault(this.props.horizontal),
-      parent: this.context?.debugInfo,
-    };
-  }
-
+  // $FlowFixMe[missing-local-annot]
   _getScrollMetrics = () => {
     return this._scrollMetrics;
   };
@@ -682,6 +390,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     return this._hasMore;
   }
 
+  // $FlowFixMe[missing-local-annot]
   _getOutermostParentListRef = () => {
     if (this._isNestedWithSameOrientation()) {
       return this.context.getOutermostParentListRef();
@@ -690,56 +399,20 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     }
   };
 
-  _getNestedChildState = (key: string): ?ChildListState => {
-    const existingChildData = this._nestedChildLists.get(key);
-    return existingChildData && existingChildData.state;
-  };
-
   _registerAsNestedChild = (childList: {
     cellKey: string,
-    key: string,
-    ref: VirtualizedList,
-    parentDebugInfo: ListDebugInfo,
-    ...
-  }): ?ChildListState => {
-    // Register the mapping between this child key and the cellKey for its cell
-    const childListsInCell =
-      this._cellKeysToChildListKeys.get(childList.cellKey) || new Set();
-    childListsInCell.add(childList.key);
-    this._cellKeysToChildListKeys.set(childList.cellKey, childListsInCell);
-    const existingChildData = this._nestedChildLists.get(childList.key);
-    if (existingChildData && existingChildData.ref !== null) {
-      console.error(
-        'A VirtualizedList contains a cell which itself contains ' +
-          'more than one VirtualizedList of the same orientation as the parent ' +
-          'list. You must pass a unique listKey prop to each sibling list.\n\n' +
-          describeNestedLists({
-            ...childList,
-            // We're called from the child's componentDidMount, so it's safe to
-            // read the child's props here (albeit weird).
-            horizontal: !!childList.ref.props.horizontal,
-          }),
-      );
-    }
-    this._nestedChildLists.set(childList.key, {
-      ref: childList.ref,
-      state: null,
-    });
-
+    ref: React.ElementRef<typeof VirtualizedList>,
+  }): void => {
+    this._nestedChildLists.add(childList.ref, childList.cellKey);
     if (this._hasInteracted) {
       childList.ref.recordInteraction();
     }
   };
 
   _unregisterAsNestedChild = (childList: {
-    key: string,
-    state: ChildListState,
-    ...
+    ref: React.ElementRef<typeof VirtualizedList>,
   }): void => {
-    this._nestedChildLists.set(childList.key, {
-      ref: null,
-      state: childList.state,
-    });
+    this._nestedChildLists.remove(childList.ref);
   };
 
   state: State;
@@ -749,16 +422,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    invariant(
-      // $FlowFixMe[prop-missing]
-      !props.onScroll || !props.onScroll.__isNative,
-      'Components based on VirtualizedList must be wrapped with Animated.createAnimatedComponent ' +
-        'to support native onScroll events with useNativeDriver',
-    );
-    invariant(
-      windowSizeOrDefault(props.windowSize) > 0,
-      'VirtualizedList: The windowSize prop must be present and set to a value greater than 0.',
-    );
+    this._checkProps(props);
 
     this._fillRateHelper = new FillRateHelper(this._getFrameMetrics);
     this._updateCellsToRenderBatcher = new Batchinator(
@@ -773,35 +437,23 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           onViewableItemsChanged: pair.onViewableItemsChanged,
         }),
       );
-    } else if (this.props.onViewableItemsChanged) {
-      this.pushOrUnshift(this._viewabilityTuples, {
-        viewabilityHelper: new ViewabilityHelper(this.props.viewabilityConfig),
-        // $FlowFixMe[incompatible-call]
-        onViewableItemsChanged: this.props.onViewableItemsChanged,
-      })
-    }
-
-    let initialState = {
-      first: this.props.initialScrollIndex || 0,
-      last:
-        Math.min(
-          this.props.getItemCount(this.props.data),
-          (this.props.initialScrollIndex || 0) +
-            initialNumToRenderOrDefault(this.props.initialNumToRender),
-        ) - 1,
-      firstItemKey: getItemKey(this.props, 0),
-      maintainVisibleContentPositionAdjustment: null,
-    };
-
-    if (this._isNestedWithSameOrientation()) {
-      const storedState = this.context.getNestedChildState(this._getListKey());
-      if (storedState) {
-        initialState = storedState;
-        this.state = storedState;
-        this._frames = storedState.frames;
+    } else {
+      const {onViewableItemsChanged, viewabilityConfig} = this.props;
+      if (onViewableItemsChanged) {
+        this._viewabilityTuples.push({
+          viewabilityHelper: new ViewabilityHelper(viewabilityConfig),
+          onViewableItemsChanged: onViewableItemsChanged,
+        });
       }
     }
 
+    const initialRenderRegion = VirtualizedList._initialRenderRegion(props);
+
+    this.state = {
+      cellsAroundViewport: initialRenderRegion,
+      renderMask: VirtualizedList._createRenderMask(props, initialRenderRegion),
+    };
+
     // REACT-NATIVE-WEB patch to preserve during future RN merges: Support inverted wheel scroller.
     // For issue https://github.com/necolas/react-native-web/issues/995
     this.invertedWheelEventHandler = (ev: any) => {
@@ -824,29 +476,253 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         const node = (this._scrollRef: any).getScrollableNode();
         if (this.props.horizontal) {
           ev.target.scrollLeft += targetDelta;
-          node.scrollLeft -= leftoverDelta;
+          const nextScrollLeft = node.scrollLeft - leftoverDelta;
+          node.scrollLeft = !this.props.getItemLayout ? Math.min(nextScrollLeft, this._totalCellLength) : nextScrollLeft;
         } else {
           ev.target.scrollTop += targetDelta;
-          node.scrollTop -= leftoverDelta;
+          const nextScrollTop = node.scrollTop - leftoverDelta;
+          node.scrollTop = !this.props.getItemLayout ? Math.min(nextScrollTop, this._totalCellLength) : nextScrollTop;
         }
         ev.preventDefault();
       }
     };
+  }
+
+  _checkProps(props: Props) {
+    const {onScroll, windowSize, getItemCount, data, initialScrollIndex} =
+      props;
+
+    invariant(
+      // $FlowFixMe[prop-missing]
+      !onScroll || !onScroll.__isNative,
+      'Components based on VirtualizedList must be wrapped with Animated.createAnimatedComponent ' +
+        'to support native onScroll events with useNativeDriver',
+    );
+    invariant(
+      windowSizeOrDefault(windowSize) > 0,
+      'VirtualizedList: The windowSize prop must be present and set to a value greater than 0.',
+    );
+
+    invariant(
+      getItemCount,
+      'VirtualizedList: The "getItemCount" prop must be provided',
+    );
+
+    const itemCount = getItemCount(data);
+
+    if (
+      initialScrollIndex != null &&
+      !this._hasTriggeredInitialScrollToIndex &&
+      (initialScrollIndex < 0 ||
+        (itemCount > 0 && initialScrollIndex >= itemCount)) &&
+      !this._hasWarned.initialScrollIndex
+    ) {
+      console.warn(
+        `initialScrollIndex "${initialScrollIndex}" is not valid (list has ${itemCount} items)`,
+      );
+      this._hasWarned.initialScrollIndex = true;
+    }
+
+    if (__DEV__ && !this._hasWarned.flexWrap) {
+      // $FlowFixMe[underconstrained-implicit-instantiation]
+      const flatStyles = StyleSheet.flatten(this.props.contentContainerStyle);
+      if (flatStyles != null && flatStyles.flexWrap === 'wrap') {
+        console.warn(
+          '`flexWrap: `wrap`` is not supported with the `VirtualizedList` components.' +
+            'Consider using `numColumns` with `FlatList` instead.',
+        );
+        this._hasWarned.flexWrap = true;
+      }
+    }
+  }
+
+  static _createRenderMask(
+    props: Props,
+    cellsAroundViewport: {first: number, last: number},
+    additionalRegions?: ?$ReadOnlyArray<{first: number, last: number}>,
+  ): CellRenderMask {
+    const itemCount = props.getItemCount(props.data);
+
+    invariant(
+      cellsAroundViewport.first >= 0 &&
+        cellsAroundViewport.last >= cellsAroundViewport.first - 1 &&
+        cellsAroundViewport.last < itemCount,
+      `Invalid cells around viewport "[${cellsAroundViewport.first}, ${cellsAroundViewport.last}]" was passed to VirtualizedList._createRenderMask`,
+    );
+
+    const renderMask = new CellRenderMask(itemCount);
+
+    if (itemCount > 0) {
+      const allRegions = [cellsAroundViewport, ...(additionalRegions ?? [])];
+      for (const region of allRegions) {
+        renderMask.addCells(region);
+      }
+
+      // The initially rendered cells are retained as part of the
+      // "scroll-to-top" optimization
+      if (props.initialScrollIndex == null || props.initialScrollIndex <= 0) {
+        const initialRegion = VirtualizedList._initialRenderRegion(props);
+        renderMask.addCells(initialRegion);
+      }
+
+      // The layout coordinates of sticker headers may be off-screen while the
+      // actual header is on-screen. Keep the most recent before the viewport
+      // rendered, even if its layout coordinates are not in viewport.
+      const stickyIndicesSet = new Set(props.stickyHeaderIndices);
+      VirtualizedList._ensureClosestStickyHeader(
+        props,
+        stickyIndicesSet,
+        renderMask,
+        cellsAroundViewport.first,
+      );
+    }
+
+    return renderMask;
+  }
+
+  static _initialRenderRegion(props: Props): {first: number, last: number} {
+    const itemCount = props.getItemCount(props.data);
+
+    const firstCellIndex = Math.max(
+      0,
+      Math.min(itemCount - 1, Math.floor(props.initialScrollIndex ?? 0)),
+    );
+
+    const lastCellIndex =
+      Math.min(
+        itemCount,
+        firstCellIndex + initialNumToRenderOrDefault(props.initialNumToRender),
+      ) - 1;
+
+    return {
+      first: firstCellIndex,
+      last: lastCellIndex,
+    };
+  }
 
-    this.state = initialState;
+  static _ensureClosestStickyHeader(
+    props: Props,
+    stickyIndicesSet: Set<number>,
+    renderMask: CellRenderMask,
+    cellIdx: number,
+  ) {
+    const stickyOffset = props.ListHeaderComponent ? 1 : 0;
+
+    for (let itemIdx = cellIdx - 1; itemIdx >= 0; itemIdx--) {
+      if (stickyIndicesSet.has(itemIdx + stickyOffset)) {
+        renderMask.addCells({first: itemIdx, last: itemIdx});
+        break;
+      }
+    }
+  }
+
+  _adjustCellsAroundViewport(
+    props: Props,
+    cellsAroundViewport: {first: number, last: number},
+  ): {first: number, last: number} {
+    const {data, getItemCount} = props;
+    const onEndReachedThreshold = onEndReachedThresholdOrDefault(
+      props.onEndReachedThreshold,
+    );
+    const {contentLength, offset, visibleLength} = this._scrollMetrics;
+    const distanceFromEnd = contentLength - visibleLength - offset;
+
+    // Wait until the scroll view metrics have been set up. And until then,
+    // we will trust the initialNumToRender suggestion
+    if (visibleLength <= 0 || contentLength <= 0) {
+      return cellsAroundViewport.last >= getItemCount(data)
+        ? VirtualizedList._constrainToItemCount(cellsAroundViewport, props)
+        : cellsAroundViewport;
+    }
+
+    let newCellsAroundViewport: {first: number, last: number};
+    if (props.disableVirtualization) {
+      const renderAhead =
+        distanceFromEnd < onEndReachedThreshold * visibleLength
+          ? maxToRenderPerBatchOrDefault(props.maxToRenderPerBatch)
+          : 0;
+
+      newCellsAroundViewport = {
+        first: 0,
+        last: Math.min(
+          cellsAroundViewport.last + renderAhead,
+          getItemCount(data) - 1,
+        ),
+      };
+    } else {
+      // If we have a non-zero initialScrollIndex and run this before we've scrolled,
+      // we'll wipe out the initialNumToRender rendered elements starting at initialScrollIndex.
+      // So let's wait until we've scrolled the view to the right place. And until then,
+      // we will trust the initialScrollIndex suggestion.
+
+      // Thus, we want to recalculate the windowed render limits if any of the following hold:
+      // - initialScrollIndex is undefined or is 0
+      // - initialScrollIndex > 0 AND scrolling is complete
+      // - initialScrollIndex > 0 AND the end of the list is visible (this handles the case
+      //   where the list is shorter than the visible area)
+      if (
+        props.initialScrollIndex &&
+        !this._scrollMetrics.offset &&
+        Math.abs(distanceFromEnd) >= Number.EPSILON
+      ) {
+        return cellsAroundViewport.last >= getItemCount(data)
+          ? VirtualizedList._constrainToItemCount(cellsAroundViewport, props)
+          : cellsAroundViewport;
+      }
+
+      newCellsAroundViewport = computeWindowedRenderLimits(
+        props,
+        maxToRenderPerBatchOrDefault(props.maxToRenderPerBatch),
+        windowSizeOrDefault(props.windowSize),
+        cellsAroundViewport,
+        this.__getFrameMetricsApprox,
+        this._scrollMetrics,
+      );
+      invariant(
+        newCellsAroundViewport.last < getItemCount(data),
+        'computeWindowedRenderLimits() should return range in-bounds',
+      );
+    }
+
+    if (this._nestedChildLists.size() > 0) {
+      // If some cell in the new state has a child list in it, we should only render
+      // up through that item, so that we give that list a chance to render.
+      // Otherwise there's churn from multiple child lists mounting and un-mounting
+      // their items.
+
+      // Will this prevent rendering if the nested list doesn't realize the end?
+      const childIdx = this._findFirstChildWithMore(
+        newCellsAroundViewport.first,
+        newCellsAroundViewport.last,
+      );
+
+      newCellsAroundViewport.last = childIdx ?? newCellsAroundViewport.last;
+    }
+
+    return newCellsAroundViewport;
+  }
+
+  _findFirstChildWithMore(first: number, last: number): number | null {
+    for (let ii = first; ii <= last; ii++) {
+      const cellKeyForIndex = this._indicesToKeys.get(ii);
+      if (
+        cellKeyForIndex != null &&
+        this._nestedChildLists.anyInCell(cellKeyForIndex, childList =>
+          childList.hasMore(),
+        )
+      ) {
+        return ii;
+      }
+    }
+
+    return null;
   }
 
   componentDidMount() {
     if (this._isNestedWithSameOrientation()) {
       this.context.registerAsNestedChild({
-        cellKey: this._getCellKey(),
-        key: this._getListKey(),
         ref: this,
-        // NOTE: When the child mounts (here) it's not necessarily safe to read
-        // the parent's props. This is why we explicitly propagate debugInfo
-        // "down" via context and "up" again via this method call on the
-        // parent.
-        parentDebugInfo: this.context.debugInfo,
+        cellKey: this.context.cellKey,
       });
     }
 
@@ -856,16 +732,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
 
   componentWillUnmount() {
     if (this._isNestedWithSameOrientation()) {
-      this.context.unregisterAsNestedChild({
-        key: this._getListKey(),
-        state: {
-          first: this.state.first,
-          last: this.state.last,
-          frames: this._frames,
-        },
-      });
+      this.context.unregisterAsNestedChild({ref: this});
     }
-    this._updateViewableItems(null);
     this._updateCellsToRenderBatcher.dispose({abort: true});
     this._viewabilityTuples.forEach(tuple => {
       tuple.viewabilityHelper.dispose();
@@ -898,37 +766,21 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   }
 
   static getDerivedStateFromProps(newProps: Props, prevState: State): State {
-    const {data, getItemCount, maintainVisibleContentPosition} = newProps;
-    const {firstItemKey: prevFirstItemKey} = prevState;
-    const maxToRenderPerBatch = maxToRenderPerBatchOrDefault(
-      newProps.maxToRenderPerBatch,
-    );
-
-    let maintainVisibleContentPositionAdjustment =
-      prevState.maintainVisibleContentPositionAdjustment;
-    const newFirstItemKey = getItemKey(newProps, 0);
-    if (
-      maintainVisibleContentPosition != null &&
-      maintainVisibleContentPositionAdjustment == null &&
-      prevFirstItemKey != null &&
-      newFirstItemKey != null
-    ) {
-      maintainVisibleContentPositionAdjustment =
-        newFirstItemKey !== prevFirstItemKey
-          ? findItemIndexWithKey(newProps, prevFirstItemKey)
-          : null;
-    }
-
     // first and last could be stale (e.g. if a new, shorter items props is passed in), so we make
     // sure we're rendering a reasonable range here.
+    const itemCount = newProps.getItemCount(newProps.data);
+    if (itemCount === prevState.renderMask.numCells()) {
+      return prevState;
+    }
+
+    const constrainedCells = VirtualizedList._constrainToItemCount(
+      prevState.cellsAroundViewport,
+      newProps,
+    );
+
     return {
-      first: Math.max(
-        0,
-        Math.min(prevState.first, getItemCount(data) - 1 - maxToRenderPerBatch),
-      ),
-      last: Math.max(0, Math.min(prevState.last, getItemCount(data) - 1)),
-      firstItemKey: newFirstItemKey,
-      maintainVisibleContentPositionAdjustment,
+      cellsAroundViewport: constrainedCells,
+      renderMask: VirtualizedList._createRenderMask(newProps, constrainedCells),
     };
   }
 
@@ -943,28 +795,39 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     const {
       CellRendererComponent,
       ItemSeparatorComponent,
+      ListHeaderComponent,
+      ListItemComponent,
       data,
+      debug,
       getItem,
       getItemCount,
+      getItemLayout,
       horizontal,
+      renderItem,
     } = this.props;
-    const stickyOffset = this.props.ListHeaderComponent ? 1 : 0;
+    const stickyOffset = ListHeaderComponent ? 1 : 0;
     const end = getItemCount(data) - 1;
     let prevCellKey;
     last = Math.min(end, last);
+
     for (let ii = first; ii <= last; ii++) {
       const item = getItem(data, ii);
-      const key = extractKey(this.props, item, ii);
+      const key = this._keyExtractor(item, ii, this.props);
+
       this._indicesToKeys.set(ii, key);
       if (stickyIndicesFromProps.has(ii + stickyOffset)) {
-        this.pushOrUnshift(stickyHeaderIndices, cells.length);
+        stickyHeaderIndices.push(cells.length);
       }
-      this.pushOrUnshift(cells,
+
+      const shouldListenForLayout =
+        getItemLayout == null || debug || this._fillRateHelper.enabled();
+
+      cells.push(
         <CellRenderer
           CellRendererComponent={CellRendererComponent}
           ItemSeparatorComponent={ii < end ? ItemSeparatorComponent : undefined}
+          ListItemComponent={ListItemComponent}
           cellKey={key}
-          fillRateHelper={this._fillRateHelper}
           horizontal={horizontal}
           index={ii}
           inversionStyle={inversionStyle}
@@ -972,18 +835,38 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           key={key}
           prevCellKey={prevCellKey}
           onUpdateSeparators={this._onUpdateSeparators}
-          onLayout={e => this._onCellLayout(e, key, ii)}
+          onCellFocusCapture={e => this._onCellFocusCapture(key)}
           onUnmount={this._onCellUnmount}
-          parentProps={this.props}
           ref={ref => {
             this._cellRefs[key] = ref;
           }}
+          renderItem={renderItem}
+          {...(shouldListenForLayout && {
+            onCellLayout: this._onCellLayout,
+          })}
         />,
       );
       prevCellKey = key;
     }
   }
 
+  static _constrainToItemCount(
+    cells: {first: number, last: number},
+    props: Props,
+  ): {first: number, last: number} {
+    const itemCount = props.getItemCount(props.data);
+    const last = Math.min(itemCount - 1, cells.last);
+
+    const maxToRenderPerBatch = maxToRenderPerBatchOrDefault(
+      props.maxToRenderPerBatch,
+    );
+
+    return {
+      first: clamp(0, itemCount - 1 - maxToRenderPerBatch, cells.first),
+      last,
+    };
+  }
+
   _onUpdateSeparators = (keys: Array<?string>, newProps: Object) => {
     keys.forEach(key => {
       const ref = key != null && this._cellRefs[key];
@@ -991,10 +874,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     });
   };
 
-  _isVirtualizationDisabled(): boolean {
-    return this.props.disableVirtualization || false;
-  }
-
   _isNestedWithSameOrientation(): boolean {
     const nestedContext = this.context;
     return !!(
@@ -1006,31 +885,47 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   _getSpacerKey = (isVertical: boolean): string =>
     isVertical ? 'height' : 'width';
 
-  render(): React.Node {
-    if (__DEV__) {
-      const flatStyles = flattenStyle(this.props.contentContainerStyle);
-      if (flatStyles != null && flatStyles.flexWrap === 'wrap') {
-        console.warn(
-          '`flexWrap: `wrap`` is not supported with the `VirtualizedList` components.' +
-            'Consider using `numColumns` with `FlatList` instead.',
-        );
+  _keyExtractor(
+    item: Item,
+    index: number,
+    props: {
+      keyExtractor?: ?(item: Item, index: number) => string,
+      ...
+    },
+    // $FlowFixMe[missing-local-annot]
+  ) {
+    if (props.keyExtractor != null) {
+      return props.keyExtractor(item, index);
+    }
+
+    const key = defaultKeyExtractor(item, index);
+    if (key === String(index)) {
+      _usedIndexForKey = true;
+      if (item.type && item.type.displayName) {
+        _keylessItemComponentName = item.type.displayName;
       }
     }
+    return key;
+  }
+
+  render(): React.Node {
+    this._checkProps(this.props);
     const {ListEmptyComponent, ListFooterComponent, ListHeaderComponent} =
       this.props;
     const {data, horizontal} = this.props;
-    const isVirtualizationDisabled = this._isVirtualizationDisabled();
     const inversionStyle = this.props.inverted
       ? horizontalOrDefault(this.props.horizontal)
         ? styles.horizontallyInverted
         : styles.verticallyInverted
       : null;
-    const cells = [];
+    const cells: Array<any | React.Node> = [];
     const stickyIndicesFromProps = new Set(this.props.stickyHeaderIndices);
     const stickyHeaderIndices = [];
+
+    // 1. Add cell for ListHeaderComponent
     if (ListHeaderComponent) {
       if (stickyIndicesFromProps.has(0)) {
-        this.pushOrUnshift(stickyHeaderIndices, 0);
+        stickyHeaderIndices.push(0);
       }
       const element = React.isValidElement(ListHeaderComponent) ? (
         ListHeaderComponent
@@ -1039,7 +934,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         // $FlowFixMe[incompatible-type-arg]
         <ListHeaderComponent />
       );
-      this.pushOrUnshift(cells,
+      cells.push(
         <VirtualizedListCellContextProvider
           cellKey={this._getCellKey() + '-header'}
           key="$header">
@@ -1057,81 +952,91 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         </VirtualizedListCellContextProvider>,
       );
     }
+
+    // 2a. Add a cell for ListEmptyComponent if applicable
     const itemCount = this.props.getItemCount(data);
+    if (itemCount === 0 && ListEmptyComponent) {
+      const element: React.Element<any> = ((React.isValidElement(
+        ListEmptyComponent,
+      ) ? (
+        ListEmptyComponent
+      ) : (
+        // $FlowFixMe[not-a-component]
+        // $FlowFixMe[incompatible-type-arg]
+        <ListEmptyComponent />
+      )): any);
+      cells.push(
+        <VirtualizedListCellContextProvider
+          cellKey={this._getCellKey() + '-empty'}
+          key="$empty">
+          {React.cloneElement(element, {
+            onLayout: (event: LayoutEvent) => {
+              this._onLayoutEmpty(event);
+              if (element.props.onLayout) {
+                element.props.onLayout(event);
+              }
+            },
+            style: [inversionStyle, element.props.style],
+          })}
+        </VirtualizedListCellContextProvider>,
+      );
+    }
+
+    // 2b. Add cells and spacers for each item
     if (itemCount > 0) {
       _usedIndexForKey = false;
       _keylessItemComponentName = '';
       const spacerKey = this._getSpacerKey(!horizontal);
-      const lastInitialIndex = this.props.initialScrollIndex
-        ? -1
-        : initialNumToRenderOrDefault(this.props.initialNumToRender) - 1;
-      let {first, last, maintainVisibleContentPositionAdjustment} = this.state;
-      if (maintainVisibleContentPositionAdjustment != null) {
-        first += maintainVisibleContentPositionAdjustment;
-        last += maintainVisibleContentPositionAdjustment;
-      }
-      this._pushCells(
-        cells,
-        stickyHeaderIndices,
-        stickyIndicesFromProps,
-        0,
-        lastInitialIndex,
-        inversionStyle,
-      );
-      const firstAfterInitial = Math.max(lastInitialIndex + 1, first);
-      if (!isVirtualizationDisabled && first > lastInitialIndex + 1) {
-        let insertedStickySpacer = false;
-        if (stickyIndicesFromProps.size > 0) {
-          const stickyOffset = ListHeaderComponent ? 1 : 0;
-          // See if there are any sticky headers in the virtualized space that we need to render.
-          for (let ii = firstAfterInitial - 1; ii > lastInitialIndex; ii--) {
-            if (stickyIndicesFromProps.has(ii + stickyOffset)) {
-              const initBlock = this._getFrameMetricsApprox(lastInitialIndex);
-              const stickyBlock = this._getFrameMetricsApprox(ii);
-              const leadSpace =
-                stickyBlock.offset -
-                initBlock.offset -
-                (this.props.initialScrollIndex ? 0 : initBlock.length);
-              this.pushOrUnshift(cells,
-                <View key="$sticky_lead" style={{[spacerKey]: leadSpace}} />,
-              );
-              this._pushCells(
-                cells,
-                stickyHeaderIndices,
-                stickyIndicesFromProps,
-                ii,
-                ii,
-                inversionStyle,
-              );
-              const trailSpace =
-                this._getFrameMetricsApprox(first).offset -
-                (stickyBlock.offset + stickyBlock.length);
-              this.pushOrUnshift(cells,
-                <View key="$sticky_trail" style={{[spacerKey]: trailSpace}} />,
-              );
-              insertedStickySpacer = true;
-              break;
-            }
+
+      const renderRegions = this.state.renderMask.enumerateRegions();
+      const lastSpacer = findLastWhere(renderRegions, r => r.isSpacer);
+
+      for (const section of renderRegions) {
+        if (section.isSpacer) {
+          // Legacy behavior is to avoid spacers when virtualization is
+          // disabled (including head spacers on initial render).
+          if (this.props.disableVirtualization) {
+            continue;
           }
-        }
-        if (!insertedStickySpacer) {
-          const initBlock = this._getFrameMetricsApprox(lastInitialIndex);
-          const firstSpace =
-            this._getFrameMetricsApprox(first).offset -
-            (initBlock.offset + initBlock.length);
-          this.pushOrUnshift(cells,
-            <View key="$lead_spacer" style={{[spacerKey]: firstSpace}} />,
+
+          // Without getItemLayout, we limit our tail spacer to the _highestMeasuredFrameIndex to
+          // prevent the user for hyperscrolling into un-measured area because otherwise content will
+          // likely jump around as it renders in above the viewport.
+          const isLastSpacer = section === lastSpacer;
+          const constrainToMeasured = isLastSpacer && !this.props.getItemLayout;
+          const last = constrainToMeasured
+            ? clamp(
+                section.first - 1,
+                section.last,
+                this._highestMeasuredFrameIndex,
+              )
+            : section.last;
+
+          const firstMetrics = this.__getFrameMetricsApprox(
+            section.first,
+            this.props,
+          );
+          const lastMetrics = this.__getFrameMetricsApprox(last, this.props);
+          const spacerSize =
+            lastMetrics.offset + lastMetrics.length - firstMetrics.offset;
+          cells.push(
+            <View
+              key={`$spacer-${section.first}`}
+              style={{[spacerKey]: spacerSize}}
+            />,
+          );
+        } else {
+          this._pushCells(
+            cells,
+            stickyHeaderIndices,
+            stickyIndicesFromProps,
+            section.first,
+            section.last,
+            inversionStyle,
           );
         }
       }
-      this._pushCells(
-        cells,
-        stickyHeaderIndices,
-        stickyIndicesFromProps,
-        firstAfterInitial,
-        last,
-        inversionStyle,
-      );
+
       if (!this._hasWarned.keys && _usedIndexForKey) {
         console.warn(
           'VirtualizedList: missing keys for items, make sure to specify a key or id property on each ' +
@@ -1140,46 +1045,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         );
         this._hasWarned.keys = true;
       }
-      if (!isVirtualizationDisabled && last < itemCount - 1) {
-        const lastFrame = this._getFrameMetricsApprox(last);
-        // Without getItemLayout, we limit our tail spacer to the _highestMeasuredFrameIndex to
-        // prevent the user for hyperscrolling into un-measured area because otherwise content will
-        // likely jump around as it renders in above the viewport.
-        const end = this.props.getItemLayout
-          ? itemCount - 1
-          : Math.min(itemCount - 1, this._highestMeasuredFrameIndex);
-        const endFrame = this._getFrameMetricsApprox(end);
-        const tailSpacerLength =
-          endFrame.offset +
-          endFrame.length -
-          (lastFrame.offset + lastFrame.length);
-        this.pushOrUnshift(cells,
-          <View key="$tail_spacer" style={{[spacerKey]: tailSpacerLength}} />,
-        );
-      }
-    } else if (ListEmptyComponent) {
-      const element: React.Element<any> = ((React.isValidElement(
-        ListEmptyComponent,
-      ) ? (
-        ListEmptyComponent
-      ) : (
-        // $FlowFixMe[not-a-component]
-        // $FlowFixMe[incompatible-type-arg]
-        <ListEmptyComponent />
-      )): any);
-      this.pushOrUnshift(cells,
-        React.cloneElement(element, {
-          key: '$empty',
-          onLayout: event => {
-            this._onLayoutEmpty(event);
-            if (element.props.onLayout) {
-              element.props.onLayout(event);
-            }
-          },
-          style: [inversionStyle, element.props.style],
-        }),
-      );
     }
+
+    // 3. Add cell for ListFooterComponent
     if (ListFooterComponent) {
       const element = React.isValidElement(ListFooterComponent) ? (
         ListFooterComponent
@@ -1188,7 +1056,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         // $FlowFixMe[incompatible-type-arg]
         <ListFooterComponent />
       );
-      this.pushOrUnshift(cells,
+      cells.push(
         <VirtualizedListCellContextProvider
           cellKey={this._getFooterCellKey()}
           key="$footer">
@@ -1206,6 +1074,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         </VirtualizedListCellContextProvider>,
       );
     }
+
+    // 4. Render the ScrollView
     const scrollProps = {
       ...this.props,
       onContentSizeChange: this._onContentSizeChange,
@@ -1228,8 +1098,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         : this.props.style,
     };
 
-    this._hasMore =
-      this.state.last < this.props.getItemCount(this.props.data) - 1;
+    this._hasMore = this.state.cellsAroundViewport.last < itemCount - 1;
 
     const innerRet = (
       <VirtualizedListContextProvider
@@ -1238,10 +1107,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           getScrollMetrics: this._getScrollMetrics,
           horizontal: horizontalOrDefault(this.props.horizontal),
           getOutermostParentListRef: this._getOutermostParentListRef,
-          getNestedChildState: this._getNestedChildState,
           registerAsNestedChild: this._registerAsNestedChild,
           unregisterAsNestedChild: this._unregisterAsNestedChild,
-          debugInfo: this._getDebugInfo(),
         }}>
         {React.cloneElement(
           (
@@ -1255,7 +1122,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         )}
       </VirtualizedListContextProvider>
     );
-    let ret = innerRet;
+    let ret: React.Node = innerRet;
     /* https://github.com/necolas/react-native-web/issues/2239: Re-enable when ScrollView.Context.Consumer is available.
     if (__DEV__) {
       ret = (
@@ -1266,7 +1133,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
               !scrollContext.horizontal ===
                 !horizontalOrDefault(this.props.horizontal) &&
               !this._hasWarned.nesting &&
-              this.context == null
+              this.context == null &&
+              this.props.scrollEnabled !== false
             ) {
               // TODO (T46547044): use React.warn once 16.9 is sync'd: https://github.com/facebook/react/pull/15170
               console.error(
@@ -1318,30 +1186,32 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   }
 
   _averageCellLength = 0;
-  // Maps a cell key to the set of keys for all outermost child lists within that cell
-  _cellKeysToChildListKeys: Map<string, Set<string>> = new Map();
-  _cellRefs = {};
+  _cellRefs: {[string]: null | CellRenderer<any>} = {};
   _fillRateHelper: FillRateHelper;
-  _frames = {};
+  _frames: {
+    [string]: {
+      inLayout?: boolean,
+      index: number,
+      length: number,
+      offset: number,
+    },
+  } = {};
   _footerLength = 0;
-  _hasDoneInitialScroll = false;
+  // Used for preventing scrollToIndex from being called multiple times for initialScrollIndex
+  _hasTriggeredInitialScrollToIndex = false;
   _hasInteracted = false;
   _hasMore = false;
-  _hasWarned = {};
+  _hasWarned: {[string]: boolean} = {};
   _headerLength = 0;
   _hiPriInProgress: boolean = false; // flag to prevent infinite hiPri cell limit update
   _highestMeasuredFrameIndex = 0;
   _indicesToKeys: Map<number, string> = new Map();
-  _nestedChildLists: Map<
-    string,
-    {
-      ref: ?VirtualizedList,
-      state: ?ChildListState,
-      ...
-    },
-  > = new Map();
+  _lastFocusedCellKey: ?string = null;
+  _nestedChildLists: ChildListCollection<VirtualizedList> =
+    new ChildListCollection();
   _offsetFromParentVirtualizedList: number = 0;
   _prevParentOffset: number = 0;
+  // $FlowFixMe[missing-local-annot]
   _scrollMetrics = {
     contentLength: 0,
     dOffset: 0,
@@ -1350,6 +1220,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     timestamp: 0,
     velocity: 0,
     visibleLength: 0,
+    zoomScale: 1,
   };
   _scrollRef: ?React.ElementRef<any> = null;
   _sentStartForContentLength = 0;
@@ -1359,6 +1230,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   _updateCellsToRenderBatcher: Batchinator;
   _viewabilityTuples: Array<ViewabilityHelperCallbackTuple> = [];
 
+  /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
+   * LTI update could not be added via codemod */
   _captureScrollRef = ref => {
     this._scrollRef = ref;
   };
@@ -1366,19 +1239,15 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   _computeBlankness() {
     this._fillRateHelper.computeBlankness(
       this.props,
-      this.state,
+      this.state.cellsAroundViewport,
       this._scrollMetrics,
     );
   }
 
+  /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
+   * LTI update could not be added via codemod */
   _defaultRenderScrollComponent = props => {
     const onRefresh = props.onRefresh;
-    const inversionStyle = this.props.inverted
-    ? this.props.horizontal
-      ? styles.rowReverse
-      : styles.columnReverse
-    : null;
-
     if (this._isNestedWithSameOrientation()) {
       // $FlowFixMe[prop-missing] - Typing ReactNativeComponent revealed errors
       return <View {...props} />;
@@ -1391,11 +1260,13 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       );
       return (
         // $FlowFixMe[prop-missing] Invalid prop usage
+        // $FlowFixMe[incompatible-use]
         <ScrollView
           {...props}
           refreshControl={
             props.refreshControl == null ? (
               <RefreshControl
+                // $FlowFixMe[incompatible-type]
                 refreshing={props.refreshing}
                 onRefresh={onRefresh}
                 progressViewOffset={props.progressViewOffset}
@@ -1404,23 +1275,12 @@ class VirtualizedList extends React.PureComponent<Props, State> {
               props.refreshControl
             )
           }
-          contentContainerStyle={StyleSheet.compose(
-            inversionStyle,
-            this.props.contentContainerStyle,
-          )}
         />
       );
     } else {
       // $FlowFixMe[prop-missing] Invalid prop usage
-      return (
-        <ScrollView
-          {...props}
-          contentContainerStyle={StyleSheet.compose(
-            inversionStyle,
-            this.props.contentContainerStyle,
-          )}
-        />
-      );
+      // $FlowFixMe[incompatible-use]
+      return <ScrollView {...props} />;
     }
   };
 
@@ -1428,7 +1288,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     return !horizontalOrDefault(this.props.horizontal) ? parentNode.clientHeight : parentNode.clientWidth;
   }
 
-  _onCellLayout(e, cellKey, index) {
+  _onCellLayout = (e: LayoutEvent, cellKey: string, index: number): void => {
     const layout = e.nativeEvent.layout;
     const target = e.nativeEvent.target;
     const next = {
@@ -1465,10 +1325,16 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     this._triggerRemeasureForChildListsInCell(cellKey);
 
     this._computeBlankness();
-    this._updateViewableItems(this.props.data);
+    this._updateViewableItems(this.props, this.state.cellsAroundViewport);
+  };
+
+  _onCellFocusCapture(cellKey: string) {
+    this._lastFocusedCellKey = cellKey;
+    this._updateCellsToRender();
   }
 
   _onCellUnmount = (cellKey: string) => {
+    delete this._cellRefs[cellKey];
     const curr = this._frames[cellKey];
     if (curr) {
       this._frames[cellKey] = {...curr, inLayout: false};
@@ -1476,15 +1342,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   };
 
   _triggerRemeasureForChildListsInCell(cellKey: string): void {
-    const childListKeys = this._cellKeysToChildListKeys.get(cellKey);
-    if (childListKeys) {
-      for (let childKey of childListKeys) {
-        const childList = this._nestedChildLists.get(childKey);
-        childList &&
-          childList.ref &&
-          childList.ref.measureLayoutRelativeToContainingList();
-      }
-    }
+    this._nestedChildLists.forEachInCell(cellKey, childList => {
+      childList.measureLayoutRelativeToContainingList();
+    });
   }
 
   measureLayoutRelativeToContainingList(): void {
@@ -1518,15 +1378,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
 
             // If metrics of the scrollView changed, then we triggered remeasure for child list
             // to ensure VirtualizedList has the right information.
-            this._cellKeysToChildListKeys.forEach(childListKeys => {
-              if (childListKeys) {
-                for (let childKey of childListKeys) {
-                  const childList = this._nestedChildLists.get(childKey);
-                  childList &&
-                    childList.ref &&
-                    childList.ref.measureLayoutRelativeToContainingList();
-                }
-              }
+            this._nestedChildLists.forEach(childList => {
+              childList.measureLayoutRelativeToContainingList();
             });
           }
         },
@@ -1545,7 +1398,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     }
   }
 
-  _onLayout = (e: Object) => {
+  _onLayout = (e: LayoutEvent) => {
     if (this._isNestedWithSameOrientation()) {
       // Need to adjust our scroll metrics to be relative to our containing
       // VirtualizedList before we can make claims about list item viewability
@@ -1560,7 +1413,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     this._maybeCallOnEdgeReached();
   };
 
-  _onLayoutEmpty = e => {
+  _onLayoutEmpty = (e: LayoutEvent) => {
     this.props.onLayout && this.props.onLayout(e);
   };
 
@@ -1568,15 +1421,16 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     return this._getCellKey() + '-footer';
   }
 
-  _onLayoutFooter = e => {
+  _onLayoutFooter = (e: LayoutEvent) => {
     this._triggerRemeasureForChildListsInCell(this._getFooterCellKey());
     this._footerLength = this._selectLength(e.nativeEvent.layout);
   };
 
-  _onLayoutHeader = e => {
+  _onLayoutHeader = (e: LayoutEvent) => {
     this._headerLength = this._selectLength(e.nativeEvent.layout);
   };
 
+  // $FlowFixMe[missing-local-annot]
   _renderDebugOverlay() {
     const normalize =
       this._scrollMetrics.visibleLength /
@@ -1584,16 +1438,22 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     const framesInLayout = [];
     const itemCount = this.props.getItemCount(this.props.data);
     for (let ii = 0; ii < itemCount; ii++) {
-      const frame = this._getFrameMetricsApprox(ii);
+      const frame = this.__getFrameMetricsApprox(ii, this.props);
       /* $FlowFixMe[prop-missing] (>=0.68.0 site=react_native_fb) This comment
        * suppresses an error found when Flow v0.68 was deployed. To see the
        * error delete this comment and run Flow. */
       if (frame.inLayout) {
-        this.pushOrUnshift(framesInLayout, frame);
+        framesInLayout.push(frame);
       }
     }
-    const windowTop = this._getFrameMetricsApprox(this.state.first).offset;
-    const frameLast = this._getFrameMetricsApprox(this.state.last);
+    const windowTop = this.__getFrameMetricsApprox(
+      this.state.cellsAroundViewport.first,
+      this.props,
+    ).offset;
+    const frameLast = this.__getFrameMetricsApprox(
+      this.state.cellsAroundViewport.last,
+      this.props,
+    );
     const windowLen = frameLast.offset + frameLast.length - windowTop;
     const visTop = this._scrollMetrics.offset;
     const visLen = this._scrollMetrics.visibleLength;
@@ -1669,30 +1529,43 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       onEndReachedThreshold,
       initialScrollIndex,
     } = this.props;
-    if (this.state.maintainVisibleContentPositionAdjustment != null) {
-      return;
-    }
     const {contentLength, visibleLength, offset} = this._scrollMetrics;
-    const distanceFromStart = offset;
-    const distanceFromEnd = contentLength - visibleLength - offset;
+    let distanceFromStart = offset;
+    let distanceFromEnd = contentLength - visibleLength - offset;
+
+    // Especially when oERT is zero it's necessary to 'floor' very small distance values to be 0
+    // since debouncing causes us to not fire this event for every single "pixel" we scroll and can thus
+    // be at the edge of the list with a distance approximating 0 but not quite there.
+    if (distanceFromStart < ON_EDGE_REACHED_EPSILON) {
+      distanceFromStart = 0;
+    }
+    if (distanceFromEnd < ON_EDGE_REACHED_EPSILON) {
+      distanceFromEnd = 0;
+    }
+
+    // TODO: T121172172 Look into why we're "defaulting" to a threshold of 2px
+    // when oERT is not present (different from 2 viewports used elsewhere)
+    const DEFAULT_THRESHOLD_PX = 2;
+
     const startThreshold =
-      onStartReachedThresholdOrDefault(onStartReachedThreshold) * visibleLength;
+      onStartReachedThreshold != null
+        ? onStartReachedThreshold * visibleLength
+        : DEFAULT_THRESHOLD_PX;
     const endThreshold =
-      onEndReachedThresholdOrDefault(onEndReachedThreshold) * visibleLength;
+      onEndReachedThreshold != null
+        ? onEndReachedThreshold * visibleLength
+        : DEFAULT_THRESHOLD_PX;
     const isWithinStartThreshold = distanceFromStart <= startThreshold;
     const isWithinEndThreshold = distanceFromEnd <= endThreshold;
-    const shouldExecuteNewCallback =
-      this._scrollMetrics.contentLength !== this._sentStartForContentLength &&
-      this._scrollMetrics.contentLength !== this._sentEndForContentLength;
 
     // First check if the user just scrolled within the end threshold
     // and call onEndReached only once for a given content length,
     // and only if onStartReached is not being executed
     if (
       onEndReached &&
+      this.state.cellsAroundViewport.last === getItemCount(data) - 1 &&
       isWithinEndThreshold &&
-      shouldExecuteNewCallback &&
-      this.state.last === getItemCount(data) - 1
+      this._scrollMetrics.contentLength !== this._sentEndForContentLength
     ) {
       this._sentEndForContentLength = this._scrollMetrics.contentLength;
       onEndReached({distanceFromEnd});
@@ -1702,21 +1575,22 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     // and call onStartReached only once for a given content length,
     // and only if onEndReached is not being executed
     else if (
-      onStartReached &&
+      onStartReached != null &&
+      this.state.cellsAroundViewport.first === 0 &&
       isWithinStartThreshold &&
-      shouldExecuteNewCallback &&
-      this.state.first === 0 &&
+      this._scrollMetrics.contentLength !== this._sentStartForContentLength
+    ) {
       // On initial mount when using initialScrollIndex the offset will be 0 initially
       // and will trigger an unexpected onStartReached. To avoid this we can use
       // timestamp to differentiate between the initial scroll metrics and when we actually
       // received the first scroll event.
-      (!initialScrollIndex || this._scrollMetrics.timestamp !== 0)
-    ) {
-      this._sentStartForContentLength = this._scrollMetrics.contentLength;
-      onStartReached({distanceFromStart});
+      if (!initialScrollIndex || this._scrollMetrics.timestamp !== 0) {
+        this._sentStartForContentLength = this._scrollMetrics.contentLength;
+        onStartReached({distanceFromStart});
+      }
     }
 
-      // If the user scrolls away from the start or end and back again,
+    // If the user scrolls away from the start or end and back again,
     // cause onStartReached or onEndReached to be triggered again
     else {
       this._sentStartForContentLength = isWithinStartThreshold
@@ -1734,15 +1608,22 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       height > 0 &&
       this.props.initialScrollIndex != null &&
       this.props.initialScrollIndex > 0 &&
-      !this._hasDoneInitialScroll
+      !this._hasTriggeredInitialScrollToIndex
     ) {
       if (this.props.contentOffset == null) {
-        this.scrollToIndex({
-          animated: false,
-          index: this.props.initialScrollIndex,
-        });
+        if (
+          this.props.initialScrollIndex <
+          this.props.getItemCount(this.props.data)
+        ) {
+          this.scrollToIndex({
+            animated: false,
+            index: nullthrows(this.props.initialScrollIndex),
+          });
+        } else {
+          this.scrollToEnd({animated: false});
+        }
       }
-      this._hasDoneInitialScroll = true;
+      this._hasTriggeredInitialScrollToIndex = true;
     }
     if (this.props.onContentSizeChange) {
       this.props.onContentSizeChange(width, height);
@@ -1759,7 +1640,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     visibleLength: number,
     offset: number,
     ...
-  }) => {
+  }): $FlowFixMe => {
     // Offset of the top of the nested list relative to the top of its parent's viewport
     const offset = metrics.offset - this._offsetFromParentVirtualizedList;
     // Child's visible length is the same as its parent's
@@ -1777,7 +1658,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
 
   _onScroll = (e: Object) => {
     this._nestedChildLists.forEach(childList => {
-      childList.ref && childList.ref._onScroll(e);
+      childList._onScroll(e);
     });
     if (this.props.onScroll) {
       this.props.onScroll(e);
@@ -1820,6 +1701,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       );
       this._hasWarned.perf = true;
     }
+
+    // For invalid negative values (w/ RTL), set this to 1.
+    const zoomScale = e.nativeEvent.zoomScale < 0 ? 1 : e.nativeEvent.zoomScale;
     this._scrollMetrics = {
       contentLength,
       dt,
@@ -1828,19 +1712,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       timestamp,
       velocity,
       visibleLength,
+      zoomScale,
     };
-
-    const {maintainVisibleContentPositionAdjustment} = this.state;
-    if (maintainVisibleContentPositionAdjustment != null) {
-      this.setState(state => ({
-        maintainVisibleContentPositionAdjustment: null,
-        // Also update state with adjusted values since previous values are used
-        // in computeWindowedRenderLimits.
-        first: state.first + maintainVisibleContentPositionAdjustment,
-        last: state.last + maintainVisibleContentPositionAdjustment,
-      }));
-    }
-    this._updateViewableItems(this.props.data);
+    this._updateViewableItems(this.props, this.state.cellsAroundViewport);
     if (!this.props) {
       return;
     }
@@ -1853,10 +1727,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   };
 
   _scheduleCellsToRenderUpdate() {
-    const {first, last, maintainVisibleContentPositionAdjustment} = this.state;
-    if (maintainVisibleContentPositionAdjustment != null) {
-      return;
-    }
+    const {first, last} = this.state.cellsAroundViewport;
     const {offset, visibleLength, velocity} = this._scrollMetrics;
     const itemCount = this.props.getItemCount(this.props.data);
     let hiPri = false;
@@ -1866,29 +1737,28 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     const onEndReachedThreshold = onEndReachedThresholdOrDefault(
       this.props.onEndReachedThreshold,
     );
-    const scrollingThreshold = (onEndReachedThreshold * visibleLength) / 2;
     // Mark as high priority if we're close to the start of the first item
     // But only if there are items before the first rendered item
     if (first > 0) {
-      const distStart = offset - this._getFrameMetricsApprox(first).offset;
+      const distTop =
+        offset - this.__getFrameMetricsApprox(first, this.props).offset;
       hiPri =
-        hiPri ||
-        distStart < 0 ||
+        distTop < 0 ||
         (velocity < -2 &&
-          distStart <
-          getScrollingThreshold(onStartReachedThreshold, visibleLength));
+          distTop <
+            getScrollingThreshold(onStartReachedThreshold, visibleLength));
     }
     // Mark as high priority if we're close to the end of the last item
     // But only if there are items after the last rendered item
-    if (last < itemCount - 1) {
+    if (!hiPri && last >= 0 && last < itemCount - 1) {
       const distBottom =
-        this._getFrameMetricsApprox(last).offset - (offset + visibleLength);
+        this.__getFrameMetricsApprox(last, this.props).offset -
+        (offset + visibleLength);
       hiPri =
-        hiPri ||
         distBottom < 0 ||
         (velocity > 2 &&
           distBottom <
-          getScrollingThreshold(onEndReachedThreshold, visibleLength));
+            getScrollingThreshold(onEndReachedThreshold, visibleLength));
     }
     // Only trigger high-priority updates if we've actually rendered cells,
     // and with that size estimate, accurately compute how many cells we should render.
@@ -1913,9 +1783,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     }
   }
 
-  _onScrollBeginDrag = (e): void => {
+  _onScrollBeginDrag = (e: ScrollEvent): void => {
     this._nestedChildLists.forEach(childList => {
-      childList.ref && childList.ref._onScrollBeginDrag(e);
+      childList._onScrollBeginDrag(e);
     });
     this._viewabilityTuples.forEach(tuple => {
       tuple.viewabilityHelper.recordInteraction();
@@ -1924,9 +1794,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e);
   };
 
-  _onScrollEndDrag = (e): void => {
+  _onScrollEndDrag = (e: ScrollEvent): void => {
     this._nestedChildLists.forEach(childList => {
-      childList.ref && childList.ref._onScrollEndDrag(e);
+      childList._onScrollEndDrag(e);
     });
     const {velocity} = e.nativeEvent;
     if (velocity) {
@@ -1936,16 +1806,16 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     this.props.onScrollEndDrag && this.props.onScrollEndDrag(e);
   };
 
-  _onMomentumScrollBegin = (e): void => {
+  _onMomentumScrollBegin = (e: ScrollEvent): void => {
     this._nestedChildLists.forEach(childList => {
-      childList.ref && childList.ref._onMomentumScrollBegin(e);
+      childList._onMomentumScrollBegin(e);
     });
     this.props.onMomentumScrollBegin && this.props.onMomentumScrollBegin(e);
   };
 
-  _onMomentumScrollEnd = (e): void => {
+  _onMomentumScrollEnd = (e: ScrollEvent): void => {
     this._nestedChildLists.forEach(childList => {
-      childList.ref && childList.ref._onMomentumScrollEnd(e);
+      childList._onMomentumScrollEnd(e);
     });
     this._scrollMetrics.velocity = 0;
     this._computeBlankness();
@@ -1953,128 +1823,82 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   };
 
   _updateCellsToRender = () => {
-    const {
-      data,
-      getItemCount,
-      onEndReachedThreshold: _onEndReachedThreshold,
-    } = this.props;
-    const onEndReachedThreshold = onEndReachedThresholdOrDefault(
-      _onEndReachedThreshold,
-    );
-    const isVirtualizationDisabled = this._isVirtualizationDisabled();
-    this._updateViewableItems(data);
-    if (!data) {
-      return;
-    }
-    this.setState(state => {
-      let newState;
-      const {contentLength, offset, visibleLength} = this._scrollMetrics;
-      if (!isVirtualizationDisabled) {
-        // If we run this with bogus data, we'll force-render window {first: 0, last: 0},
-        // and wipe out the initialNumToRender rendered elements.
-        // So let's wait until the scroll view metrics have been set up. And until then,
-        // we will trust the initialNumToRender suggestion
-        if (visibleLength > 0 && contentLength > 0) {
-          // If we have a non-zero initialScrollIndex and run this before we've scrolled,
-          // we'll wipe out the initialNumToRender rendered elements starting at initialScrollIndex.
-          // So let's wait until we've scrolled the view to the right place. And until then,
-          // we will trust the initialScrollIndex suggestion.
-          if (!this.props.initialScrollIndex || this._scrollMetrics.offset) {
-            newState = computeWindowedRenderLimits(
-              this.props.data,
-              this.props.getItemCount,
-              maxToRenderPerBatchOrDefault(this.props.maxToRenderPerBatch),
-              windowSizeOrDefault(this.props.windowSize),
-              state,
-              this._getFrameMetricsApprox,
-              this._scrollMetrics,
-            );
-
-            // revert the state if calculations are off
-            // this would only happen on the inverted flatlist (probably a bug with overscroll-behavior)
-            // when scrolled from bottom all the way up until onEndReached is triggered
-            if (newState.first === newState.last) {
-              newState = state
-            }
-          }
-        }
-      } else {
-        const distanceFromEnd = contentLength - visibleLength - offset;
-        const renderAhead =
-          distanceFromEnd < onEndReachedThreshold * visibleLength
-            ? maxToRenderPerBatchOrDefault(this.props.maxToRenderPerBatch)
-            : 0;
-        newState = {
-          first: 0,
-          last: Math.min(state.last + renderAhead, getItemCount(data) - 1),
-        };
-      }
-      if (newState && this._nestedChildLists.size > 0) {
-        const newFirst = newState.first;
-        const newLast = newState.last;
-        // If some cell in the new state has a child list in it, we should only render
-        // up through that item, so that we give that list a chance to render.
-        // Otherwise there's churn from multiple child lists mounting and un-mounting
-        // their items.
-        for (let ii = newFirst; ii <= newLast; ii++) {
-          const cellKeyForIndex = this._indicesToKeys.get(ii);
-          const childListKeys =
-            cellKeyForIndex &&
-            this._cellKeysToChildListKeys.get(cellKeyForIndex);
-          if (!childListKeys) {
-            continue;
-          }
-          let someChildHasMore = false;
-          // For each cell, need to check whether any child list in it has more elements to render
-          for (let childKey of childListKeys) {
-            const childList = this._nestedChildLists.get(childKey);
-            if (childList && childList.ref && childList.ref.hasMore()) {
-              someChildHasMore = true;
-              break;
-            }
-          }
-          if (someChildHasMore) {
-            // $FlowFixMe[incompatible-use] The newState definitely exists past "if (newState &&"
-            newState.last = ii;
-            break;
-          }
-        }
-      }
+    this._updateViewableItems(this.props, this.state.cellsAroundViewport);
+
+    this.setState((state, props) => {
+      const cellsAroundViewport = this._adjustCellsAroundViewport(
+        props,
+        state.cellsAroundViewport,
+      );
+      const renderMask = VirtualizedList._createRenderMask(
+        props,
+        cellsAroundViewport,
+        this._getNonViewportRenderRegions(props),
+      );
+
       if (
-        newState != null &&
-        newState.first === state.first &&
-        newState.last === state.last
+        cellsAroundViewport.first === state.cellsAroundViewport.first &&
+        cellsAroundViewport.last === state.cellsAroundViewport.last &&
+        renderMask.equals(state.renderMask)
       ) {
-        newState = null;
+        return null;
       }
-      return newState;
+
+      return {cellsAroundViewport, renderMask};
     });
   };
 
-  _createViewToken = (index: number, isViewable: boolean) => {
-    const {data, getItem} = this.props;
+  _createViewToken = (
+    index: number,
+    isViewable: boolean,
+    props: FrameMetricProps,
+    // $FlowFixMe[missing-local-annot]
+  ) => {
+    const {data, getItem} = props;
     const item = getItem(data, index);
     return {
       index,
       item,
-      key: extractKey(this.props, item, index),
+      key: this._keyExtractor(item, index, props),
       isViewable,
     };
   };
 
-  _getFrameMetricsApprox = (
+  /**
+   * Gets an approximate offset to an item at a given index. Supports
+   * fractional indices.
+   */
+  _getOffsetApprox = (index: number, props: FrameMetricProps): number => {
+    if (Number.isInteger(index)) {
+      return this.__getFrameMetricsApprox(index, props).offset;
+    } else {
+      const frameMetrics = this.__getFrameMetricsApprox(
+        Math.floor(index),
+        props,
+      );
+      const remainder = index - Math.floor(index);
+      return frameMetrics.offset + remainder * frameMetrics.length;
+    }
+  };
+
+  __getFrameMetricsApprox: (
     index: number,
-  ): {
+    props: FrameMetricProps,
+  ) => {
     length: number,
     offset: number,
     ...
-  } => {
-    const frame = this._getFrameMetrics(index);
+  } = (index, props) => {
+    const frame = this._getFrameMetrics(index, props);
     if (frame && frame.index === index) {
       // check for invalid frames due to row re-ordering
       return frame;
     } else {
-      const {getItemLayout} = this.props;
+      const {data, getItemCount, getItemLayout} = props;
+      invariant(
+        index >= 0 && index < getItemCount(data),
+        'Tried to get frame for out of range index ' + index,
+      );
       invariant(
         !getItemLayout,
         'Should not have to estimate frames when a measurement metrics function is provided',
@@ -2088,6 +1912,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
 
   _getFrameMetrics = (
     index: number,
+    props: FrameMetricProps,
   ): ?{
     length: number,
     offset: number,
@@ -2095,265 +1920,106 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     inLayout?: boolean,
     ...
   } => {
-    const {data, getItem, getItemCount, getItemLayout} = this.props;
+    const {data, getItem, getItemCount, getItemLayout} = props;
     invariant(
-      getItemCount(data) > index,
+      index >= 0 && index < getItemCount(data),
       'Tried to get frame for out of range index ' + index,
     );
     const item = getItem(data, index);
-    let frame = item && this._frames[extractKey(this.props, item, index)];
+    const frame = this._frames[this._keyExtractor(item, index, props)];
     if (!frame || frame.index !== index) {
       if (getItemLayout) {
-        frame = getItemLayout(data, index);
+        /* $FlowFixMe[prop-missing] (>=0.63.0 site=react_native_fb) This comment
+         * suppresses an error found when Flow v0.63 was deployed. To see the error
+         * delete this comment and run Flow. */
+        return getItemLayout(data, index);
       }
     }
-    /* $FlowFixMe[prop-missing] (>=0.63.0 site=react_native_fb) This comment
-     * suppresses an error found when Flow v0.63 was deployed. To see the error
-     * delete this comment and run Flow. */
     return frame;
   };
 
-  _updateViewableItems(data: any) {
-    const {getItemCount} = this.props;
+  _getNonViewportRenderRegions = (
+    props: FrameMetricProps,
+  ): $ReadOnlyArray<{
+    first: number,
+    last: number,
+  }> => {
+    // Keep a viewport's worth of content around the last focused cell to allow
+    // random navigation around it without any blanking. E.g. tabbing from one
+    // focused item out of viewport to another.
+    if (
+      !(this._lastFocusedCellKey && this._cellRefs[this._lastFocusedCellKey])
+    ) {
+      return [];
+    }
+
+    const lastFocusedCellRenderer = this._cellRefs[this._lastFocusedCellKey];
+    const focusedCellIndex = lastFocusedCellRenderer.props.index;
+    const itemCount = props.getItemCount(props.data);
+    
+    // The last cell we rendered may be at a new index. Bail if we don't know
+    // where it is.
+    if (
+      focusedCellIndex >= itemCount ||
+      this._keyExtractor(
+        props.getItem(props.data, focusedCellIndex),
+        focusedCellIndex,
+        props,
+      ) !== this._lastFocusedCellKey
+    ) {
+      return [];
+    }
+
+    let first = focusedCellIndex;
+    let heightOfCellsBeforeFocused = 0;
+    for (
+      let i = first - 1;
+      i >= 0 && heightOfCellsBeforeFocused < this._scrollMetrics.visibleLength;
+      i--
+    ) {
+      first--;
+      heightOfCellsBeforeFocused += this.__getFrameMetricsApprox(
+        i,
+        props,
+      ).length;
+    }
+
+    let last = focusedCellIndex;
+    let heightOfCellsAfterFocused = 0;
+    for (
+      let i = last + 1;
+      i < itemCount &&
+      heightOfCellsAfterFocused < this._scrollMetrics.visibleLength;
+      i++
+    ) {
+      last++;
+      heightOfCellsAfterFocused += this.__getFrameMetricsApprox(
+        i,
+        props,
+      ).length;
+    }
+
+    return [{first, last}];
+  };
 
+  _updateViewableItems(
+    props: FrameMetricProps,
+    cellsAroundViewport: {first: number, last: number},
+  ) {
     this._viewabilityTuples.forEach(tuple => {
       tuple.viewabilityHelper.onUpdate(
-        getItemCount(data),
+        props,
         this._scrollMetrics.offset,
         this._scrollMetrics.visibleLength,
         this._getFrameMetrics,
         this._createViewToken,
         tuple.onViewableItemsChanged,
-        this.state,
+        cellsAroundViewport,
       );
     });
   }
 }
 
-type CellRendererProps = {
-  CellRendererComponent?: ?React.ComponentType<any>,
-  ItemSeparatorComponent: ?React.ComponentType<
-    any | {highlighted: boolean, leadingItem: ?Item},
-  >,
-  cellKey: string,
-  fillRateHelper: FillRateHelper,
-  horizontal: ?boolean,
-  index: number,
-  inversionStyle: ViewStyleProp,
-  item: Item,
-  // This is extracted by ScrollViewStickyHeader
-  onLayout: (event: Object) => void,
-  onUnmount: (cellKey: string) => void,
-  onUpdateSeparators: (cellKeys: Array<?string>, props: Object) => void,
-  parentProps: {
-    // e.g. height, y,
-    getItemLayout?: (
-      data: any,
-      index: number,
-    ) => {
-      length: number,
-      offset: number,
-      index: number,
-      ...
-    },
-    renderItem?: ?RenderItemType<Item>,
-    ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),
-    ...
-  },
-  prevCellKey: ?string,
-  ...
-};
-
-type CellRendererState = {
-  separatorProps: $ReadOnly<{|
-    highlighted: boolean,
-    leadingItem: ?Item,
-  |}>,
-  ...
-};
-
-class CellRenderer extends React.Component<
-  CellRendererProps,
-  CellRendererState,
-> {
-  state = {
-    separatorProps: {
-      highlighted: false,
-      leadingItem: this.props.item,
-    },
-  };
-
-  static getDerivedStateFromProps(
-    props: CellRendererProps,
-    prevState: CellRendererState,
-  ): ?CellRendererState {
-    return {
-      separatorProps: {
-        ...prevState.separatorProps,
-        leadingItem: props.item,
-      },
-    };
-  }
-
-  // TODO: consider factoring separator stuff out of VirtualizedList into FlatList since it's not
-  // reused by SectionList and we can keep VirtualizedList simpler.
-  _separators = {
-    highlight: () => {
-      const {cellKey, prevCellKey} = this.props;
-      this.props.onUpdateSeparators([cellKey, prevCellKey], {
-        highlighted: true,
-      });
-    },
-    unhighlight: () => {
-      const {cellKey, prevCellKey} = this.props;
-      this.props.onUpdateSeparators([cellKey, prevCellKey], {
-        highlighted: false,
-      });
-    },
-    updateProps: (select: 'leading' | 'trailing', newProps: Object) => {
-      const {cellKey, prevCellKey} = this.props;
-      this.props.onUpdateSeparators(
-        [select === 'leading' ? prevCellKey : cellKey],
-        newProps,
-      );
-    },
-  };
-
-  updateSeparatorProps(newProps: Object) {
-    this.setState(state => ({
-      separatorProps: {...state.separatorProps, ...newProps},
-    }));
-  }
-
-  componentWillUnmount() {
-    this.props.onUnmount(this.props.cellKey);
-  }
-
-  _renderElement(renderItem, ListItemComponent, item, index) {
-    if (renderItem && ListItemComponent) {
-      console.warn(
-        'VirtualizedList: Both ListItemComponent and renderItem props are present. ListItemComponent will take' +
-          ' precedence over renderItem.',
-      );
-    }
-
-    if (ListItemComponent) {
-      /* $FlowFixMe[not-a-component] (>=0.108.0 site=react_native_fb) This
-       * comment suppresses an error found when Flow v0.108 was deployed. To
-       * see the error, delete this comment and run Flow. */
-      /* $FlowFixMe[incompatible-type-arg] (>=0.108.0 site=react_native_fb)
-       * This comment suppresses an error found when Flow v0.108 was deployed.
-       * To see the error, delete this comment and run Flow. */
-      return React.createElement(ListItemComponent, {
-        item,
-        index,
-        separators: this._separators,
-      });
-    }
-
-    if (renderItem) {
-      return renderItem({
-        item,
-        index,
-        separators: this._separators,
-      });
-    }
-
-    invariant(
-      false,
-      'VirtualizedList: Either ListItemComponent or renderItem props are required but none were found.',
-    );
-  }
-
-  render() {
-    const {
-      CellRendererComponent,
-      ItemSeparatorComponent,
-      fillRateHelper,
-      horizontal,
-      item,
-      index,
-      inversionStyle,
-      parentProps,
-    } = this.props;
-    const {renderItem, getItemLayout, ListItemComponent} = parentProps;
-    const element = this._renderElement(
-      renderItem,
-      ListItemComponent,
-      item,
-      index,
-    );
-
-    const onLayout =
-      /* $FlowFixMe[prop-missing] (>=0.68.0 site=react_native_fb) This comment
-       * suppresses an error found when Flow v0.68 was deployed. To see the
-       * error delete this comment and run Flow. */
-      getItemLayout && !parentProps.debug && !fillRateHelper.enabled()
-        ? undefined
-        : this.props.onLayout;
-    // NOTE: that when this is a sticky header, `onLayout` will get automatically extracted and
-    // called explicitly by `ScrollViewStickyHeader`.
-    const itemSeparator = ItemSeparatorComponent && (
-      <ItemSeparatorComponent {...this.state.separatorProps} />
-    );
-    const cellStyle = inversionStyle
-      ? horizontal
-        ? [styles.rowReverse, inversionStyle]
-        : [styles.columnReverse, inversionStyle]
-      : horizontal
-      ? [styles.row, inversionStyle]
-      : inversionStyle;
-    const result = !CellRendererComponent ? (
-      /* $FlowFixMe[incompatible-type-arg] (>=0.89.0 site=react_native_fb) *
-         This comment suppresses an error found when Flow v0.89 was deployed. *
-         To see the error, delete this comment and run Flow. */
-      <View style={cellStyle} onLayout={onLayout}>
-        {element}
-        {itemSeparator}
-      </View>
-    ) : (
-      <CellRendererComponent
-        {...this.props}
-        style={cellStyle}
-        onLayout={onLayout}>
-        {element}
-        {itemSeparator}
-      </CellRendererComponent>
-    );
-
-    return (
-      <VirtualizedListCellContextProvider cellKey={this.props.cellKey}>
-        {result}
-      </VirtualizedListCellContextProvider>
-    );
-  }
-}
-
-function describeNestedLists(childList: {
-  +cellKey: string,
-  +key: string,
-  +ref: VirtualizedList,
-  +parentDebugInfo: ListDebugInfo,
-  +horizontal: boolean,
-  ...
-}) {
-  let trace =
-    'VirtualizedList trace:\n' +
-    `  Child (${childList.horizontal ? 'horizontal' : 'vertical'}):\n` +
-    `    listKey: ${childList.key}\n` +
-    `    cellKey: ${childList.cellKey}`;
-
-  let debugInfo = childList.parentDebugInfo;
-  while (debugInfo) {
-    trace +=
-      `\n  Parent (${debugInfo.horizontal ? 'horizontal' : 'vertical'}):\n` +
-      `    listKey: ${debugInfo.listKey}\n` +
-      `    cellKey: ${debugInfo.cellKey}`;
-    debugInfo = debugInfo.parent;
-  }
-  return trace;
-}
-
 const styles = StyleSheet.create({
   verticallyInverted: {
     transform: 'scaleY(-1)',
@@ -2361,15 +2027,6 @@ const styles = StyleSheet.create({
   horizontallyInverted: {
     transform: 'scaleX(-1)',
   },
-  row: {
-    flexDirection: 'row',
-  },
-  rowReverse: {
-    flexDirection: 'row-reverse',
-  },
-  columnReverse: {
-    flexDirection: 'column-reverse',
-  },
   debug: {
     flex: 1,
   },
@@ -2400,4 +2057,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default VirtualizedList;
+export default VirtualizedList;
\ No newline at end of file
diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedSectionList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedSectionList/index.js
index 00930728ce..c37c8d3727 100644
--- a/packages/react-native-web/src/vendor/react-native/VirtualizedSectionList/index.js
+++ b/packages/react-native-web/src/vendor/react-native/VirtualizedSectionList/index.js
@@ -8,15 +8,12 @@
  * @format
  */
 
-'use strict';
-
 import type {ViewToken} from '../ViewabilityHelper';
-import {keyExtractor as defaultKeyExtractor} from '../VirtualizeUtils';
 import View from '../../../exports/View';
 import VirtualizedList from '../VirtualizedList';
-import * as React from 'react';
-
+import {keyExtractor as defaultKeyExtractor} from '../VirtualizeUtils';
 import invariant from 'fbjs/lib/invariant';
+import * as React from 'react';
 
 type Item = any;
 
@@ -141,9 +138,9 @@ class VirtualizedSectionList<
       return;
     }
     if (params.itemIndex > 0 && this.props.stickySectionHeadersEnabled) {
-      // $FlowFixMe[prop-missing] Cannot access private property
-      const frame = this._listRef._getFrameMetricsApprox(
+      const frame = this._listRef.__getFrameMetricsApprox(
         index - params.itemIndex,
+        this._listRef.props,
       );
       viewOffset += frame.length;
     }
@@ -152,6 +149,7 @@ class VirtualizedSectionList<
       viewOffset,
       index,
     };
+    // $FlowFixMe[incompatible-use]
     this._listRef.scrollToIndex(toIndexParams);
   }
 
@@ -174,7 +172,7 @@ class VirtualizedSectionList<
     const listHeaderOffset = this.props.ListHeaderComponent ? 1 : 0;
 
     const stickyHeaderIndices = this.props.stickySectionHeadersEnabled
-      ? []
+      ? ([]: Array<number>)
       : undefined;
 
     let itemCount = 0;
@@ -239,6 +237,7 @@ class VirtualizedSectionList<
     return null;
   }
 
+  // $FlowFixMe[missing-local-annot]
   _keyExtractor = (item: Item, index: number) => {
     const info = this._subExtractor(index);
     return (info && info.key) || String(index);
@@ -342,7 +341,8 @@ class VirtualizedSectionList<
   };
 
   _renderItem =
-    (listItemCount: number) =>
+    (listItemCount: number): $FlowFixMe =>
+    // eslint-disable-next-line react/no-unstable-nested-components
     ({item, index}: {item: Item, index: number, ...}) => {
       const info = this._subExtractor(index);
       if (!info) {
@@ -394,29 +394,33 @@ class VirtualizedSectionList<
       }
     };
 
-  _updatePropsFor = (cellKey, value) => {
+  _updatePropsFor = (cellKey: string, value: any) => {
     const updateProps = this._updatePropsMap[cellKey];
     if (updateProps != null) {
       updateProps(value);
     }
   };
 
-  _updateHighlightFor = (cellKey, value) => {
+  _updateHighlightFor = (cellKey: string, value: boolean) => {
     const updateHighlight = this._updateHighlightMap[cellKey];
     if (updateHighlight != null) {
       updateHighlight(value);
     }
   };
 
-  _setUpdateHighlightFor = (cellKey, updateHighlightFn) => {
+  _setUpdateHighlightFor = (
+    cellKey: string,
+    updateHighlightFn: ?(boolean) => void,
+  ) => {
     if (updateHighlightFn != null) {
       this._updateHighlightMap[cellKey] = updateHighlightFn;
     } else {
+      // $FlowFixMe[prop-missing]
       delete this._updateHighlightFor[cellKey];
     }
   };
 
-  _setUpdatePropsFor = (cellKey, updatePropsFn) => {
+  _setUpdatePropsFor = (cellKey: string, updatePropsFn: ?(boolean) => void) => {
     if (updatePropsFn != null) {
       this._updatePropsMap[cellKey] = updatePropsFn;
     } else {
@@ -448,10 +452,10 @@ class VirtualizedSectionList<
     return null;
   }
 
-  _updateHighlightMap = {};
-  _updatePropsMap = {};
+  _updateHighlightMap: {[string]: (boolean) => void} = {};
+  _updatePropsMap: {[string]: void | (boolean => void)} = {};
   _listRef: ?React.ElementRef<typeof VirtualizedList>;
-  _captureRef = ref => {
+  _captureRef = (ref: null | React$ElementRef<Class<VirtualizedList>>) => {
     this._listRef = ref;
   };
 }
@@ -525,6 +529,7 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
 
   React.useEffect(() => {
     setSelfHighlightCallback(cellKey, setSeparatorHighlighted);
+    // $FlowFixMe[incompatible-call]
     setSelfUpdatePropsCallback(cellKey, setSeparatorProps);
 
     return () => {
@@ -598,4 +603,14 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
   );
 }
 
-export default VirtualizedSectionList;
\ No newline at end of file
+/* $FlowFixMe[class-object-subtyping] added when improving typing for this
+ * parameters */
+// $FlowFixMe[method-unbinding]
+export default (VirtualizedSectionList: React.AbstractComponent<
+  React.ElementConfig<typeof VirtualizedSectionList>,
+  $ReadOnly<{
+    getListRef: () => ?React.ElementRef<typeof VirtualizedList>,
+    scrollToLocation: (params: ScrollToLocationParamsType) => void,
+    ...
+  }>,
+>);
diff --git a/packages/react-native-web/src/vendor/react-native/infoLog/index.js b/packages/react-native-web/src/vendor/react-native/infoLog/index.js
index 4bf15b1408..7f2a63e0cd 100644
--- a/packages/react-native-web/src/vendor/react-native/infoLog/index.js
+++ b/packages/react-native-web/src/vendor/react-native/infoLog/index.js
@@ -3,13 +3,17 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict
  */
+
 'use strict';
 
 /**
  * Intentional info-level logging for clear separation from ad-hoc console debug logging.
  */
-function infoLog(...args) {
+function infoLog(...args: Array<mixed>): void {
   return console.log(...args);
 }