From ef55e6fc47b9adc83afc6ddcae92d7461013512b Mon Sep 17 00:00:00 2001
From: Marlene Cota <1422161+marlenecota@users.noreply.github.com>
Date: Tue, 21 May 2024 12:20:52 -0700
Subject: [PATCH] Integration 04/20/24 (03a51da72) (#13255)

* RN Integration 04/20

* Change files

* add captureStackTrace

* add PixelRatio example copy override

* add PixelRatioExample.js

* snapshots for PixelRatio

* return empty StackFrame instead of nullptr

* add email to change files
---
 ...-c75f8136-1a7a-4073-8eea-d9d2cac625c3.json |    7 +
 ...-507c6778-bf67-4ec4-97f7-8d55c041d566.json |    7 +
 ...-1f79d48e-175e-43c5-ade0-1c62a2b7ebc0.json |    7 +
 ...-021415fa-fafb-4738-ad99-2b271fcf623c.json |    7 +
 .../react-native-win32-tester/overrides.json  |    4 +-
 .../react-native-win32-tester/package.json    |    4 +-
 .../src/js/utils/RNTesterList.win32.js        |   12 +
 .../react-native-win32/.flowconfig            |    2 +-
 .../react-native-win32/overrides.json         |    4 +-
 .../react-native-win32/package.json           |   22 +-
 .../automation-channel/package.json           |    2 +-
 .../tester/overrides.json                     |    4 +-
 .../@react-native-windows/tester/package.json |    4 +-
 .../src/js/utils/RNTesterList.windows.js      |   12 +
 .../@react-native/monorepo/overrides.json     |    4 +-
 packages/@react-native/monorepo/package.json  |   16 +-
 .../tester/js/components/RNTOption.js         |    7 +-
 .../tester/js/components/RNTTestDetails.js    |    8 +-
 .../Accessibility/AccessibilityExample.js     | 1741 +++++++++--------
 .../ComposeAnimationsWithEasingExample.js     |    6 +-
 .../js/examples/Animated/ComposingExample.js  |    8 +-
 .../Animated/ContinuousInteractionsExample.js |   14 +-
 .../js/examples/Animated/EasingExample.js     |    7 +-
 .../Animated/TransformStylesExample.js        |    8 +-
 .../Animated/utils/ToggleNativeDriver.js      |    4 +-
 .../RNTesterPlatformTestEventRecorder.js      |    1 +
 .../examples/PixelRatio/PixelRatioExample.js  |  201 ++
 .../tester/js/utils/RNTesterList.android.js   |    5 +
 .../tester/js/utils/RNTesterList.ios.js       |    4 +
 packages/@react-native/tester/overrides.json  |   21 +-
 packages/@react-native/tester/package.json    |    4 +-
 .../babel-react-native-config/package.json    |    4 +-
 .../@rnw-scripts/eslint-config/package.json   |    2 +-
 .../metro-dev-config/package.json             |    2 +-
 packages/e2e-test-app-fabric/package.json     |    7 +-
 .../__snapshots__/HomeUIADump.test.ts.snap    |  258 ++-
 .../__snapshots__/snapshotPages.test.js.snap  |  929 +++++++--
 packages/e2e-test-app/package.json            |    4 +-
 packages/integration-test-app/package.json    |    4 +-
 packages/playground/package.json              |    4 +-
 packages/sample-app-fabric/package.json       |    4 +-
 packages/sample-apps/package.json             |    4 +-
 vnext/.flowconfig                             |    2 +-
 .../cxxreact/JSExecutor.cpp                   |    6 +
 .../cxxreact/JSExecutor.h                     |   17 +
 vnext/Shared/HermesRuntimeHolder.cpp          |    6 +
 vnext/Shared/HermesRuntimeHolder.h            |    3 +
 vnext/Shared/Shared.vcxitems                  |    3 -
 .../NativeReactNativeFeatureFlagsSpec.g.h     |   16 +-
 vnext/codegen/NativeUIManagerSpec.g.h         |   22 +-
 vnext/codegen/rnwcoreJSI-generated.cpp        |   24 +-
 vnext/codegen/rnwcoreJSI.h                    |   27 +-
 vnext/overrides.json                          |    6 +-
 vnext/package.json                            |   22 +-
 yarn.lock                                     |  178 +-
 55 files changed, 2504 insertions(+), 1207 deletions(-)
 create mode 100644 change/@office-iss-react-native-win32-c75f8136-1a7a-4073-8eea-d9d2cac625c3.json
 create mode 100644 change/@react-native-windows-automation-channel-507c6778-bf67-4ec4-97f7-8d55c041d566.json
 create mode 100644 change/@rnw-scripts-eslint-config-1f79d48e-175e-43c5-ade0-1c62a2b7ebc0.json
 create mode 100644 change/react-native-windows-021415fa-fafb-4738-ad99-2b271fcf623c.json
 create mode 100644 packages/@react-native/tester/js/examples/PixelRatio/PixelRatioExample.js

diff --git a/change/@office-iss-react-native-win32-c75f8136-1a7a-4073-8eea-d9d2cac625c3.json b/change/@office-iss-react-native-win32-c75f8136-1a7a-4073-8eea-d9d2cac625c3.json
new file mode 100644
index 0000000000..5193d9ad15
--- /dev/null
+++ b/change/@office-iss-react-native-win32-c75f8136-1a7a-4073-8eea-d9d2cac625c3.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "RN Integration 04/20",
+  "packageName": "@office-iss/react-native-win32",
+  "email": "1422161+marlenecota@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@react-native-windows-automation-channel-507c6778-bf67-4ec4-97f7-8d55c041d566.json b/change/@react-native-windows-automation-channel-507c6778-bf67-4ec4-97f7-8d55c041d566.json
new file mode 100644
index 0000000000..93bd1ba628
--- /dev/null
+++ b/change/@react-native-windows-automation-channel-507c6778-bf67-4ec4-97f7-8d55c041d566.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "RN Integration 04/20",
+  "packageName": "@react-native-windows/automation-channel",
+  "email": "1422161+marlenecota@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@rnw-scripts-eslint-config-1f79d48e-175e-43c5-ade0-1c62a2b7ebc0.json b/change/@rnw-scripts-eslint-config-1f79d48e-175e-43c5-ade0-1c62a2b7ebc0.json
new file mode 100644
index 0000000000..96936206c5
--- /dev/null
+++ b/change/@rnw-scripts-eslint-config-1f79d48e-175e-43c5-ade0-1c62a2b7ebc0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "RN Integration 04/20",
+  "packageName": "@rnw-scripts/eslint-config",
+  "email": "1422161+marlenecota@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-021415fa-fafb-4738-ad99-2b271fcf623c.json b/change/react-native-windows-021415fa-fafb-4738-ad99-2b271fcf623c.json
new file mode 100644
index 0000000000..1427b07e24
--- /dev/null
+++ b/change/react-native-windows-021415fa-fafb-4738-ad99-2b271fcf623c.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "RN Integration 04/20",
+  "packageName": "react-native-windows",
+  "email": "1422161+marlenecota@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/@office-iss/react-native-win32-tester/overrides.json b/packages/@office-iss/react-native-win32-tester/overrides.json
index c5f381ea38..52b320603e 100644
--- a/packages/@office-iss/react-native-win32-tester/overrides.json
+++ b/packages/@office-iss/react-native-win32-tester/overrides.json
@@ -5,7 +5,7 @@
   "excludePatterns": [
     "src/js/examples-win32/**"
   ],
-  "baseVersion": "0.75.0-nightly-20240413-1b152f6ec",
+  "baseVersion": "0.75.0-nightly-20240420-03a51da72",
   "overrides": [
     {
       "type": "patch",
@@ -42,7 +42,7 @@
       "type": "derived",
       "file": "src/js/utils/RNTesterList.win32.js",
       "baseFile": "packages/rn-tester/js/utils/RNTesterList.android.js",
-      "baseHash": "c40d0a03a89b9017cbb08a0449d5a0c32cadc5f2"
+      "baseHash": "17abcd7c97a27d4d970d27c1449107222ffb6c85"
     }
   ]
 }
\ No newline at end of file
diff --git a/packages/@office-iss/react-native-win32-tester/package.json b/packages/@office-iss/react-native-win32-tester/package.json
index 601a7ae4ab..86ba39bb9c 100644
--- a/packages/@office-iss/react-native-win32-tester/package.json
+++ b/packages/@office-iss/react-native-win32-tester/package.json
@@ -19,7 +19,7 @@
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.0.0-canary.246",
     "react": "18.0.0",
-    "react-native": "0.75.0-nightly-20240413-1b152f6ec"
+    "react-native": "0.75.0-nightly-20240420-03a51da72"
   },
   "devDependencies": {
     "@office-iss/react-native-win32": "^0.0.0-canary.246",
@@ -30,7 +30,7 @@
     "@types/node": "^18.0.0",
     "eslint": "^8.19.0",
     "just-scripts": "^1.3.3",
-    "react-native": "0.75.0-nightly-20240413-1b152f6ec",
+    "react-native": "0.75.0-nightly-20240420-03a51da72",
     "react-native-platform-override": "^1.9.33",
     "typescript": "5.0.4"
   },
diff --git a/packages/@office-iss/react-native-win32-tester/src/js/utils/RNTesterList.win32.js b/packages/@office-iss/react-native-win32-tester/src/js/utils/RNTesterList.win32.js
index ebf102266a..e06e4d8b56 100644
--- a/packages/@office-iss/react-native-win32-tester/src/js/utils/RNTesterList.win32.js
+++ b/packages/@office-iss/react-native-win32-tester/src/js/utils/RNTesterList.win32.js
@@ -260,6 +260,18 @@ const APIs: Array<RNTesterModuleInfo> = ([
     category: 'Basic',
     module: require('../examples/PanResponder/PanResponderExample'),
   },
+  {
+    key: 'PixelRatio',
+    category: 'UI',
+    module: require('../examples/PixelRatio/PixelRatioExample'),
+  },
+  /*
+  {
+    key: 'PermissionsExampleAndroid',
+    category: 'Android',
+    module: require('../examples/PermissionsAndroid/PermissionsExample'),
+  },
+  */
   {
     key: 'PlatformColorExample',
     category: 'UI',
diff --git a/packages/@office-iss/react-native-win32/.flowconfig b/packages/@office-iss/react-native-win32/.flowconfig
index 18408d0005..1ed9dddf9b 100644
--- a/packages/@office-iss/react-native-win32/.flowconfig
+++ b/packages/@office-iss/react-native-win32/.flowconfig
@@ -153,4 +153,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.233.0
+^0.234.0
diff --git a/packages/@office-iss/react-native-win32/overrides.json b/packages/@office-iss/react-native-win32/overrides.json
index d96973e744..52850d1eff 100644
--- a/packages/@office-iss/react-native-win32/overrides.json
+++ b/packages/@office-iss/react-native-win32/overrides.json
@@ -7,13 +7,13 @@
     "**/__snapshots__/**",
     "src-win/rntypes/**"
   ],
-  "baseVersion": "0.75.0-nightly-20240413-1b152f6ec",
+  "baseVersion": "0.75.0-nightly-20240420-03a51da72",
   "overrides": [
     {
       "type": "derived",
       "file": ".flowconfig",
       "baseFile": ".flowconfig",
-      "baseHash": "207887dce4d232e4ded4dbeefe4188766b24144a"
+      "baseHash": "4f8e1f39d8ed29d7d0e21455cac407d352a6824d"
     },
     {
       "type": "derived",
diff --git a/packages/@office-iss/react-native-win32/package.json b/packages/@office-iss/react-native-win32/package.json
index 0060466df4..db8ccfc2c9 100644
--- a/packages/@office-iss/react-native-win32/package.json
+++ b/packages/@office-iss/react-native-win32/package.json
@@ -30,13 +30,13 @@
     "@react-native-community/cli-platform-android": "14.0.0-alpha.2",
     "@react-native-community/cli-platform-ios": "14.0.0-alpha.2",
     "@react-native/assets": "1.0.0",
-    "@react-native/assets-registry": "0.75.0-nightly-20240413-1b152f6ec",
-    "@react-native/codegen": "0.75.0-nightly-20240413-1b152f6ec",
-    "@react-native/community-cli-plugin": "0.75.0-nightly-20240413-1b152f6ec",
-    "@react-native/gradle-plugin": "0.75.0-nightly-20240413-1b152f6ec",
-    "@react-native/js-polyfills": "0.75.0-nightly-20240413-1b152f6ec",
-    "@react-native/normalize-colors": "0.75.0-nightly-20240413-1b152f6ec",
-    "@react-native/virtualized-lists": "0.75.0-nightly-20240413-1b152f6ec",
+    "@react-native/assets-registry": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/codegen": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/community-cli-plugin": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/gradle-plugin": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/js-polyfills": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/normalize-colors": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/virtualized-lists": "0.75.0-nightly-20240420-03a51da72",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",
@@ -56,7 +56,7 @@
     "pretty-format": "^26.5.2",
     "promise": "^8.3.0",
     "react-clone-referenced-element": "^1.0.1",
-    "react-devtools-core": "^5.0.2",
+    "react-devtools-core": "5.1.0",
     "react-refresh": "^0.14.0",
     "react-shallow-renderer": "^16.15.0",
     "regenerator-runtime": "^0.13.2",
@@ -70,7 +70,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/eslint-parser": "^7.20.0",
-    "@react-native/metro-config": "0.75.0-nightly-20240413-1b152f6ec",
+    "@react-native/metro-config": "0.75.0-nightly-20240420-03a51da72",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
     "@rnw-scripts/eslint-config": "1.2.16",
     "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.20",
@@ -86,14 +86,14 @@
     "just-scripts": "^1.3.3",
     "prettier": "2.8.8",
     "react": "18.2.0",
-    "react-native": "0.75.0-nightly-20240413-1b152f6ec",
+    "react-native": "0.75.0-nightly-20240420-03a51da72",
     "react-native-platform-override": "^1.9.33",
     "typescript": "5.0.4"
   },
   "peerDependencies": {
     "@types/react": "^18.2.6",
     "react": "18.2.0",
-    "react-native": "0.75.0-nightly-20240413-1b152f6ec"
+    "react-native": "0.75.0-nightly-20240420-03a51da72"
   },
   "beachball": {
     "defaultNpmTag": "canary",
diff --git a/packages/@react-native-windows/automation-channel/package.json b/packages/@react-native-windows/automation-channel/package.json
index 8c79aeb1b2..f70f07d359 100644
--- a/packages/@react-native-windows/automation-channel/package.json
+++ b/packages/@react-native-windows/automation-channel/package.json
@@ -31,7 +31,7 @@
     "just-scripts": "^1.3.2",
     "prettier": "2.8.8",
     "react": "18.2.0",
-    "react-native": "0.75.0-nightly-20240413-1b152f6ec",
+    "react-native": "0.75.0-nightly-20240420-03a51da72",
     "react-native-windows": "^0.0.0-canary.817",
     "typescript": "5.0.4"
   },
diff --git a/packages/@react-native-windows/tester/overrides.json b/packages/@react-native-windows/tester/overrides.json
index a0a38e65bf..01d251fb53 100644
--- a/packages/@react-native-windows/tester/overrides.json
+++ b/packages/@react-native-windows/tester/overrides.json
@@ -5,7 +5,7 @@
   "excludePatterns": [
     "src/js/examples-win/**"
   ],
-  "baseVersion": "0.75.0-nightly-20240413-1b152f6ec",
+  "baseVersion": "0.75.0-nightly-20240420-03a51da72",
   "overrides": [
     {
       "type": "derived",
@@ -78,7 +78,7 @@
       "type": "derived",
       "file": "src/js/utils/RNTesterList.windows.js",
       "baseFile": "packages/rn-tester/js/utils/RNTesterList.android.js",
-      "baseHash": "c40d0a03a89b9017cbb08a0449d5a0c32cadc5f2"
+      "baseHash": "17abcd7c97a27d4d970d27c1449107222ffb6c85"
     }
   ]
 }
\ No newline at end of file
diff --git a/packages/@react-native-windows/tester/package.json b/packages/@react-native-windows/tester/package.json
index e7c73ed429..6fc66adec0 100644
--- a/packages/@react-native-windows/tester/package.json
+++ b/packages/@react-native-windows/tester/package.json
@@ -18,7 +18,7 @@
   "peerDependencies": {
     "@react-native-picker/picker": "2.4.10",
     "react": "18.0.0",
-    "react-native": "0.75.0-nightly-20240413-1b152f6ec",
+    "react-native": "0.75.0-nightly-20240420-03a51da72",
     "react-native-windows": "^0.0.0-canary.817",
     "react-native-xaml": "^0.0.78"
   },
@@ -31,7 +31,7 @@
     "@types/node": "^18.0.0",
     "eslint": "^8.19.0",
     "just-scripts": "^1.3.3",
-    "react-native": "0.75.0-nightly-20240413-1b152f6ec",
+    "react-native": "0.75.0-nightly-20240420-03a51da72",
     "react-native-platform-override": "^1.9.33",
     "react-native-windows": "^0.0.0-canary.817",
     "typescript": "5.0.4"
diff --git a/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js b/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js
index 00162c3495..8feae6ffcb 100644
--- a/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js
+++ b/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js
@@ -346,6 +346,18 @@ const APIs: Array<RNTesterModuleInfo> = ([
     category: 'Basic',
     module: require('../examples/PanResponder/PanResponderExample'),
   },
+  {
+    key: 'PixelRatio',
+    category: 'UI',
+    module: require('../examples/PixelRatio/PixelRatioExample'),
+  },
+  /*
+  {
+    key: 'PermissionsExampleAndroid',
+    category: 'Android',
+    module: require('../examples/PermissionsAndroid/PermissionsExample'),
+  },
+  */
   {
     key: 'PlatformColorExample',
     category: 'UI',
diff --git a/packages/@react-native/monorepo/overrides.json b/packages/@react-native/monorepo/overrides.json
index 1add54917d..558cbe8263 100644
--- a/packages/@react-native/monorepo/overrides.json
+++ b/packages/@react-native/monorepo/overrides.json
@@ -1,11 +1,11 @@
 {
-  "baseVersion": "0.75.0-nightly-20240413-1b152f6ec",
+  "baseVersion": "0.75.0-nightly-20240420-03a51da72",
   "overrides": [
     {
       "type": "patch",
       "file": "package.json",
       "baseFile": "package.json",
-      "baseHash": "81f7183581b4f3efc83807acf9d13acf11cbbc6e"
+      "baseHash": "d3015ceabe0cf60dff4ad9eb59b102608b40c8ca"
     }
   ]
 }
\ No newline at end of file
diff --git a/packages/@react-native/monorepo/package.json b/packages/@react-native/monorepo/package.json
index 799a1109e7..56a06652b9 100644
--- a/packages/@react-native/monorepo/package.json
+++ b/packages/@react-native/monorepo/package.json
@@ -2,14 +2,7 @@
   "name": "@react-native/monorepo",
   "private": true,
   "version": "1000.0.0",
-  "description": "A framework for building native apps using React",
   "license": "MIT",
-  "repository": "github:facebook/react-native",
-  "types": "types",
-  "jest-junit": {
-    "outputDirectory": "reports/junit",
-    "outputName": "js-test-results.xml"
-  },
   "scripts": {
     "android": "cd packages/rn-tester && npm run android",
     "build-android": "./gradlew :packages:react-native:ReactAndroid:build",
@@ -42,9 +35,6 @@
     "packages/*",
     "tools/*"
   ],
-  "peerDependencies": {
-    "react": "18.2.0"
-  },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/eslint-parser": "^7.20.0",
@@ -55,8 +45,8 @@
     "@definitelytyped/dtslint": "^0.0.127",
     "@jest/create-cache-key-function": "^29.6.3",
     "@pkgjs/parseargs": "^0.11.0",
-    "@react-native/metro-babel-transformer": "0.75.0-nightly-20240413-1b152f6ec",
-    "@react-native/metro-config": "0.75.0-nightly-20240413-1b152f6ec",
+    "@react-native/metro-babel-transformer": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/metro-config": "0.75.0-nightly-20240420-03a51da72",
     "@tsconfig/node18": "1.0.1",
     "@types/react": "^18.2.6",
     "@typescript-eslint/parser": "^7.1.1",
@@ -83,7 +73,7 @@
     "eslint-plugin-redundant-undefined": "^0.4.0",
     "eslint-plugin-relay": "^1.8.3",
     "flow-api-translator": "0.20.1",
-    "flow-bin": "^0.233.0",
+    "flow-bin": "^0.234.0",
     "glob": "^7.1.1",
     "hermes-eslint": "0.20.0",
     "hermes-transform": "0.20.0",
diff --git a/packages/@react-native/tester/js/components/RNTOption.js b/packages/@react-native/tester/js/components/RNTOption.js
index 7d3d534277..0d92178524 100644
--- a/packages/@react-native/tester/js/components/RNTOption.js
+++ b/packages/@react-native/tester/js/components/RNTOption.js
@@ -49,6 +49,7 @@ export default function RNTOption(props: Props): React.Node {
       testID={props.testID}>
       <View
         style={[
+          {borderColor: theme.BorderColor},
           styles.container,
           props.selected === true ? styles.selected : null,
           pressed && props.selected !== true ? styles.pressed : null,
@@ -60,7 +61,7 @@ export default function RNTOption(props: Props): React.Node {
             : null,
           props.style,
         ]}>
-        <Text style={styles.label}>{props.label}</Text>
+        <Text style={{color: theme.SecondaryLabelColor}}>{props.label}</Text>
       </View>
     </Pressable>
   );
@@ -70,16 +71,12 @@ const styles = StyleSheet.create({
   pressed: {
     backgroundColor: 'rgba(100,215,255,.3)',
   },
-  label: {
-    color: 'black',
-  },
   selected: {
     backgroundColor: 'rgba(100,215,255,.3)',
     borderColor: 'rgba(100,215,255,.3)',
   },
   disabled: {borderWidth: 0},
   container: {
-    borderColor: 'rgba(0,0,0, 0.1)',
     borderWidth: 1,
     borderRadius: 16,
     padding: 6,
diff --git a/packages/@react-native/tester/js/components/RNTTestDetails.js b/packages/@react-native/tester/js/components/RNTTestDetails.js
index 1b5d61e9bc..7ca2bf5206 100644
--- a/packages/@react-native/tester/js/components/RNTTestDetails.js
+++ b/packages/@react-native/tester/js/components/RNTTestDetails.js
@@ -39,8 +39,12 @@ function RNTTestDetails({
       )}
       {expect == null ? null : (
         <View style={styles.section}>
-          <Text style={styles.heading}>Expectation</Text>
-          <Text style={styles.paragraph}>{expect}</Text>
+          <Text style={[styles.heading, {color: theme.LabelColor}]}>
+            Expectation
+          </Text>
+          <Text style={[styles.paragraph, {color: theme.LabelColor}]}>
+            {expect}
+          </Text>
         </View>
       )}
     </>
diff --git a/packages/@react-native/tester/js/examples/Accessibility/AccessibilityExample.js b/packages/@react-native/tester/js/examples/Accessibility/AccessibilityExample.js
index bd14a80134..f7e92706c4 100644
--- a/packages/@react-native/tester/js/examples/Accessibility/AccessibilityExample.js
+++ b/packages/@react-native/tester/js/examples/Accessibility/AccessibilityExample.js
@@ -13,6 +13,8 @@
 import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
 
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
+
 const RNTesterBlock = require('../../components/RNTesterBlock');
 const checkImageSource = require('./check.png');
 const mixedCheckboxImageSource = require('./mixed.png');
@@ -104,180 +106,214 @@ const styles = StyleSheet.create({
 class AccessibilityExample extends React.Component<{}> {
   render(): React.Node {
     return (
-      <View style={styles.sectionContainer}>
-        <RNTesterBlock title="TextView without label">
-          <Text>
-            Text's accessibilityLabel is the raw text itself unless it is set
-            explicitly.
-          </Text>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="TextView with label">
-          <Text accessibilityLabel="I have label, so I read it instead of embedded text.">
-            This text component's accessibilityLabel is set explicitly.
-          </Text>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Nonaccessible view with TextViews">
-          <View>
-            <Text style={{color: 'green'}}>This is text one.</Text>
-            <Text style={{color: 'blue'}}>This is text two.</Text>
-          </View>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Accessible view with TextViews without label">
-          <View accessible={true}>
-            <Text style={{color: 'green'}}>This is text one.</Text>
-            <Text style={{color: 'blue'}}>This is text two.</Text>
-          </View>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Accessible view with TextViews with label">
-          <View
-            accessible={true}
-            accessibilityLabel="I have label, so I read it instead of embedded text.">
-            <Text style={{color: 'green'}}>This is text one.</Text>
-            <Text style={{color: 'blue'}}>This is text two.</Text>
-          </View>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="View with hidden children from accessibility tree.">
-          <View aria-hidden>
-            <Text>
-              This view's children are hidden from the accessibility tree
-            </Text>
-          </View>
-        </RNTesterBlock>
-
-        {/* Android screen readers will say the accessibility hint instead of the text
-           since the view doesn't have a label. */}
-        <RNTesterBlock title="Accessible view with TextViews with hint">
-          <View accessibilityHint="Accessibility hint." accessible={true}>
-            <Text style={{color: 'green'}}>This is text one.</Text>
-            <Text style={{color: 'blue'}}>This is text two.</Text>
-          </View>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Accessible view TextViews with label and hint">
-          <View
-            accessibilityLabel="Accessibility label."
-            accessibilityHint="Accessibility hint."
-            accessible={true}>
-            <Text style={{color: 'green'}}>This is text one.</Text>
-            <Text style={{color: 'blue'}}>This is text two.</Text>
-          </View>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Text with accessibilityRole = header">
-          <Text accessibilityRole="header">This is a title.</Text>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Text with role = heading">
-          <Text role="heading">This is a title.</Text>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Touchable with accessibilityRole = link">
-          <TouchableOpacity
-            onPress={() => Alert.alert('Link has been clicked!')}
-            accessibilityRole="link">
-            <View>
-              <Text>Click me</Text>
-            </View>
-          </TouchableOpacity>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Touchable with accessibilityRole = button">
-          <TouchableOpacity
-            onPress={() => Alert.alert('Button has been pressed!')}
-            accessibilityRole="button">
-            <Text>Click me</Text>
-          </TouchableOpacity>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Disabled Touchable with role">
-          <TouchableOpacity
-            onPress={() => Alert.alert('Button has been pressed!')}
-            accessibilityRole="button"
-            accessibilityState={{disabled: true}}
-            disabled={true}>
-            <View>
-              <Text>
-                I am disabled. Clicking me will not trigger any action.
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View style={styles.sectionContainer}>
+            <RNTesterBlock title="TextView without label">
+              <Text style={{color: theme.SecondaryLabelColor}}>
+                Text's accessibilityLabel is the raw text itself unless it is
+                set explicitly.
               </Text>
-            </View>
-          </TouchableOpacity>
-        </RNTesterBlock>
+            </RNTesterBlock>
 
-        <RNTesterBlock title="Disabled TouchableOpacity">
-          <TouchableOpacity
-            onPress={() => Alert.alert('Disabled Button has been pressed!')}
-            accessibilityLabel={'You are pressing Disabled TouchableOpacity'}
-            accessibilityState={{disabled: true}}>
-            <View>
-              <Text>
-                I am disabled. Clicking me will not trigger any action.
+            <RNTesterBlock title="TextView with label">
+              <Text
+                style={{color: theme.SecondaryLabelColor}}
+                accessibilityLabel="I have label, so I read it instead of embedded text.">
+                This text component's accessibilityLabel is set explicitly.
               </Text>
-            </View>
-          </TouchableOpacity>
-        </RNTesterBlock>
-        <RNTesterBlock title="View with multiple states">
-          <View
-            accessible={true}
-            accessibilityState={{selected: true, disabled: true}}>
-            <Text>This view is selected and disabled.</Text>
-          </View>
-        </RNTesterBlock>
+            </RNTesterBlock>
 
-        <RNTesterBlock title="View with label, hint, role, and state">
-          <View
-            accessible={true}
-            accessibilityLabel="Accessibility label."
-            accessibilityRole="button"
-            accessibilityState={{selected: true}}
-            accessibilityHint="Accessibility hint.">
-            <Text>Accessible view with label, hint, role, and state</Text>
-          </View>
-        </RNTesterBlock>
+            <RNTesterBlock title="Nonaccessible view with TextViews">
+              <View>
+                <Text style={{color: 'green'}}>This is text one.</Text>
+                <Text style={{color: 'blue'}}>This is text two.</Text>
+              </View>
+            </RNTesterBlock>
 
-        <RNTesterBlock title="View with label, hint, role, and state">
-          <View
-            accessible={true}
-            accessibilityLabel="Accessibility label."
-            accessibilityRole="button"
-            aria-selected={true}
-            accessibilityHint="Accessibility hint.">
-            <Text>Accessible view with label, hint, role, and state</Text>
-          </View>
-        </RNTesterBlock>
+            <RNTesterBlock title="Accessible view with TextViews without label">
+              <View accessible={true}>
+                <Text style={{color: 'green'}}>This is text one.</Text>
+                <Text style={{color: 'blue'}}>This is text two.</Text>
+              </View>
+            </RNTesterBlock>
 
-        <RNTesterBlock title="TextInput with accessibilityLabelledBy attribute">
-          <View>
-            <Text nativeID="formLabel1">Mail Address</Text>
-            <TextInput
-              accessibilityLabel="input test1"
-              accessibilityLabelledBy="formLabel1"
-              style={styles.default}
-            />
-            <Text nativeID="formLabel2">First Name</Text>
-            <TextInput
-              accessibilityLabel="input test2"
-              accessibilityLabelledBy={['formLabel2', 'formLabel3']}
-              style={styles.default}
-              value="Foo"
-            />
+            <RNTesterBlock title="Accessible view with TextViews with label">
+              <View
+                accessible={true}
+                accessibilityLabel="I have label, so I read it instead of embedded text.">
+                <Text style={{color: 'green'}}>This is text one.</Text>
+                <Text style={{color: 'blue'}}>This is text two.</Text>
+              </View>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="View with hidden children from accessibility tree.">
+              <View aria-hidden>
+                <Text style={{color: theme.SecondaryLabelColor}}>
+                  This view's children are hidden from the accessibility tree
+                </Text>
+              </View>
+            </RNTesterBlock>
+
+            {/* Android screen readers will say the accessibility hint instead of the text
+                   since the view doesn't have a label. */}
+            <RNTesterBlock title="Accessible view with TextViews with hint">
+              <View accessibilityHint="Accessibility hint." accessible={true}>
+                <Text style={{color: 'green'}}>This is text one.</Text>
+                <Text style={{color: 'blue'}}>This is text two.</Text>
+              </View>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="Accessible view TextViews with label and hint">
+              <View
+                accessibilityLabel="Accessibility label."
+                accessibilityHint="Accessibility hint."
+                accessible={true}>
+                <Text style={{color: 'green'}}>This is text one.</Text>
+                <Text style={{color: 'blue'}}>This is text two.</Text>
+              </View>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="Text with accessibilityRole = header">
+              <Text
+                accessibilityRole="header"
+                style={{color: theme.SecondaryLabelColor}}>
+                This is a title.
+              </Text>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="Text with role = heading">
+              <Text role="heading" style={{color: theme.SecondaryLabelColor}}>
+                This is a title.
+              </Text>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="Touchable with accessibilityRole = link">
+              <TouchableOpacity
+                onPress={() => Alert.alert('Link has been clicked!')}
+                accessibilityRole="link">
+                <View>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Click me
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="Touchable with accessibilityRole = button">
+              <TouchableOpacity
+                onPress={() => Alert.alert('Button has been pressed!')}
+                accessibilityRole="button">
+                <Text style={{color: theme.SecondaryLabelColor}}>Click me</Text>
+              </TouchableOpacity>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="Disabled Touchable with role">
+              <TouchableOpacity
+                onPress={() => Alert.alert('Button has been pressed!')}
+                accessibilityRole="button"
+                accessibilityState={{disabled: true}}
+                disabled={true}>
+                <View>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    I am disabled. Clicking me will not trigger any action.
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="Disabled TouchableOpacity">
+              <TouchableOpacity
+                onPress={() => Alert.alert('Disabled Button has been pressed!')}
+                accessibilityLabel={
+                  'You are pressing Disabled TouchableOpacity'
+                }
+                accessibilityState={{disabled: true}}>
+                <View>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    I am disabled. Clicking me will not trigger any action.
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            </RNTesterBlock>
+            <RNTesterBlock title="View with multiple states">
+              <View
+                accessible={true}
+                accessibilityState={{selected: true, disabled: true}}>
+                <Text style={{color: theme.SecondaryLabelColor}}>
+                  This view is selected and disabled.
+                </Text>
+              </View>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="View with label, hint, role, and state">
+              <View
+                accessible={true}
+                accessibilityLabel="Accessibility label."
+                accessibilityRole="button"
+                accessibilityState={{selected: true}}
+                accessibilityHint="Accessibility hint.">
+                <Text style={{color: theme.SecondaryLabelColor}}>
+                  Accessible view with label, hint, role, and state
+                </Text>
+              </View>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="View with label, hint, role, and state">
+              <View
+                accessible={true}
+                accessibilityLabel="Accessibility label."
+                accessibilityRole="button"
+                aria-selected={true}
+                accessibilityHint="Accessibility hint.">
+                <Text style={{color: theme.SecondaryLabelColor}}>
+                  Accessible view with label, hint, role, and state
+                </Text>
+              </View>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="TextInput with accessibilityLabelledBy attribute">
+              <View>
+                <Text
+                  nativeID="formLabel1"
+                  style={{color: theme.SecondaryLabelColor}}>
+                  Mail Address
+                </Text>
+                <TextInput
+                  accessibilityLabel="input test1"
+                  accessibilityLabelledBy="formLabel1"
+                  style={styles.default}
+                />
+                <Text
+                  nativeID="formLabel2"
+                  style={{color: theme.SecondaryLabelColor}}>
+                  First Name
+                </Text>
+                <TextInput
+                  accessibilityLabel="input test2"
+                  accessibilityLabelledBy={['formLabel2', 'formLabel3']}
+                  style={styles.default}
+                  value="Foo"
+                />
+              </View>
+            </RNTesterBlock>
+            <RNTesterBlock title="Switch with accessibilityLabelledBy attribute">
+              <View>
+                <Text
+                  nativeID="formLabel4"
+                  style={{color: theme.SecondaryLabelColor}}>
+                  Enable Notifications
+                </Text>
+                <Switch
+                  value={true}
+                  accessibilityLabel="switch test1"
+                  accessibilityLabelledBy="formLabel4"
+                />
+              </View>
+            </RNTesterBlock>
           </View>
-        </RNTesterBlock>
-        <RNTesterBlock title="Switch with accessibilityLabelledBy attribute">
-          <View>
-            <Text nativeID="formLabel4">Enable Notifications</Text>
-            <Switch
-              value={true}
-              accessibilityLabel="switch test1"
-              accessibilityLabelledBy="formLabel4"
-            />
-          </View>
-        </RNTesterBlock>
-      </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 }
@@ -285,134 +321,170 @@ class AccessibilityExample extends React.Component<{}> {
 class AutomaticContentGrouping extends React.Component<{}> {
   render(): React.Node {
     return (
-      <View style={styles.sectionContainer}>
-        <RNTesterBlock title="The parent and the children have a different role">
-          <TouchableNativeFeedback accessible={true} accessibilityRole="button">
-            <View accessible={false}>
-              <Text accessibilityRole="image" accessible={false}>
-                Text number 1 with a role
-              </Text>
-              <Text accessible={false}>Text number 2</Text>
-            </View>
-          </TouchableNativeFeedback>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="The parent has the accessibilityActions cut, copy and paste">
-          <TouchableNativeFeedback
-            accessible={true}
-            accessibilityActions={[
-              {name: 'cut', label: 'cut label'},
-              {name: 'copy', label: 'copy label'},
-              {name: 'paste', label: 'paste label'},
-            ]}
-            onAccessibilityAction={event => {
-              switch (event.nativeEvent.actionName) {
-                case 'cut':
-                  Alert.alert('Alert', 'cut action success');
-                  break;
-                case 'copy':
-                  Alert.alert('Alert', 'copy action success');
-                  break;
-                case 'paste':
-                  Alert.alert('Alert', 'paste action success');
-                  break;
-              }
-            }}
-            accessibilityRole="button">
-            <View>
-              <Text accessible={false}>Text number 1</Text>
-              <Text accessible={false}>
-                Text number 2<Text accessible={false}>Text number 3</Text>
-              </Text>
-            </View>
-          </TouchableNativeFeedback>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Talkback only pulls the child's contentDescription or text but does not include the child's accessibilityState or accessibilityRole. TalkBack avoids announcements of conflicting states or roles (for example, 'button' and 'slider').">
-          <View
-            accessible={true}
-            accessibilityRole="button"
-            accessibilityState={{checked: true}}>
-            <Text
-              accessible={false}
-              accessibilityState={{checked: true, disabled: false}}>
-              Text number 1
-            </Text>
-            <Text
-              style={styles.smallRedSquare}
-              accessible={false}
-              accessibilityState={{checked: false, disabled: true}}
-              accessibilityLabel="This child Text does not have text, but has an accessibilityLabel and accessibilityState. The child accessibility state disabled is not announced."
-              accessibilityRole="image"
-            />
-          </View>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="One of the children has accessibilityLabel, role, state, and accessibilityValue.">
-          <View accessible={true} accessibilityRole="button">
-            <View>
-              <Text accessible={false}>Text number 1</Text>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View style={styles.sectionContainer}>
+            <RNTesterBlock title="The parent and the children have a different role">
               <TouchableNativeFeedback
-                focusable={true}
-                onPress={() => console.warn('onPress child')}
-                accessible={false}
-                accessibilityLabel="this is my label"
-                accessibilityRole="image"
-                accessibilityState={{disabled: true}}
-                accessibilityValue={{text: 'this is the accessibility value'}}>
-                <Text accessible={false}>Text number 3</Text>
+                accessible={true}
+                accessibilityRole="button">
+                <View accessible={false}>
+                  <Text
+                    accessibilityRole="image"
+                    accessible={false}
+                    style={{color: theme.SecondaryLabelColor}}>
+                    Text number 1 with a role
+                  </Text>
+                  <Text
+                    accessible={false}
+                    style={{color: theme.SecondaryLabelColor}}>
+                    Text number 2
+                  </Text>
+                </View>
               </TouchableNativeFeedback>
-            </View>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="The parent has the accessibilityActions cut, copy and paste">
+              <TouchableNativeFeedback
+                accessible={true}
+                accessibilityActions={[
+                  {name: 'cut', label: 'cut label'},
+                  {name: 'copy', label: 'copy label'},
+                  {name: 'paste', label: 'paste label'},
+                ]}
+                onAccessibilityAction={event => {
+                  switch (event.nativeEvent.actionName) {
+                    case 'cut':
+                      Alert.alert('Alert', 'cut action success');
+                      break;
+                    case 'copy':
+                      Alert.alert('Alert', 'copy action success');
+                      break;
+                    case 'paste':
+                      Alert.alert('Alert', 'paste action success');
+                      break;
+                  }
+                }}
+                accessibilityRole="button">
+                <View>
+                  <Text
+                    accessible={false}
+                    style={{color: theme.SecondaryLabelColor}}>
+                    Text number 1
+                  </Text>
+                  <Text
+                    accessible={false}
+                    style={{color: theme.SecondaryLabelColor}}>
+                    Text number 2<Text accessible={false}>Text number 3</Text>
+                  </Text>
+                </View>
+              </TouchableNativeFeedback>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="Talkback only pulls the child's contentDescription or text but does not include the child's accessibilityState or accessibilityRole. TalkBack avoids announcements of conflicting states or roles (for example, 'button' and 'slider').">
+              <View
+                accessible={true}
+                accessibilityRole="button"
+                accessibilityState={{checked: true}}>
+                <Text
+                  accessible={false}
+                  accessibilityState={{checked: true, disabled: false}}
+                  style={{color: theme.SecondaryLabelColor}}>
+                  Text number 1
+                </Text>
+                <Text
+                  style={styles.smallRedSquare}
+                  accessible={false}
+                  accessibilityState={{checked: false, disabled: true}}
+                  accessibilityLabel="This child Text does not have text, but has an accessibilityLabel and accessibilityState. The child accessibility state disabled is not announced."
+                  accessibilityRole="image"
+                />
+              </View>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="One of the children has accessibilityLabel, role, state, and accessibilityValue.">
+              <View accessible={true} accessibilityRole="button">
+                <View>
+                  <Text
+                    accessible={false}
+                    style={{color: theme.SecondaryLabelColor}}>
+                    Text number 1
+                  </Text>
+                  <TouchableNativeFeedback
+                    focusable={true}
+                    onPress={() => console.warn('onPress child')}
+                    accessible={false}
+                    accessibilityLabel="this is my label"
+                    accessibilityRole="image"
+                    accessibilityState={{disabled: true}}
+                    accessibilityValue={{
+                      text: 'this is the accessibility value',
+                    }}>
+                    <Text
+                      accessible={false}
+                      style={{color: theme.SecondaryLabelColor}}>
+                      Text number 3
+                    </Text>
+                  </TouchableNativeFeedback>
+                </View>
+              </View>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="The parent has a TextInput child component.">
+              <TouchableNativeFeedback
+                accessible={true}
+                accessibilityRole="button">
+                <TextInput
+                  value="this is the value"
+                  accessible={false}
+                  style={styles.default}
+                  placeholder="this is the placeholder"
+                />
+              </TouchableNativeFeedback>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="The parents include three levels of nested Components.">
+              <TouchableNativeFeedback
+                accessible={true}
+                accessibilityRole="button">
+                <Text
+                  accessible={false}
+                  style={{color: theme.SecondaryLabelColor}}>
+                  Text number 2
+                  <Text accessible={false}>
+                    Text number 3<Text accessible={false}>Text number 4</Text>
+                  </Text>
+                </Text>
+              </TouchableNativeFeedback>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="The child is not TextInput. The contentDescription is not empty and does not have node text.">
+              <TouchableNativeFeedback
+                onPress={() => console.warn('onPress child')}
+                accessible={true}
+                accessibilityRole="button">
+                <View>
+                  <Text
+                    style={styles.smallRedSquare}
+                    accessibilityLabel="this is the child Text accessibilityLabel"
+                    accessible={false}
+                  />
+                </View>
+              </TouchableNativeFeedback>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="One of the child has accessibilityHint (hasText triggers the announcement).">
+              <View accessible={true} accessibilityRole="button">
+                <Text
+                  style={styles.smallRedSquare}
+                  accessible={false}
+                  accessibilityHint="this child Text does not have text, but has hint and should be announced by TalkBack"
+                />
+              </View>
+            </RNTesterBlock>
           </View>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="The parent has a TextInput child component.">
-          <TouchableNativeFeedback accessible={true} accessibilityRole="button">
-            <TextInput
-              value="this is the value"
-              accessible={false}
-              style={styles.default}
-              placeholder="this is the placeholder"
-            />
-          </TouchableNativeFeedback>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="The parents include three levels of nested Components.">
-          <TouchableNativeFeedback accessible={true} accessibilityRole="button">
-            <Text accessible={false}>
-              Text number 2
-              <Text accessible={false}>
-                Text number 3<Text accessible={false}>Text number 4</Text>
-              </Text>
-            </Text>
-          </TouchableNativeFeedback>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="The child is not TextInput. The contentDescription is not empty and does not have node text.">
-          <TouchableNativeFeedback
-            onPress={() => console.warn('onPress child')}
-            accessible={true}
-            accessibilityRole="button">
-            <View>
-              <Text
-                style={styles.smallRedSquare}
-                accessibilityLabel="this is the child Text accessibilityLabel"
-                accessible={false}
-              />
-            </View>
-          </TouchableNativeFeedback>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="One of the child has accessibilityHint (hasText triggers the announcement).">
-          <View accessible={true} accessibilityRole="button">
-            <Text
-              style={styles.smallRedSquare}
-              accessible={false}
-              accessibilityHint="this child Text does not have text, but has hint and should be announced by TalkBack"
-            />
-          </View>
-        </RNTesterBlock>
-      </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 }
@@ -444,14 +516,20 @@ class CheckboxExample extends React.Component<
 
   render(): React.Node {
     return (
-      <TouchableOpacity
-        onPress={this._onCheckboxPress}
-        accessibilityLabel="element 2"
-        accessibilityRole="checkbox"
-        accessibilityState={{checked: this.state.checkboxState}}
-        accessibilityHint="click me to change state">
-        <Text>Checkbox example</Text>
-      </TouchableOpacity>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <TouchableOpacity
+            onPress={this._onCheckboxPress}
+            accessibilityLabel="element 2"
+            accessibilityRole="checkbox"
+            accessibilityState={{checked: this.state.checkboxState}}
+            accessibilityHint="click me to change state">
+            <Text style={{color: theme.SecondaryLabelColor}}>
+              Checkbox example
+            </Text>
+          </TouchableOpacity>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 }
@@ -476,14 +554,20 @@ class SwitchExample extends React.Component<
 
   render(): React.Node {
     return (
-      <TouchableOpacity
-        onPress={this._onSwitchToggle}
-        accessibilityLabel="element 12"
-        accessibilityRole="switch"
-        accessibilityState={{checked: this.state.switchState}}
-        accessible={true}>
-        <Text>Switch example</Text>
-      </TouchableOpacity>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <TouchableOpacity
+            onPress={this._onSwitchToggle}
+            accessibilityLabel="element 12"
+            accessibilityRole="switch"
+            accessibilityState={{checked: this.state.switchState}}
+            accessible={true}>
+            <Text style={{color: theme.SecondaryLabelColor}}>
+              Switch example
+            </Text>
+          </TouchableOpacity>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 }
@@ -589,13 +673,19 @@ class ExpandableElementExample extends React.Component<
 
   render(): React.Node {
     return (
-      <TouchableOpacity
-        onPress={this._onElementPress}
-        accessibilityLabel="element 18"
-        accessibilityState={{expanded: this.state.expandState}}
-        accessibilityHint="click me to change state">
-        <Text>Expandable element example</Text>
-      </TouchableOpacity>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <TouchableOpacity
+            onPress={this._onElementPress}
+            accessibilityLabel="element 18"
+            accessibilityState={{expanded: this.state.expandState}}
+            accessibilityHint="click me to change state">
+            <Text style={{color: theme.SecondaryLabelColor}}>
+              Expandable element example
+            </Text>
+          </TouchableOpacity>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 }
@@ -666,55 +756,59 @@ class NestedCheckBox extends React.Component<
 
   render(): React.Node {
     return (
-      <View>
-        <TouchableOpacity
-          style={{flex: 1, flexDirection: 'row'}}
-          onPress={this._onPress1}
-          accessibilityLabel="Meat"
-          accessibilityHint="State changes in 2 seconds after clicking."
-          accessibilityRole="checkbox"
-          accessibilityState={{checked: this.state.checkbox1}}>
-          <Image
-            style={styles.image}
-            source={
-              this.state.checkbox1 === 'mixed'
-                ? mixedCheckboxImageSource
-                : this.state.checkbox1
-                  ? checkImageSource
-                  : uncheckImageSource
-            }
-          />
-          <Text>Meat</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={{flex: 1, flexDirection: 'row'}}
-          onPress={this._onPress2}
-          accessibilityLabel="Beef"
-          accessibilityRole="checkbox"
-          accessibilityState={{checked: this.state.checkbox2}}>
-          <Image
-            style={styles.image}
-            source={
-              this.state.checkbox2 ? checkImageSource : uncheckImageSource
-            }
-          />
-          <Text>Beef</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={{flex: 1, flexDirection: 'row'}}
-          onPress={this._onPress3}
-          accessibilityLabel="Bacon"
-          accessibilityRole="checkbox"
-          accessibilityState={{checked: this.state.checkbox3}}>
-          <Image
-            style={styles.image}
-            source={
-              this.state.checkbox3 ? checkImageSource : uncheckImageSource
-            }
-          />
-          <Text>Bacon</Text>
-        </TouchableOpacity>
-      </View>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View>
+            <TouchableOpacity
+              style={{flex: 1, flexDirection: 'row'}}
+              onPress={this._onPress1}
+              accessibilityLabel="Meat"
+              accessibilityHint="State changes in 2 seconds after clicking."
+              accessibilityRole="checkbox"
+              accessibilityState={{checked: this.state.checkbox1}}>
+              <Image
+                style={styles.image}
+                source={
+                  this.state.checkbox1 === 'mixed'
+                    ? mixedCheckboxImageSource
+                    : this.state.checkbox1
+                      ? checkImageSource
+                      : uncheckImageSource
+                }
+              />
+              <Text style={{color: theme.SecondaryLabelColor}}>Meat</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={{flex: 1, flexDirection: 'row'}}
+              onPress={this._onPress2}
+              accessibilityLabel="Beef"
+              accessibilityRole="checkbox"
+              accessibilityState={{checked: this.state.checkbox2}}>
+              <Image
+                style={styles.image}
+                source={
+                  this.state.checkbox2 ? checkImageSource : uncheckImageSource
+                }
+              />
+              <Text style={{color: theme.SecondaryLabelColor}}>Beef</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={{flex: 1, flexDirection: 'row'}}
+              onPress={this._onPress3}
+              accessibilityLabel="Bacon"
+              accessibilityRole="checkbox"
+              accessibilityState={{checked: this.state.checkbox3}}>
+              <Image
+                style={styles.image}
+                source={
+                  this.state.checkbox3 ? checkImageSource : uncheckImageSource
+                }
+              />
+              <Text style={{color: theme.SecondaryLabelColor}}>Bacon</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 }
@@ -732,156 +826,210 @@ class AccessibilityRoleAndStateExample extends React.Component<{}> {
     ];
 
     return (
-      <View style={styles.sectionContainer}>
-        <RNTesterBlock title="ScrollView with grid role">
-          <ScrollView accessibilityRole="grid" style={styles.scrollView}>
-            {content}
-          </ScrollView>
-        </RNTesterBlock>
-        <RNTesterBlock title="ScrollView with scrollview role">
-          <ScrollView accessibilityRole="scrollview" style={styles.scrollView}>
-            {content}
-          </ScrollView>
-        </RNTesterBlock>
-        <RNTesterBlock title="HorizontalScrollView with horizontalscrollview role">
-          <ScrollView
-            horizontal
-            accessibilityRole="horizontalscrollview"
-            style={styles.scrollView}>
-            {content}
-          </ScrollView>
-        </RNTesterBlock>
-        <RNTesterBlock title="accessibilityRole with View Component">
-          <View>
-            <View
-              accessibilityLabel="element 1"
-              accessibilityRole="alert"
-              accessible={true}>
-              <Text>Alert example</Text>
-            </View>
-            <CheckboxExample />
-            <View
-              accessibilityLabel="element 3"
-              accessibilityRole="combobox"
-              accessible={true}>
-              <Text>Combobox example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 4"
-              accessibilityRole="menu"
-              accessible={true}>
-              <Text>Menu example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 5"
-              accessibilityRole="menubar"
-              accessible={true}>
-              <Text>Menu bar example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 6"
-              accessibilityRole="menuitem"
-              accessible={true}>
-              <Text>Menu item example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 7"
-              accessibilityRole="progressbar"
-              accessible={true}>
-              <Text>Progress bar example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 8"
-              accessibilityRole="radio"
-              accessible={true}>
-              <Text>Radio button example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 9"
-              accessibilityRole="radiogroup"
-              accessible={true}>
-              <Text>Radio group example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 10"
-              accessibilityRole="scrollbar"
-              accessible={true}>
-              <Text>Scrollbar example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 11"
-              accessibilityRole="spinbutton"
-              accessible={true}>
-              <Text>Spin button example</Text>
-            </View>
-            <SwitchExample />
-            <View
-              accessibilityLabel="element 13"
-              accessibilityRole="tab"
-              accessible={true}>
-              <Text>Tab example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 14"
-              accessibilityRole="tablist"
-              accessible={true}>
-              <Text>Tab list example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 15"
-              accessibilityRole="timer"
-              accessible={true}>
-              <Text>Timer example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 16"
-              accessibilityRole="toolbar"
-              accessible={true}>
-              <Text>Toolbar example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 17"
-              accessibilityState={{busy: true}}
-              accessible={true}>
-              <Text>State busy example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 18"
-              accessibilityRole="dropdownlist"
-              accessible={true}>
-              <Text>Drop Down List example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 19"
-              accessibilityRole="pager"
-              accessible={true}>
-              <Text>Pager example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 20"
-              accessibilityRole="togglebutton"
-              accessible={true}>
-              <Text>Toggle Button example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 21"
-              accessibilityRole="viewgroup"
-              accessible={true}>
-              <Text>Viewgroup example</Text>
-            </View>
-            <View
-              accessibilityLabel="element 22"
-              accessibilityRole="webview"
-              accessible={true}>
-              <Text>Webview example</Text>
-            </View>
-            <ExpandableElementExample />
-            <SelectionExample />
-            <Text>Nested checkbox with delayed state change</Text>
-            <NestedCheckBox />
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View style={styles.sectionContainer}>
+            <RNTesterBlock title="ScrollView with grid role">
+              <ScrollView accessibilityRole="grid" style={styles.scrollView}>
+                <Text style={{color: theme.SecondaryLabelColor}}>
+                  {content}
+                </Text>
+              </ScrollView>
+            </RNTesterBlock>
+            <RNTesterBlock title="ScrollView with scrollview role">
+              <ScrollView
+                accessibilityRole="scrollview"
+                style={styles.scrollView}>
+                <Text style={{color: theme.SecondaryLabelColor}}>
+                  {content}
+                </Text>
+              </ScrollView>
+            </RNTesterBlock>
+            <RNTesterBlock title="HorizontalScrollView with horizontalscrollview role">
+              <ScrollView
+                horizontal
+                accessibilityRole="horizontalscrollview"
+                style={styles.scrollView}>
+                <Text style={{color: theme.SecondaryLabelColor}}>
+                  {content}
+                </Text>
+              </ScrollView>
+            </RNTesterBlock>
+            <RNTesterBlock title="accessibilityRole with View Component">
+              <View>
+                <View
+                  accessibilityLabel="element 1"
+                  accessibilityRole="alert"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Alert example
+                  </Text>
+                </View>
+                <CheckboxExample />
+                <View
+                  accessibilityLabel="element 3"
+                  accessibilityRole="combobox"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Combobox example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 4"
+                  accessibilityRole="menu"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Menu example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 5"
+                  accessibilityRole="menubar"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Menu bar example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 6"
+                  accessibilityRole="menuitem"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Menu item example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 7"
+                  accessibilityRole="progressbar"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Progress bar example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 8"
+                  accessibilityRole="radio"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Radio button example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 9"
+                  accessibilityRole="radiogroup"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Radio group example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 10"
+                  accessibilityRole="scrollbar"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Scrollbar example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 11"
+                  accessibilityRole="spinbutton"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Spin button example
+                  </Text>
+                </View>
+                <SwitchExample />
+                <View
+                  accessibilityLabel="element 13"
+                  accessibilityRole="tab"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Tab example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 14"
+                  accessibilityRole="tablist"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Tab list example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 15"
+                  accessibilityRole="timer"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Timer example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 16"
+                  accessibilityRole="toolbar"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Toolbar example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 17"
+                  accessibilityState={{busy: true}}
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    State busy example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 18"
+                  accessibilityRole="dropdownlist"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Drop Down List example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 19"
+                  accessibilityRole="pager"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Pager example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 20"
+                  accessibilityRole="togglebutton"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Toggle Button example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 21"
+                  accessibilityRole="viewgroup"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Viewgroup example
+                  </Text>
+                </View>
+                <View
+                  accessibilityLabel="element 22"
+                  accessibilityRole="webview"
+                  accessible={true}>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Webview example
+                  </Text>
+                </View>
+                <ExpandableElementExample />
+                <SelectionExample />
+                <Text style={{color: theme.SecondaryLabelColor}}>
+                  Nested checkbox with delayed state change
+                </Text>
+                <NestedCheckBox />
+              </View>
+            </RNTesterBlock>
           </View>
-        </RNTesterBlock>
-      </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 }
@@ -889,138 +1037,150 @@ class AccessibilityRoleAndStateExample extends React.Component<{}> {
 class AccessibilityActionsExample extends React.Component<{}> {
   render(): React.Node {
     return (
-      <View style={styles.sectionContainer}>
-        <RNTesterBlock title="Non-touchable with activate action">
-          <View
-            accessible={true}
-            accessibilityActions={[{name: 'activate'}]}
-            onAccessibilityAction={event => {
-              switch (event.nativeEvent.actionName) {
-                case 'activate':
-                  Alert.alert('Alert', 'View is clicked');
-                  break;
-              }
-            }}>
-            <Text>Click me</Text>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View style={styles.sectionContainer}>
+            <RNTesterBlock title="Non-touchable with activate action">
+              <View
+                accessible={true}
+                accessibilityActions={[{name: 'activate'}]}
+                onAccessibilityAction={event => {
+                  switch (event.nativeEvent.actionName) {
+                    case 'activate':
+                      Alert.alert('Alert', 'View is clicked');
+                      break;
+                  }
+                }}>
+                <Text style={{color: theme.SecondaryLabelColor}}>Click me</Text>
+              </View>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="View with multiple actions">
+              <View
+                accessible={true}
+                accessibilityActions={[
+                  {name: 'cut', label: 'cut label'},
+                  {name: 'copy', label: 'copy label'},
+                  {name: 'paste', label: 'paste label'},
+                ]}
+                onAccessibilityAction={event => {
+                  switch (event.nativeEvent.actionName) {
+                    case 'cut':
+                      Alert.alert('Alert', 'cut action success');
+                      break;
+                    case 'copy':
+                      Alert.alert('Alert', 'copy action success');
+                      break;
+                    case 'paste':
+                      Alert.alert('Alert', 'paste action success');
+                      break;
+                  }
+                }}>
+                <Text style={{color: theme.SecondaryLabelColor}}>
+                  This view supports many actions.
+                </Text>
+              </View>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="Adjustable with increment/decrement actions">
+              <View
+                accessible={true}
+                accessibilityRole="adjustable"
+                accessibilityActions={[
+                  {name: 'increment'},
+                  {name: 'decrement'},
+                ]}
+                onAccessibilityAction={event => {
+                  switch (event.nativeEvent.actionName) {
+                    case 'increment':
+                      Alert.alert('Alert', 'increment action success');
+                      break;
+                    case 'decrement':
+                      Alert.alert('Alert', 'decrement action success');
+                      break;
+                  }
+                }}>
+                <Text style={{color: theme.SecondaryLabelColor}}>Slider</Text>
+              </View>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="TouchableWithoutFeedback with custom accessibility actions">
+              <TouchableWithoutFeedback
+                accessible={true}
+                accessibilityActions={[
+                  {name: 'cut', label: 'cut label'},
+                  {name: 'copy', label: 'copy label'},
+                  {name: 'paste', label: 'paste label'},
+                ]}
+                onAccessibilityAction={event => {
+                  switch (event.nativeEvent.actionName) {
+                    case 'cut':
+                      Alert.alert('Alert', 'cut action success');
+                      break;
+                    case 'copy':
+                      Alert.alert('Alert', 'copy action success');
+                      break;
+                    case 'paste':
+                      Alert.alert('Alert', 'paste action success');
+                      break;
+                  }
+                }}
+                onPress={() => Alert.alert('Button has been pressed!')}
+                accessibilityRole="button">
+                <View>
+                  <Text style={{color: theme.SecondaryLabelColor}}>
+                    Click me
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            </RNTesterBlock>
+
+            <RNTesterBlock title="Button with accessibility actions">
+              <Button
+                accessible={true}
+                accessibilityActions={[
+                  {name: 'activate', label: 'activate label'},
+                  {name: 'copy', label: 'copy label'},
+                ]}
+                onAccessibilityAction={event => {
+                  switch (event.nativeEvent.actionName) {
+                    case 'activate':
+                      Alert.alert('Alert', 'Activate accessibility action');
+                      break;
+                    case 'copy':
+                      Alert.alert('Alert', 'copy action success');
+                      break;
+                  }
+                }}
+                onPress={() => Alert.alert('Button has been pressed!')}
+                title="Button with accessibility action"
+              />
+            </RNTesterBlock>
+
+            <RNTesterBlock title="Text with custom accessibility actions">
+              <Text
+                style={{color: theme.SecondaryLabelColor}}
+                accessible={true}
+                accessibilityActions={[
+                  {name: 'activate', label: 'activate label'},
+                  {name: 'copy', label: 'copy label'},
+                ]}
+                onAccessibilityAction={event => {
+                  switch (event.nativeEvent.actionName) {
+                    case 'activate':
+                      Alert.alert('Alert', 'Activate accessibility action');
+                      break;
+                    case 'copy':
+                      Alert.alert('Alert', 'copy action success');
+                      break;
+                  }
+                }}>
+                Text
+              </Text>
+            </RNTesterBlock>
           </View>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="View with multiple actions">
-          <View
-            accessible={true}
-            accessibilityActions={[
-              {name: 'cut', label: 'cut label'},
-              {name: 'copy', label: 'copy label'},
-              {name: 'paste', label: 'paste label'},
-            ]}
-            onAccessibilityAction={event => {
-              switch (event.nativeEvent.actionName) {
-                case 'cut':
-                  Alert.alert('Alert', 'cut action success');
-                  break;
-                case 'copy':
-                  Alert.alert('Alert', 'copy action success');
-                  break;
-                case 'paste':
-                  Alert.alert('Alert', 'paste action success');
-                  break;
-              }
-            }}>
-            <Text>This view supports many actions.</Text>
-          </View>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Adjustable with increment/decrement actions">
-          <View
-            accessible={true}
-            accessibilityRole="adjustable"
-            accessibilityActions={[{name: 'increment'}, {name: 'decrement'}]}
-            onAccessibilityAction={event => {
-              switch (event.nativeEvent.actionName) {
-                case 'increment':
-                  Alert.alert('Alert', 'increment action success');
-                  break;
-                case 'decrement':
-                  Alert.alert('Alert', 'decrement action success');
-                  break;
-              }
-            }}>
-            <Text>Slider</Text>
-          </View>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="TouchableWithoutFeedback with custom accessibility actions">
-          <TouchableWithoutFeedback
-            accessible={true}
-            accessibilityActions={[
-              {name: 'cut', label: 'cut label'},
-              {name: 'copy', label: 'copy label'},
-              {name: 'paste', label: 'paste label'},
-            ]}
-            onAccessibilityAction={event => {
-              switch (event.nativeEvent.actionName) {
-                case 'cut':
-                  Alert.alert('Alert', 'cut action success');
-                  break;
-                case 'copy':
-                  Alert.alert('Alert', 'copy action success');
-                  break;
-                case 'paste':
-                  Alert.alert('Alert', 'paste action success');
-                  break;
-              }
-            }}
-            onPress={() => Alert.alert('Button has been pressed!')}
-            accessibilityRole="button">
-            <View>
-              <Text>Click me</Text>
-            </View>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Button with accessibility actions">
-          <Button
-            accessible={true}
-            accessibilityActions={[
-              {name: 'activate', label: 'activate label'},
-              {name: 'copy', label: 'copy label'},
-            ]}
-            onAccessibilityAction={event => {
-              switch (event.nativeEvent.actionName) {
-                case 'activate':
-                  Alert.alert('Alert', 'Activate accessibility action');
-                  break;
-                case 'copy':
-                  Alert.alert('Alert', 'copy action success');
-                  break;
-              }
-            }}
-            onPress={() => Alert.alert('Button has been pressed!')}
-            title="Button with accessibility action"
-          />
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Text with custom accessibility actions">
-          <Text
-            accessible={true}
-            accessibilityActions={[
-              {name: 'activate', label: 'activate label'},
-              {name: 'copy', label: 'copy label'},
-            ]}
-            onAccessibilityAction={event => {
-              switch (event.nativeEvent.actionName) {
-                case 'activate':
-                  Alert.alert('Alert', 'Activate accessibility action');
-                  break;
-                case 'copy':
-                  Alert.alert('Alert', 'copy action success');
-                  break;
-              }
-            }}>
-            Text
-          </Text>
-        </RNTesterBlock>
-      </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 }
@@ -1057,58 +1217,66 @@ class FakeSliderExample extends React.Component<{}, FakeSliderExampleState> {
 
   render(): React.Node {
     return (
-      <View>
-        <View
-          accessible={true}
-          accessibilityLabel="Fake Slider"
-          accessibilityRole="adjustable"
-          accessibilityActions={[{name: 'increment'}, {name: 'decrement'}]}
-          onAccessibilityAction={event => {
-            switch (event.nativeEvent.actionName) {
-              case 'increment':
-                this.increment();
-                break;
-              case 'decrement':
-                this.decrement();
-                break;
-            }
-          }}
-          accessibilityValue={{
-            min: 0,
-            now: this.state.current,
-            max: 100,
-          }}>
-          <Text>Fake Slider</Text>
-        </View>
-        <TouchableWithoutFeedback
-          accessible={true}
-          accessibilityLabel="Equalizer"
-          accessibilityRole="adjustable"
-          accessibilityActions={[{name: 'increment'}, {name: 'decrement'}]}
-          onAccessibilityAction={event => {
-            switch (event.nativeEvent.actionName) {
-              case 'increment':
-                if (this.state.textualValue === 'center') {
-                  this.setState({textualValue: 'right'});
-                } else if (this.state.textualValue === 'left') {
-                  this.setState({textualValue: 'center'});
-                }
-                break;
-              case 'decrement':
-                if (this.state.textualValue === 'center') {
-                  this.setState({textualValue: 'left'});
-                } else if (this.state.textualValue === 'right') {
-                  this.setState({textualValue: 'center'});
-                }
-                break;
-            }
-          }}
-          accessibilityValue={{text: this.state.textualValue}}>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
           <View>
-            <Text>Equalizer</Text>
+            <View
+              accessible={true}
+              accessibilityLabel="Fake Slider"
+              accessibilityRole="adjustable"
+              accessibilityActions={[{name: 'increment'}, {name: 'decrement'}]}
+              onAccessibilityAction={event => {
+                switch (event.nativeEvent.actionName) {
+                  case 'increment':
+                    this.increment();
+                    break;
+                  case 'decrement':
+                    this.decrement();
+                    break;
+                }
+              }}
+              accessibilityValue={{
+                min: 0,
+                now: this.state.current,
+                max: 100,
+              }}>
+              <Text style={{color: theme.SecondaryLabelColor}}>
+                Fake Slider
+              </Text>
+            </View>
+            <TouchableWithoutFeedback
+              accessible={true}
+              accessibilityLabel="Equalizer"
+              accessibilityRole="adjustable"
+              accessibilityActions={[{name: 'increment'}, {name: 'decrement'}]}
+              onAccessibilityAction={event => {
+                switch (event.nativeEvent.actionName) {
+                  case 'increment':
+                    if (this.state.textualValue === 'center') {
+                      this.setState({textualValue: 'right'});
+                    } else if (this.state.textualValue === 'left') {
+                      this.setState({textualValue: 'center'});
+                    }
+                    break;
+                  case 'decrement':
+                    if (this.state.textualValue === 'center') {
+                      this.setState({textualValue: 'left'});
+                    } else if (this.state.textualValue === 'right') {
+                      this.setState({textualValue: 'center'});
+                    }
+                    break;
+                }
+              }}
+              accessibilityValue={{text: this.state.textualValue}}>
+              <View>
+                <Text style={{color: theme.SecondaryLabelColor}}>
+                  Equalizer
+                </Text>
+              </View>
+            </TouchableWithoutFeedback>
           </View>
-        </TouchableWithoutFeedback>
-      </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 }
@@ -1144,57 +1312,65 @@ class FakeSliderExampleForAccessibilityValue extends React.Component<
 
   render(): React.Node {
     return (
-      <View>
-        <View
-          accessible={true}
-          accessibilityLabel="Fake Slider"
-          accessibilityRole="adjustable"
-          accessibilityActions={[{name: 'increment'}, {name: 'decrement'}]}
-          onAccessibilityAction={event => {
-            switch (event.nativeEvent.actionName) {
-              case 'increment':
-                this.increment();
-                break;
-              case 'decrement':
-                this.decrement();
-                break;
-            }
-          }}
-          aria-valuemax={100}
-          aria-valuemin={0}
-          aria-valuetext={'slider aria value text'}
-          aria-valuenow={this.state.current}>
-          <Text>Fake Slider</Text>
-        </View>
-        <TouchableWithoutFeedback
-          accessible={true}
-          accessibilityLabel="Equalizer"
-          accessibilityRole="adjustable"
-          accessibilityActions={[{name: 'increment'}, {name: 'decrement'}]}
-          onAccessibilityAction={event => {
-            switch (event.nativeEvent.actionName) {
-              case 'increment':
-                if (this.state.textualValue === 'center') {
-                  this.setState({textualValue: 'right'});
-                } else if (this.state.textualValue === 'left') {
-                  this.setState({textualValue: 'center'});
-                }
-                break;
-              case 'decrement':
-                if (this.state.textualValue === 'center') {
-                  this.setState({textualValue: 'left'});
-                } else if (this.state.textualValue === 'right') {
-                  this.setState({textualValue: 'center'});
-                }
-                break;
-            }
-          }}
-          accessibilityValue={{text: this.state.textualValue}}>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
           <View>
-            <Text>Equalizer</Text>
+            <View
+              accessible={true}
+              accessibilityLabel="Fake Slider"
+              accessibilityRole="adjustable"
+              accessibilityActions={[{name: 'increment'}, {name: 'decrement'}]}
+              onAccessibilityAction={event => {
+                switch (event.nativeEvent.actionName) {
+                  case 'increment':
+                    this.increment();
+                    break;
+                  case 'decrement':
+                    this.decrement();
+                    break;
+                }
+              }}
+              aria-valuemax={100}
+              aria-valuemin={0}
+              aria-valuetext={'slider aria value text'}
+              aria-valuenow={this.state.current}>
+              <Text style={{color: theme.SecondaryLabelColor}}>
+                Fake Slider
+              </Text>
+            </View>
+            <TouchableWithoutFeedback
+              accessible={true}
+              accessibilityLabel="Equalizer"
+              accessibilityRole="adjustable"
+              accessibilityActions={[{name: 'increment'}, {name: 'decrement'}]}
+              onAccessibilityAction={event => {
+                switch (event.nativeEvent.actionName) {
+                  case 'increment':
+                    if (this.state.textualValue === 'center') {
+                      this.setState({textualValue: 'right'});
+                    } else if (this.state.textualValue === 'left') {
+                      this.setState({textualValue: 'center'});
+                    }
+                    break;
+                  case 'decrement':
+                    if (this.state.textualValue === 'center') {
+                      this.setState({textualValue: 'left'});
+                    } else if (this.state.textualValue === 'right') {
+                      this.setState({textualValue: 'center'});
+                    }
+                    break;
+                }
+              }}
+              accessibilityValue={{text: this.state.textualValue}}>
+              <View>
+                <Text style={{color: theme.SecondaryLabelColor}}>
+                  Equalizer
+                </Text>
+              </View>
+            </TouchableWithoutFeedback>
           </View>
-        </TouchableWithoutFeedback>
-      </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 }
@@ -1272,6 +1448,7 @@ class AnnounceForAccessibility extends React.Component<{}> {
 
 function SetAccessibilityFocusExample(props: {}): React.Node {
   const myRef = React.useRef<?React.ElementRef<typeof Text>>(null);
+  const theme = React.useContext(RNTesterThemeContext);
 
   const onPress = () => {
     if (myRef && myRef.current) {
@@ -1281,7 +1458,7 @@ function SetAccessibilityFocusExample(props: {}): React.Node {
 
   return (
     <View>
-      <Text ref={myRef}>
+      <Text ref={myRef} style={{color: theme.SecondaryLabelColor}}>
         SetAccessibilityFocus on native element. This should get focus after
         clicking the button!
       </Text>
@@ -1447,16 +1624,20 @@ class EnabledExample extends React.Component<
 
   render(): React.Node {
     return (
-      <View>
-        <Text>
-          The {this.props.test} is{' '}
-          {this.state.isEnabled ? 'enabled' : 'disabled'}
-        </Text>
-        <Button
-          title={this.state.isEnabled ? 'disable' : 'enable'}
-          onPress={this._handleToggled}
-        />
-      </View>
+      <RNTesterThemeContext.Consumer>
+        {theme => (
+          <View>
+            <Text style={{color: theme.SecondaryLabelColor}}>
+              The {this.props.test} is{' '}
+              {this.state.isEnabled ? 'enabled' : 'disabled'}
+            </Text>
+            <Button
+              title={this.state.isEnabled ? 'disable' : 'enable'}
+              onPress={this._handleToggled}
+            />
+          </View>
+        )}
+      </RNTesterThemeContext.Consumer>
     );
   }
 }
@@ -1520,9 +1701,11 @@ function DisplayOptionStatusExample({
   optionName: string,
 }) {
   const [statusEnabled, setStatusEnabled] = React.useState(false);
+  const theme = React.useContext(RNTesterThemeContext);
   React.useEffect(() => {
     const listener = AccessibilityInfo.addEventListener(
       // $FlowFixMe[prop-missing]
+      // $FlowFixMe[invalid-computed-prop]
       notification,
       setStatusEnabled,
     );
@@ -1536,7 +1719,7 @@ function DisplayOptionStatusExample({
   }, [optionChecker, notification]);
   return (
     <View>
-      <Text>
+      <Text style={{color: theme.SecondaryLabelColor}}>
         {optionName}
         {' is '}
         {statusEnabled ? 'enabled' : 'disabled'}.
@@ -1549,10 +1732,11 @@ function AccessibilityExpandedExample(): React.Node {
   const [expand, setExpanded] = React.useState(false);
   const expandAction = {name: 'expand'};
   const collapseAction = {name: 'collapse'};
+  const theme = React.useContext(RNTesterThemeContext);
   return (
     <View style={styles.sectionContainer}>
       <RNTesterBlock title="Collapse/Expanded state change (Paper)">
-        <Text>
+        <Text style={{color: theme.SecondaryLabelColor}}>
           The following component announces expanded/collapsed state correctly
         </Text>
         <Button
@@ -1574,12 +1758,16 @@ function AccessibilityExpandedExample(): React.Node {
       </RNTesterBlock>
 
       <RNTesterBlock title="Screenreader announces the visible text">
-        <Text>Announcing expanded/collapse and the visible text.</Text>
+        <Text style={{color: theme.SecondaryLabelColor}}>
+          Announcing expanded/collapse and the visible text.
+        </Text>
         <TouchableOpacity
           style={styles.button}
           onPress={() => setExpanded(!expand)}
           accessibilityState={{expanded: expand}}>
-          <Text>Click me to change state</Text>
+          <Text style={{color: theme.SecondaryLabelColor}}>
+            Click me to change state
+          </Text>
         </TouchableOpacity>
       </RNTesterBlock>
 
@@ -1588,7 +1776,9 @@ function AccessibilityExpandedExample(): React.Node {
           accessibilityState={{expanded: true}}
           accessible={true}>
           <View>
-            <Text>Clicking me does not change state</Text>
+            <Text style={{color: theme.SecondaryLabelColor}}>
+              Clicking me does not change state
+            </Text>
           </View>
         </TouchableWithoutFeedback>
       </RNTesterBlock>
@@ -1596,6 +1786,23 @@ function AccessibilityExpandedExample(): React.Node {
   );
 }
 
+function AccessibilityTextInputWithArialabelledByAttributeExample(): React.Node {
+  const theme = React.useContext(RNTesterThemeContext);
+  return (
+    <View>
+      <Text
+        nativeID="testAriaLabelledBy"
+        style={{color: theme.SecondaryLabelColor}}>
+        Phone Number
+      </Text>
+      <TextInput
+        aria-labelledby={'testAriaLabelledBy'}
+        style={styles.default}
+      />
+    </View>
+  );
+}
+
 exports.title = 'Accessibility';
 exports.documentationURL = 'https://reactnative.dev/docs/accessibilityinfo';
 exports.description = 'Examples of using Accessibility APIs.';
@@ -1688,17 +1895,11 @@ exports.examples = [
     },
   },
   {
-    title: 'TextInput with aria-labelledby attribute"',
-    render(): React.Element<typeof View> {
-      return (
-        <View>
-          <Text nativeID="testAriaLabelledBy">Phone Number</Text>
-          <TextInput
-            aria-labelledby={'testAriaLabelledBy'}
-            style={styles.default}
-          />
-        </View>
-      );
+    title: 'TextInput with aria-labelledby attribute',
+    render(): React.Element<
+      typeof AccessibilityTextInputWithArialabelledByAttributeExample,
+    > {
+      return <AccessibilityTextInputWithArialabelledByAttributeExample />;
     },
   },
 ];
diff --git a/packages/@react-native/tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js b/packages/@react-native/tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js
index 35e7ba7dd0..413e0a4505 100644
--- a/packages/@react-native/tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js
@@ -12,6 +12,7 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
 import RNTesterButton from '../../components/RNTesterButton';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 import * as React from 'react';
 import {Animated, Easing, StyleSheet, Text, View} from 'react-native';
 
@@ -29,11 +30,14 @@ const styles = StyleSheet.create({
 
 function CompositeAnimationsWithEasingExample(): React.Node {
   const anims = [1, 2, 3].map(() => new Animated.Value(0));
+  const theme = React.useContext(RNTesterThemeContext);
 
   return (
     <View>
       <RNTConfigurationBlock>
-        <Text>Note you cannot `useNativeDriver` for layout properties.</Text>
+        <Text style={{color: theme.SecondaryLabelColor}}>
+          Note you cannot `useNativeDriver` for layout properties.
+        </Text>
       </RNTConfigurationBlock>
       <RNTesterButton
         onPress={() => {
diff --git a/packages/@react-native/tester/js/examples/Animated/ComposingExample.js b/packages/@react-native/tester/js/examples/Animated/ComposingExample.js
index 8e90e4a29f..3a9080e343 100644
--- a/packages/@react-native/tester/js/examples/Animated/ComposingExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/ComposingExample.js
@@ -14,6 +14,7 @@ import type AnimatedValue from 'react-native/Libraries/Animated/nodes/AnimatedVa
 
 import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
 import RNTesterButton from '../../components/RNTesterButton';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 import ToggleNativeDriver from './utils/ToggleNativeDriver';
 import * as React from 'react';
 import {
@@ -152,11 +153,14 @@ function ComposingExampleItem({
   const animation = React.useRef(
     compositeAnimation(xTranslations.current, useNativeDriver),
   );
+  const theme = React.useContext(RNTesterThemeContext);
 
   return (
     <View style={styles.itemContainer}>
-      <Text style={styles.itemTitle}>{title}</Text>
-      <Text>{description}</Text>
+      <Text style={[styles.itemTitle, {color: theme.SecondaryLabelColor}]}>
+        {title}
+      </Text>
+      <Text style={{color: theme.SecondaryLabelColor}}>{description}</Text>
       <View style={styles.boxesContainer}>
         {boxIndexes.map(boxIndex => {
           const translateX = xTranslations.current[boxIndex].interpolate({
diff --git a/packages/@react-native/tester/js/examples/Animated/ContinuousInteractionsExample.js b/packages/@react-native/tester/js/examples/Animated/ContinuousInteractionsExample.js
index 6514bf8af5..e176011dca 100644
--- a/packages/@react-native/tester/js/examples/Animated/ContinuousInteractionsExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/ContinuousInteractionsExample.js
@@ -10,14 +10,26 @@
 
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 import * as React from 'react';
 import {Text} from 'react-native';
 
+function AnimatedContinuousInteractionsExample(): React.Node {
+  const theme = React.useContext(RNTesterThemeContext);
+  return (
+    <Text style={{color: theme.SecondaryLabelColor}}>
+      Checkout the Gratuitous Animation App!
+    </Text>
+  );
+}
+
 export default ({
   title: 'Continuous Interactions',
   name: 'continuousInteractions',
   description: ('Gesture events, chaining, 2D ' +
     'values, interrupting and transitioning ' +
     'animations, etc.': string),
-  render: (): React.Node => <Text>Checkout the Gratuitous Animation App!</Text>,
+  render(): React.Element<typeof AnimatedContinuousInteractionsExample> {
+    return <AnimatedContinuousInteractionsExample />;
+  },
 }: RNTesterModuleExample);
diff --git a/packages/@react-native/tester/js/examples/Animated/EasingExample.js b/packages/@react-native/tester/js/examples/Animated/EasingExample.js
index 3a7995ca33..c4dd4a2620 100644
--- a/packages/@react-native/tester/js/examples/Animated/EasingExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/EasingExample.js
@@ -12,6 +12,7 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
 import RNTesterButton from '../../components/RNTesterButton';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 import ToggleNativeDriver from './utils/ToggleNativeDriver';
 import * as React from 'react';
 import {
@@ -103,10 +104,14 @@ function EasingItem({
     },
   ];
 
+  const theme = React.useContext(RNTesterThemeContext);
+
   return (
     <View style={styles.itemContainer}>
       <View style={styles.itemMeta}>
-        <Text style={styles.itemTitle}>{item.title}</Text>
+        <Text style={[styles.itemTitle, {color: theme.SecondaryLabelColor}]}>
+          {item.title}
+        </Text>
         <RNTesterButton
           onPress={() => {
             opacityAndScale.current.setValue(0);
diff --git a/packages/@react-native/tester/js/examples/Animated/TransformStylesExample.js b/packages/@react-native/tester/js/examples/Animated/TransformStylesExample.js
index f7db70b56d..c107995c3b 100644
--- a/packages/@react-native/tester/js/examples/Animated/TransformStylesExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/TransformStylesExample.js
@@ -98,7 +98,9 @@ function AnimatedTransformStyleExample(): React.Node {
             borderBottomColor: theme.SeparatorColor,
           })}
         />
-        <Text style={styles.optionsTitle}>Selected Styles</Text>
+        <Text style={[styles.optionsTitle, {color: theme.SecondaryLabelColor}]}>
+          Selected Styles
+        </Text>
         <View style={styles.options}>
           {Object.keys(properties).map(property => {
             return (
@@ -125,7 +127,9 @@ function AnimatedTransformStyleExample(): React.Node {
         )}
       />
       <View style={styles.section}>
-        <Text>{'Should not crash when transform style key is undefined'}</Text>
+        <Text style={{color: theme.SecondaryLabelColor}}>
+          {'Should not crash when transform style key is undefined'}
+        </Text>
         <Animated.View style={[styles.animatedView, {transform: undefined}]} />
       </View>
     </View>
diff --git a/packages/@react-native/tester/js/examples/Animated/utils/ToggleNativeDriver.js b/packages/@react-native/tester/js/examples/Animated/utils/ToggleNativeDriver.js
index 2ec06cbf03..e3d482cb45 100644
--- a/packages/@react-native/tester/js/examples/Animated/utils/ToggleNativeDriver.js
+++ b/packages/@react-native/tester/js/examples/Animated/utils/ToggleNativeDriver.js
@@ -8,6 +8,7 @@
  * @format
  */
 
+import {RNTesterThemeContext} from '../../../components/RNTesterTheme';
 import * as React from 'react';
 import {StyleSheet, Switch, Text, View} from 'react-native';
 
@@ -27,9 +28,10 @@ export default function ToggleNativeDriver({
   onValueChange,
   style,
 }: Props): React.Node {
+  const theme = React.useContext(RNTesterThemeContext);
   return (
     <View style={StyleSheet.compose(styles.row, style)}>
-      <Text>Use Native Driver</Text>
+      <Text style={{color: theme.SecondaryLabelColor}}>Use Native Driver</Text>
       <Switch
         testID="toggle-use-native-driver"
         onValueChange={onValueChange}
diff --git a/packages/@react-native/tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js b/packages/@react-native/tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js
index 63eb574191..01dd7d8f89 100644
--- a/packages/@react-native/tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js
+++ b/packages/@react-native/tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js
@@ -124,6 +124,7 @@ class RNTesterPlatformTestEventRecorder {
               'on' + eventName[0].toUpperCase() + eventName.slice(1);
             return {
               ...acc,
+              // $FlowFixMe[missing-local-annot]
               [eventPropName]: e => {
                 recordedEventHandler(e, eventName);
               },
diff --git a/packages/@react-native/tester/js/examples/PixelRatio/PixelRatioExample.js b/packages/@react-native/tester/js/examples/PixelRatio/PixelRatioExample.js
new file mode 100644
index 0000000000..5dd49eb424
--- /dev/null
+++ b/packages/@react-native/tester/js/examples/PixelRatio/PixelRatioExample.js
@@ -0,0 +1,201 @@
+/**
+ * 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-local
+ */
+
+'use strict';
+
+import React, {useState} from 'react';
+import {
+  Button,
+  PixelRatio,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+function LayoutSizeToPixel() {
+  const [layoutDPSize, setLayoutDPSize] = useState<number>(0);
+  const pixelSize = PixelRatio.getPixelSizeForLayoutSize(
+    layoutDPSize ? layoutDPSize : 0,
+  );
+
+  const handleDPInputChange = (changedText: string) => {
+    const layoutSize = parseInt(changedText, 10);
+    setLayoutDPSize(layoutSize);
+  };
+
+  return (
+    <View style={styles.cardContainer}>
+      <View style={styles.card}>
+        <View style={styles.row}>
+          <Text style={styles.inputLabel}>Layout Size(dp): </Text>
+          <TextInput
+            style={styles.input}
+            value={layoutDPSize ? layoutDPSize.toString() : ''}
+            keyboardType={'numeric'}
+            onChangeText={handleDPInputChange}
+          />
+        </View>
+        <View style={[styles.row, styles.outputContainer]}>
+          <Text style={styles.inputLabel}>Pixel Size: </Text>
+          <Text>{pixelSize}px</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function RoundToNearestPixel() {
+  const [layoutDPSizeText, setLayoutDPSizeText] = useState('');
+  const layoutDPSize = parseFloat(layoutDPSizeText);
+
+  const pixelSize = PixelRatio.roundToNearestPixel(
+    layoutDPSize ? layoutDPSize : 0,
+  );
+
+  const handleDPInputChange = (changedText: string) => {
+    setLayoutDPSizeText(changedText);
+  };
+
+  return (
+    <View style={styles.cardContainer}>
+      <View style={styles.card}>
+        <View style={styles.row}>
+          <Text style={styles.inputLabel}>Layout Size(dp): </Text>
+          <TextInput
+            style={styles.input}
+            value={layoutDPSizeText ? layoutDPSizeText.toString() : ''}
+            keyboardType={'numeric'}
+            onChangeText={handleDPInputChange}
+          />
+        </View>
+        <View style={[styles.row, styles.outputContainer]}>
+          <Text style={styles.inputLabel}>Nearest Layout Size: </Text>
+          <Text>{pixelSize}dp</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function GetPixelRatio() {
+  const [pixelDensity, setPixelDensity] = useState(0);
+
+  const getPixelDensityCallback = () => {
+    setPixelDensity(PixelRatio.get());
+  };
+
+  return (
+    <View style={styles.cardContainer}>
+      <View style={styles.card}>
+        <Button onPress={getPixelDensityCallback} title={'Get Pixel Density'} />
+        {pixelDensity ? (
+          <View style={[styles.row, styles.outputContainer]}>
+            <Text style={styles.inputLabel}>Pixel Density: </Text>
+            <Text>{pixelDensity}</Text>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+function GetFontScale() {
+  const [fontScale, setFontScale] = useState(0);
+
+  const getPixelDensityCallback = () => {
+    setFontScale(PixelRatio.getFontScale());
+  };
+
+  return (
+    <View style={styles.cardContainer}>
+      <View style={styles.card}>
+        <Button onPress={getPixelDensityCallback} title={'Get Font Scale'} />
+        {fontScale ? (
+          <View style={[styles.row, styles.outputContainer]}>
+            <Text style={styles.inputLabel}>Font scale: </Text>
+            <Text>{fontScale}</Text>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    marginVertical: 40,
+    flex: 1,
+    alignSelf: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  outputContainer: {
+    marginTop: 16,
+  },
+  inputLabel: {
+    fontWeight: 'bold',
+  },
+  input: {
+    borderRadius: 6,
+    borderWidth: 1,
+    paddingVertical: 0,
+    height: 30,
+    width: 200,
+    alignSelf: 'center',
+    marginLeft: 14,
+    paddingHorizontal: 8,
+  },
+  card: {
+    width: 200,
+    height: 200,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backfaceVisibility: 'hidden',
+  },
+});
+
+exports.title = 'PixelRatio';
+exports.category = 'UI';
+exports.documentationURL = 'https://reactnative.dev/docs/pixelratio';
+exports.description = "Gives access to device's pixel density and font scale";
+exports.examples = [
+  {
+    title: 'Get pixel density',
+    description: 'Get pixel density of the device.',
+    render(): React$Node {
+      return <GetPixelRatio />;
+    },
+  },
+  {
+    title: 'Get font scale',
+    description: 'Get  the scaling factor for font sizes.',
+    render(): React$Node {
+      return <GetFontScale />;
+    },
+  },
+  {
+    title: 'Get pixel size from layout size',
+    description: 'layout size (dp) -> pixel size (px)',
+    render(): React$Node {
+      return <LayoutSizeToPixel />;
+    },
+  },
+  {
+    title: 'Rounds a layout size to the nearest pixel',
+    description:
+      'Rounds a layout size (dp) to the nearest layout size that corresponds to an integer number of pixels',
+    render(): React$Node {
+      return <RoundToNearestPixel />;
+    },
+  },
+];
diff --git a/packages/@react-native/tester/js/utils/RNTesterList.android.js b/packages/@react-native/tester/js/utils/RNTesterList.android.js
index fa39e44f4e..54aa25e178 100644
--- a/packages/@react-native/tester/js/utils/RNTesterList.android.js
+++ b/packages/@react-native/tester/js/utils/RNTesterList.android.js
@@ -263,6 +263,11 @@ const APIs: Array<RNTesterModuleInfo> = ([
     category: 'Basic',
     module: require('../examples/PanResponder/PanResponderExample'),
   },
+  {
+    key: 'PixelRatio',
+    category: 'UI',
+    module: require('../examples/PixelRatio/PixelRatioExample'),
+  },
   {
     key: 'PermissionsExampleAndroid',
     category: 'Android',
diff --git a/packages/@react-native/tester/js/utils/RNTesterList.ios.js b/packages/@react-native/tester/js/utils/RNTesterList.ios.js
index b8ddb51e40..082a9791cb 100644
--- a/packages/@react-native/tester/js/utils/RNTesterList.ios.js
+++ b/packages/@react-native/tester/js/utils/RNTesterList.ios.js
@@ -264,6 +264,10 @@ const APIs: Array<RNTesterModuleInfo> = ([
     key: 'PlatformColorExample',
     module: require('../examples/PlatformColor/PlatformColorExample'),
   },
+  {
+    key: 'PixelRatio',
+    module: require('../examples/PixelRatio/PixelRatioExample'),
+  },
   {
     key: 'PointerEventsExample',
     module: require('../examples/PointerEvents/PointerEventsExample'),
diff --git a/packages/@react-native/tester/overrides.json b/packages/@react-native/tester/overrides.json
index caee3152c1..3af7c8f3c2 100644
--- a/packages/@react-native/tester/overrides.json
+++ b/packages/@react-native/tester/overrides.json
@@ -1,5 +1,5 @@
 {
-  "baseVersion": "0.75.0-nightly-20240413-1b152f6ec",
+  "baseVersion": "0.75.0-nightly-20240420-03a51da72",
   "overrides": [
     {
       "type": "copy",
@@ -12,14 +12,14 @@
       "type": "copy",
       "directory": "js/components",
       "baseDirectory": "packages/rn-tester/js/components",
-      "baseHash": "e30582c7ce0ba5cc7965a1b5ccd7f443692e24e1",
+      "baseHash": "c451b2c1c49baed92d62937cfa6c9578a946c6f5",
       "issue": 4054
     },
     {
       "type": "copy",
       "directory": "js/examples/Accessibility",
       "baseDirectory": "packages/rn-tester/js/examples/Accessibility",
-      "baseHash": "c3e22748043a47b6947f0fdb6f9374e57112f4de",
+      "baseHash": "a7c60c86d2c129b8956401f9a655643fbbfd0d47",
       "issue": 4054
     },
     {
@@ -47,7 +47,7 @@
       "type": "copy",
       "directory": "js/examples/Animated",
       "baseDirectory": "packages/rn-tester/js/examples/Animated",
-      "baseHash": "c36e4c9d8e937947a40b8ba8c0f267b212feffca",
+      "baseHash": "9c619928fc015d297b782786f44405c1803868e4",
       "issue": 4054
     },
     {
@@ -124,7 +124,7 @@
       "type": "copy",
       "directory": "js/examples/Experimental",
       "baseDirectory": "packages/rn-tester/js/examples/Experimental",
-      "baseHash": "3cf296dfcc8341700a9aa7664521fe1e419723c9",
+      "baseHash": "3534648810ee7fde6157ba4c8ea0a344236f93b7",
       "issue": 4054
     },
     {
@@ -260,6 +260,13 @@
       "baseHash": "22fe8ca750de2518f0465659fbe84d9ba49705ec",
       "issue": 4054
     },
+    {
+      "type": "copy",
+      "directory": "js/examples/PixelRatio",
+      "baseDirectory": "packages/rn-tester/js/examples/PixelRatio",
+      "baseHash": "fce96794101df81b2eeb7a98b21e4a9456c1e437",
+      "issue": 4054
+    },
     {
       "type": "copy",
       "directory": "js/examples/PlatformColor",
@@ -488,14 +495,14 @@
       "type": "patch",
       "file": "js/utils/RNTesterList.android.js",
       "baseFile": "packages/rn-tester/js/utils/RNTesterList.android.js",
-      "baseHash": "c40d0a03a89b9017cbb08a0449d5a0c32cadc5f2",
+      "baseHash": "17abcd7c97a27d4d970d27c1449107222ffb6c85",
       "issue": 13228
     },
     {
       "type": "patch",
       "file": "js/utils/RNTesterList.ios.js",
       "baseFile": "packages/rn-tester/js/utils/RNTesterList.ios.js",
-      "baseHash": "39db425962737a74284b382273a83103d1bcaf91",
+      "baseHash": "468e29aa66b33e980efc15bf13d09b164fdec61b",
       "issue": 13228
     },
     {
diff --git a/packages/@react-native/tester/package.json b/packages/@react-native/tester/package.json
index b9141d86c3..02bae5044a 100644
--- a/packages/@react-native/tester/package.json
+++ b/packages/@react-native/tester/package.json
@@ -23,10 +23,10 @@
     "clean-ios": "rm -rf build/generated/ios Pods Podfile.lock"
   },
   "dependencies": {
+    "@react-native/popup-menu-android": "0.75.0-main",
     "flow-enums-runtime": "^0.0.6",
     "invariant": "^2.2.4",
-    "nullthrows": "^1.1.1",
-    "@react-native/popup-menu-android": "0.75.0-main"
+    "nullthrows": "^1.1.1"
   },
   "peerDependencies": {
     "react": "18.2.0",
diff --git a/packages/@rnw-scripts/babel-react-native-config/package.json b/packages/@rnw-scripts/babel-react-native-config/package.json
index 73cef719d8..9ed331280a 100644
--- a/packages/@rnw-scripts/babel-react-native-config/package.json
+++ b/packages/@rnw-scripts/babel-react-native-config/package.json
@@ -11,12 +11,12 @@
   },
   "dependencies": {
     "@babel/core": "^7.20.0",
-    "@react-native/babel-preset": "0.75.0-nightly-20240413-1b152f6ec",
+    "@react-native/babel-preset": "0.75.0-nightly-20240420-03a51da72",
     "babel-plugin-transform-flow-enums": "^0.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@react-native/babel-preset": "0.75.0-nightly-20240413-1b152f6ec",
+    "@react-native/babel-preset": "0.75.0-nightly-20240420-03a51da72",
     "eslint": "^8.19.0",
     "prettier": "2.8.8"
   },
diff --git a/packages/@rnw-scripts/eslint-config/package.json b/packages/@rnw-scripts/eslint-config/package.json
index 6f143b8935..6c425c8d7a 100644
--- a/packages/@rnw-scripts/eslint-config/package.json
+++ b/packages/@rnw-scripts/eslint-config/package.json
@@ -12,7 +12,7 @@
     "@babel/core": "^7.20.0",
     "@babel/eslint-parser": "^7.20.0",
     "@microsoft/eslint-plugin-sdl": "^0.2.0",
-    "@react-native/eslint-config": "0.75.0-nightly-20240413-1b152f6ec",
+    "@react-native/eslint-config": "0.75.0-nightly-20240420-03a51da72",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-ft-flow": "^2.0.1"
   },
diff --git a/packages/@rnw-scripts/metro-dev-config/package.json b/packages/@rnw-scripts/metro-dev-config/package.json
index ec19794d08..48be0c4ff5 100644
--- a/packages/@rnw-scripts/metro-dev-config/package.json
+++ b/packages/@rnw-scripts/metro-dev-config/package.json
@@ -17,7 +17,7 @@
     "lint:fix": "rnw-scripts lint:fix"
   },
   "dependencies": {
-    "@react-native/metro-config": "0.75.0-nightly-20240413-1b152f6ec",
+    "@react-native/metro-config": "0.75.0-nightly-20240420-03a51da72",
     "@rnx-kit/metro-config": "^1.3.5",
     "@rnx-kit/metro-plugin-duplicates-checker": "^2.1.0",
     "@rnx-kit/metro-serializer": "^1.0.11",
diff --git a/packages/e2e-test-app-fabric/package.json b/packages/e2e-test-app-fabric/package.json
index 779ab5d4df..db7b19c437 100644
--- a/packages/e2e-test-app-fabric/package.json
+++ b/packages/e2e-test-app-fabric/package.json
@@ -20,7 +20,7 @@
     "@typescript-eslint/eslint-plugin": "^5.21.0",
     "@typescript-eslint/parser": "^5.21.0",
     "react": "18.2.0",
-    "react-native": "0.75.0-nightly-20240413-1b152f6ec",
+    "react-native": "0.75.0-nightly-20240420-03a51da72",
     "react-native-windows": "^0.0.0-canary.817"
   },
   "devDependencies": {
@@ -29,9 +29,12 @@
     "@babel/preset-env": "^7.20.0",
     "@babel/preset-typescript": "^7.8.3",
     "@babel/runtime": "^7.20.0",
+    "@react-native-windows/automation": "^0.3.238",
+    "@react-native-windows/automation-commands": "^0.1.258",
+    "@react-native/metro-config": "0.75.0-nightly-20240420-03a51da72",
     "@react-native-windows/automation": "^0.3.239",
     "@react-native-windows/automation-commands": "^0.1.259",
-    "@react-native/metro-config": "0.75.0-nightly-20240413-1b152f6ec",
+    "@react-native/metro-config": "0.75.0-nightly-20240420-03a51da72",
     "@rnw-scripts/babel-node-config": "2.3.2",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
     "@rnw-scripts/eslint-config": "1.2.16",
diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap
index 4c05d8e21f..3bd93e6d98 100644
--- a/packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap
+++ b/packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap
@@ -2594,12 +2594,12 @@ exports[`Home UIA Tree Dump Cxx TurboModule 1`] = `
       },
       {
         "Offset": "15, 69, 0",
-        "Size": "65, 19",
+        "Size": "65, 20",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "65, 19",
+            "Size": "65, 20",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -2611,12 +2611,12 @@ exports[`Home UIA Tree Dump Cxx TurboModule 1`] = `
       },
       {
         "Offset": "853, 69, 0",
-        "Size": "22, 19",
+        "Size": "22, 20",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "22, 19",
+            "Size": "22, 20",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -2628,12 +2628,12 @@ exports[`Home UIA Tree Dump Cxx TurboModule 1`] = `
       },
       {
         "Offset": "901, 69, 0",
-        "Size": "52, 19",
+        "Size": "52, 20",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "52, 19",
+            "Size": "52, 20",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -7660,12 +7660,12 @@ exports[`Home UIA Tree Dump Performance API Examples 1`] = `
     "__Children": [
       {
         "Offset": "15, 12, 0",
-        "Size": "234, 28",
+        "Size": "234, 27",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "234, 28",
+            "Size": "234, 27",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -7918,6 +7918,176 @@ exports[`Home UIA Tree Dump Performance Comparison Examples 1`] = `
 }
 `;
 
+exports[`Home UIA Tree Dump PixelRatio 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "PixelRatio",
+    "ControlType": 50026,
+    "IsKeyboardFocusable": true,
+    "LocalizedControlType": "group",
+    "Name": "PixelRatio Gives access to device's pixel density and font scale",
+    "__Children": [
+      {
+        "AutomationId": "",
+        "ControlType": 50020,
+        "LocalizedControlType": "text",
+        "Name": "PixelRatio",
+      },
+      {
+        "AutomationId": "",
+        "ControlType": 50020,
+        "LocalizedControlType": "text",
+        "Name": "Gives access to device's pixel density and font scale",
+      },
+      {
+        "AutomationId": "",
+        "ControlType": 50020,
+        "LocalizedControlType": "text",
+        "Name": "UI",
+      },
+      {
+        "AutomationId": "",
+        "ControlType": 50020,
+        "LocalizedControlType": "text",
+        "Name": "iOS",
+      },
+      {
+        "AutomationId": "",
+        "ControlType": 50020,
+        "LocalizedControlType": "text",
+        "Name": "Android",
+      },
+    ],
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ViewComponentView",
+    "_Props": {
+      "AccessibilityLabel": "PixelRatio Gives access to device's pixel density and font scale",
+      "TestId": "PixelRatio",
+    },
+    "__Children": [
+      {
+        "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+        "_Props": {},
+      },
+      {
+        "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+        "_Props": {},
+      },
+      {
+        "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+        "_Props": {},
+      },
+      {
+        "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+        "_Props": {},
+      },
+      {
+        "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+        "_Props": {},
+      },
+    ],
+  },
+  "Visual Tree": {
+    "Brush": {
+      "Brush Type": "ColorBrush",
+      "Color": "rgba(255, 255, 255, 255)",
+    },
+    "Comment": "PixelRatio",
+    "Offset": "0, 0, 0",
+    "Size": "968, 99",
+    "Visual Type": "SpriteVisual",
+    "__Children": [
+      {
+        "Offset": "15, 12, 0",
+        "Size": "87, 28",
+        "Visual Type": "SpriteVisual",
+        "__Children": [
+          {
+            "Offset": "0, 0, 0",
+            "Size": "87, 28",
+            "Visual Type": "SpriteVisual",
+          },
+          {
+            "Offset": "0, 0, 0",
+            "Size": "0, 0",
+            "Visual Type": "SpriteVisual",
+          },
+        ],
+      },
+      {
+        "Offset": "15, 43, 0",
+        "Size": "938, 20",
+        "Visual Type": "SpriteVisual",
+        "__Children": [
+          {
+            "Offset": "0, 0, 0",
+            "Size": "938, 20",
+            "Visual Type": "SpriteVisual",
+          },
+          {
+            "Offset": "0, 0, 0",
+            "Size": "0, 0",
+            "Visual Type": "SpriteVisual",
+          },
+        ],
+      },
+      {
+        "Offset": "15, 69, 0",
+        "Size": "65, 19",
+        "Visual Type": "SpriteVisual",
+        "__Children": [
+          {
+            "Offset": "0, 0, 0",
+            "Size": "65, 19",
+            "Visual Type": "SpriteVisual",
+          },
+          {
+            "Offset": "0, 0, 0",
+            "Size": "0, 0",
+            "Visual Type": "SpriteVisual",
+          },
+        ],
+      },
+      {
+        "Offset": "853, 69, 0",
+        "Size": "22, 19",
+        "Visual Type": "SpriteVisual",
+        "__Children": [
+          {
+            "Offset": "0, 0, 0",
+            "Size": "22, 19",
+            "Visual Type": "SpriteVisual",
+          },
+          {
+            "Offset": "0, 0, 0",
+            "Size": "0, 0",
+            "Visual Type": "SpriteVisual",
+          },
+        ],
+      },
+      {
+        "Offset": "901, 69, 0",
+        "Size": "52, 19",
+        "Visual Type": "SpriteVisual",
+        "__Children": [
+          {
+            "Offset": "0, 0, 0",
+            "Size": "52, 19",
+            "Visual Type": "SpriteVisual",
+          },
+          {
+            "Offset": "0, 0, 0",
+            "Size": "0, 0",
+            "Visual Type": "SpriteVisual",
+          },
+        ],
+      },
+    ],
+  },
+}
+`;
+
 exports[`Home UIA Tree Dump PlatformColor 1`] = `
 {
   "Automation Tree": {
@@ -8034,12 +8204,12 @@ exports[`Home UIA Tree Dump PlatformColor 1`] = `
       },
       {
         "Offset": "15, 69, 0",
-        "Size": "65, 19",
+        "Size": "65, 20",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "65, 19",
+            "Size": "65, 20",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -8051,12 +8221,12 @@ exports[`Home UIA Tree Dump PlatformColor 1`] = `
       },
       {
         "Offset": "853, 69, 0",
-        "Size": "22, 19",
+        "Size": "22, 20",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "22, 19",
+            "Size": "22, 20",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -8068,12 +8238,12 @@ exports[`Home UIA Tree Dump PlatformColor 1`] = `
       },
       {
         "Offset": "901, 69, 0",
-        "Size": "52, 19",
+        "Size": "52, 20",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "52, 19",
+            "Size": "52, 20",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -8170,12 +8340,12 @@ exports[`Home UIA Tree Dump Pointer Events 1`] = `
     "__Children": [
       {
         "Offset": "15, 12, 0",
-        "Size": "125, 28",
+        "Size": "125, 27",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "125, 28",
+            "Size": "125, 27",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -8675,17 +8845,17 @@ exports[`Home UIA Tree Dump RTLExample 1`] = `
     },
     "Comment": "RTLExample",
     "Offset": "0, 0, 0",
-    "Size": "968, 99",
+    "Size": "968, 100",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
         "Offset": "15, 12, 0",
-        "Size": "105, 27",
+        "Size": "105, 28",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "105, 27",
+            "Size": "105, 28",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -8714,12 +8884,12 @@ exports[`Home UIA Tree Dump RTLExample 1`] = `
       },
       {
         "Offset": "15, 69, 0",
-        "Size": "65, 20",
+        "Size": "65, 19",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "65, 20",
+            "Size": "65, 19",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -8731,12 +8901,12 @@ exports[`Home UIA Tree Dump RTLExample 1`] = `
       },
       {
         "Offset": "853, 69, 0",
-        "Size": "22, 20",
+        "Size": "22, 19",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "22, 20",
+            "Size": "22, 19",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -8748,12 +8918,12 @@ exports[`Home UIA Tree Dump RTLExample 1`] = `
       },
       {
         "Offset": "901, 69, 0",
-        "Size": "52, 20",
+        "Size": "52, 19",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "52, 20",
+            "Size": "52, 19",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -9634,7 +9804,7 @@ exports[`Home UIA Tree Dump Share 1`] = `
     },
     "Comment": "Share",
     "Offset": "0, 0, 0",
-    "Size": "968, 100",
+    "Size": "968, 99",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -10693,12 +10863,12 @@ exports[`Home UIA Tree Dump Timers 1`] = `
       },
       {
         "Offset": "15, 69, 0",
-        "Size": "65, 19",
+        "Size": "65, 20",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "65, 19",
+            "Size": "65, 20",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -10710,12 +10880,12 @@ exports[`Home UIA Tree Dump Timers 1`] = `
       },
       {
         "Offset": "853, 69, 0",
-        "Size": "22, 19",
+        "Size": "22, 20",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "22, 19",
+            "Size": "22, 20",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -10727,12 +10897,12 @@ exports[`Home UIA Tree Dump Timers 1`] = `
       },
       {
         "Offset": "901, 69, 0",
-        "Size": "52, 19",
+        "Size": "52, 20",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "52, 19",
+            "Size": "52, 20",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -11169,12 +11339,12 @@ exports[`Home UIA Tree Dump Transforms 1`] = `
     "__Children": [
       {
         "Offset": "15, 12, 0",
-        "Size": "97, 28",
+        "Size": "97, 27",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "97, 28",
+            "Size": "97, 27",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -11504,17 +11674,17 @@ exports[`Home UIA Tree Dump TurboModule 1`] = `
     },
     "Comment": "TurboModule",
     "Offset": "0, 0, 0",
-    "Size": "968, 100",
+    "Size": "968, 99",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
         "Offset": "15, 12, 0",
-        "Size": "121, 27",
+        "Size": "121, 28",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "121, 27",
+            "Size": "121, 28",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -11543,12 +11713,12 @@ exports[`Home UIA Tree Dump TurboModule 1`] = `
       },
       {
         "Offset": "15, 69, 0",
-        "Size": "65, 20",
+        "Size": "65, 19",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "65, 20",
+            "Size": "65, 19",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -11560,12 +11730,12 @@ exports[`Home UIA Tree Dump TurboModule 1`] = `
       },
       {
         "Offset": "853, 69, 0",
-        "Size": "22, 20",
+        "Size": "22, 19",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "22, 20",
+            "Size": "22, 19",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -11577,12 +11747,12 @@ exports[`Home UIA Tree Dump TurboModule 1`] = `
       },
       {
         "Offset": "901, 69, 0",
-        "Size": "52, 20",
+        "Size": "52, 19",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "52, 20",
+            "Size": "52, 19",
             "Visual Type": "SpriteVisual",
           },
           {
@@ -11844,7 +12014,7 @@ exports[`Home UIA Tree Dump WebSocket 1`] = `
     },
     "Comment": "WebSocket",
     "Offset": "0, 0, 0",
-    "Size": "968, 99",
+    "Size": "968, 100",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap
index bce0152844..adf8b22e0e 100644
--- a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap
+++ b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap
@@ -2140,7 +2140,13 @@ exports[`snapshotAllPages Animated 1`] = `
         ]
       }
     >
-      <Text>
+      <Text
+        style={
+          {
+            "color": "#3c3c4399",
+          }
+        }
+      >
         Use Native Driver
       </Text>
       <RCTSwitch
@@ -2161,10 +2167,15 @@ exports[`snapshotAllPages Animated 1`] = `
     </View>
     <Text
       style={
-        {
-          "marginBottom": 6,
-          "marginTop": 4,
-        }
+        [
+          {
+            "marginBottom": 6,
+            "marginTop": 4,
+          },
+          {
+            "color": "#3c3c4399",
+          },
+        ]
       }
     >
       Selected Styles
@@ -2216,9 +2227,11 @@ exports[`snapshotAllPages Animated 1`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -2236,7 +2249,7 @@ exports[`snapshotAllPages Animated 1`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -2283,9 +2296,11 @@ exports[`snapshotAllPages Animated 1`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -2303,7 +2318,7 @@ exports[`snapshotAllPages Animated 1`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -2350,9 +2365,11 @@ exports[`snapshotAllPages Animated 1`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -2370,7 +2387,7 @@ exports[`snapshotAllPages Animated 1`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -2417,9 +2434,11 @@ exports[`snapshotAllPages Animated 1`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -2437,7 +2456,7 @@ exports[`snapshotAllPages Animated 1`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -2484,9 +2503,11 @@ exports[`snapshotAllPages Animated 1`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -2504,7 +2525,7 @@ exports[`snapshotAllPages Animated 1`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -2551,9 +2572,11 @@ exports[`snapshotAllPages Animated 1`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -2571,7 +2594,7 @@ exports[`snapshotAllPages Animated 1`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -2618,9 +2641,11 @@ exports[`snapshotAllPages Animated 1`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -2638,7 +2663,7 @@ exports[`snapshotAllPages Animated 1`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -2685,9 +2710,11 @@ exports[`snapshotAllPages Animated 1`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -2705,7 +2732,7 @@ exports[`snapshotAllPages Animated 1`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -2752,9 +2779,11 @@ exports[`snapshotAllPages Animated 1`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -2772,7 +2801,7 @@ exports[`snapshotAllPages Animated 1`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -2819,9 +2848,11 @@ exports[`snapshotAllPages Animated 1`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -2839,7 +2870,7 @@ exports[`snapshotAllPages Animated 1`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -2886,9 +2917,11 @@ exports[`snapshotAllPages Animated 1`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -2906,7 +2939,7 @@ exports[`snapshotAllPages Animated 1`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -2953,9 +2986,11 @@ exports[`snapshotAllPages Animated 1`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -2973,7 +3008,7 @@ exports[`snapshotAllPages Animated 1`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -3055,7 +3090,13 @@ exports[`snapshotAllPages Animated 1`] = `
       }
     }
   >
-    <Text>
+    <Text
+      style={
+        {
+          "color": "#3c3c4399",
+        }
+      }
+    >
       Should not crash when transform style key is undefined
     </Text>
     <View
@@ -3098,7 +3139,13 @@ exports[`snapshotAllPages Animated 2`] = `
         }
       }
     >
-      <Text>
+      <Text
+        style={
+          {
+            "color": "#3c3c4399",
+          }
+        }
+      >
         Use Native Driver
       </Text>
       <RCTSwitch
@@ -3287,7 +3334,13 @@ exports[`snapshotAllPages Animated 3`] = `
         }
       }
     >
-      <Text>
+      <Text
+        style={
+          {
+            "color": "#3c3c4399",
+          }
+        }
+      >
         Use Native Driver
       </Text>
       <RCTSwitch
@@ -3418,7 +3471,13 @@ exports[`snapshotAllPages Animated 4`] = `
         }
       }
     >
-      <Text>
+      <Text
+        style={
+          {
+            "color": "#3c3c4399",
+          }
+        }
+      >
         Use Native Driver
       </Text>
       <RCTSwitch
@@ -3495,15 +3554,26 @@ exports[`snapshotAllPages Animated 4`] = `
         >
           <Text
             style={
-              {
-                "fontSize": 18,
-                "fontWeight": "300",
-              }
+              [
+                {
+                  "fontSize": 18,
+                  "fontWeight": "300",
+                },
+                {
+                  "color": "#3c3c4399",
+                },
+              ]
             }
           >
             Parallel
           </Text>
-          <Text>
+          <Text
+            style={
+              {
+                "color": "#3c3c4399",
+              }
+            }
+          >
             Starts a number of animations at the same time
           </Text>
           <View
@@ -3789,15 +3859,26 @@ exports[`snapshotAllPages Animated 4`] = `
         >
           <Text
             style={
-              {
-                "fontSize": 18,
-                "fontWeight": "300",
-              }
+              [
+                {
+                  "fontSize": 18,
+                  "fontWeight": "300",
+                },
+                {
+                  "color": "#3c3c4399",
+                },
+              ]
             }
           >
             Sequence
           </Text>
-          <Text>
+          <Text
+            style={
+              {
+                "color": "#3c3c4399",
+              }
+            }
+          >
             Starts the animations in order, waiting for each to complete before starting the next
           </Text>
           <View
@@ -4083,15 +4164,26 @@ exports[`snapshotAllPages Animated 4`] = `
         >
           <Text
             style={
-              {
-                "fontSize": 18,
-                "fontWeight": "300",
-              }
+              [
+                {
+                  "fontSize": 18,
+                  "fontWeight": "300",
+                },
+                {
+                  "color": "#3c3c4399",
+                },
+              ]
             }
           >
             Stagger
           </Text>
-          <Text>
+          <Text
+            style={
+              {
+                "color": "#3c3c4399",
+              }
+            }
+          >
             Starts animations in order and in parallel, but with successive delays
           </Text>
           <View
@@ -4377,15 +4469,26 @@ exports[`snapshotAllPages Animated 4`] = `
         >
           <Text
             style={
-              {
-                "fontSize": 18,
-                "fontWeight": "300",
-              }
+              [
+                {
+                  "fontSize": 18,
+                  "fontWeight": "300",
+                },
+                {
+                  "color": "#3c3c4399",
+                },
+              ]
             }
           >
             Delay
           </Text>
-          <Text>
+          <Text
+            style={
+              {
+                "color": "#3c3c4399",
+              }
+            }
+          >
             Starts an animation after a given delay
           </Text>
           <View
@@ -4686,7 +4789,13 @@ exports[`snapshotAllPages Animated 5`] = `
         }
       }
     >
-      <Text>
+      <Text
+        style={
+          {
+            "color": "#3c3c4399",
+          }
+        }
+      >
         Use Native Driver
       </Text>
       <RCTSwitch
@@ -4841,10 +4950,15 @@ exports[`snapshotAllPages Animated 5`] = `
           >
             <Text
               style={
-                {
-                  "fontSize": 18,
-                  "fontWeight": "300",
-                }
+                [
+                  {
+                    "fontSize": 18,
+                    "fontWeight": "300",
+                  },
+                  {
+                    "color": "#3c3c4399",
+                  },
+                ]
               }
             >
               Bounce
@@ -4958,10 +5072,15 @@ exports[`snapshotAllPages Animated 5`] = `
           >
             <Text
               style={
-                {
-                  "fontSize": 18,
-                  "fontWeight": "300",
-                }
+                [
+                  {
+                    "fontSize": 18,
+                    "fontWeight": "300",
+                  },
+                  {
+                    "color": "#3c3c4399",
+                  },
+                ]
               }
             >
               Ease
@@ -5075,10 +5194,15 @@ exports[`snapshotAllPages Animated 5`] = `
           >
             <Text
               style={
-                {
-                  "fontSize": 18,
-                  "fontWeight": "300",
-                }
+                [
+                  {
+                    "fontSize": 18,
+                    "fontWeight": "300",
+                  },
+                  {
+                    "color": "#3c3c4399",
+                  },
+                ]
               }
             >
               Elastic
@@ -5216,10 +5340,15 @@ exports[`snapshotAllPages Animated 5`] = `
           >
             <Text
               style={
-                {
-                  "fontSize": 18,
-                  "fontWeight": "300",
-                }
+                [
+                  {
+                    "fontSize": 18,
+                    "fontWeight": "300",
+                  },
+                  {
+                    "color": "#3c3c4399",
+                  },
+                ]
               }
             >
               Linear
@@ -5333,10 +5462,15 @@ exports[`snapshotAllPages Animated 5`] = `
           >
             <Text
               style={
-                {
-                  "fontSize": 18,
-                  "fontWeight": "300",
-                }
+                [
+                  {
+                    "fontSize": 18,
+                    "fontWeight": "300",
+                  },
+                  {
+                    "color": "#3c3c4399",
+                  },
+                ]
               }
             >
               Quad
@@ -5450,10 +5584,15 @@ exports[`snapshotAllPages Animated 5`] = `
           >
             <Text
               style={
-                {
-                  "fontSize": 18,
-                  "fontWeight": "300",
-                }
+                [
+                  {
+                    "fontSize": 18,
+                    "fontWeight": "300",
+                  },
+                  {
+                    "color": "#3c3c4399",
+                  },
+                ]
               }
             >
               Cubic
@@ -5576,7 +5715,13 @@ exports[`snapshotAllPages Animated 6`] = `
       ]
     }
   >
-    <Text>
+    <Text
+      style={
+        {
+          "color": "#3c3c4399",
+        }
+      }
+    >
       Note you cannot \`useNativeDriver\` for layout properties.
     </Text>
   </View>
@@ -5719,7 +5864,13 @@ exports[`snapshotAllPages Animated 7`] = `
         }
       }
     >
-      <Text>
+      <Text
+        style={
+          {
+            "color": "#3c3c4399",
+          }
+        }
+      >
         Use Native Driver
       </Text>
       <RCTSwitch
@@ -5846,7 +5997,13 @@ exports[`snapshotAllPages Animated 8`] = `
         }
       }
     >
-      <Text>
+      <Text
+        style={
+          {
+            "color": "#3c3c4399",
+          }
+        }
+      >
         Use Native Driver
       </Text>
       <RCTSwitch
@@ -6169,7 +6326,13 @@ exports[`snapshotAllPages Animated 9`] = `
         }
       }
     >
-      <Text>
+      <Text
+        style={
+          {
+            "color": "#3c3c4399",
+          }
+        }
+      >
         Use Native Driver
       </Text>
       <RCTSwitch
@@ -6300,7 +6463,13 @@ exports[`snapshotAllPages Animated 10`] = `
         }
       }
     >
-      <Text>
+      <Text
+        style={
+          {
+            "color": "#3c3c4399",
+          }
+        }
+      >
         Use Native Driver
       </Text>
       <RCTSwitch
@@ -6403,7 +6572,13 @@ exports[`snapshotAllPages Animated 10`] = `
 `;
 
 exports[`snapshotAllPages Animated 11`] = `
-<Text>
+<Text
+  style={
+    {
+      "color": "#3c3c4399",
+    }
+  }
+>
   Checkout the Gratuitous Animation App!
 </Text>
 `;
@@ -33689,6 +33864,394 @@ exports[`snapshotAllPages Performance Comparison Examples 6`] = `
 </View>
 `;
 
+exports[`snapshotAllPages PixelRatio 1`] = `
+<View
+  style={
+    {
+      "alignSelf": "center",
+      "flex": 1,
+      "marginVertical": 40,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backfaceVisibility": "hidden",
+        "height": 200,
+        "justifyContent": "center",
+        "width": 200,
+      }
+    }
+  >
+    <View
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        [
+          {
+            "backgroundColor": {
+              "windowsbrush": [
+                "ButtonBackground",
+              ],
+            },
+            "borderBottomWidth": 1.5,
+            "borderColor": {
+              "windowsbrush": [
+                "ButtonBorderBrush",
+              ],
+            },
+            "borderRadius": 3,
+            "borderWidth": 1,
+          },
+        ]
+      }
+    >
+      <View
+        style={{}}
+      >
+        <View
+          style={{}}
+        >
+          <Text
+            style={
+              [
+                {
+                  "color": {
+                    "windowsbrush": [
+                      "ButtonForeground",
+                    ],
+                  },
+                  "fontSize": 14,
+                  "fontWeight": "400",
+                  "margin": 8,
+                  "textAlign": "center",
+                },
+              ]
+            }
+          >
+            Get Pixel Density
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`snapshotAllPages PixelRatio 2`] = `
+<View
+  style={
+    {
+      "alignSelf": "center",
+      "flex": 1,
+      "marginVertical": 40,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backfaceVisibility": "hidden",
+        "height": 200,
+        "justifyContent": "center",
+        "width": 200,
+      }
+    }
+  >
+    <View
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        [
+          {
+            "backgroundColor": {
+              "windowsbrush": [
+                "ButtonBackground",
+              ],
+            },
+            "borderBottomWidth": 1.5,
+            "borderColor": {
+              "windowsbrush": [
+                "ButtonBorderBrush",
+              ],
+            },
+            "borderRadius": 3,
+            "borderWidth": 1,
+          },
+        ]
+      }
+    >
+      <View
+        style={{}}
+      >
+        <View
+          style={{}}
+        >
+          <Text
+            style={
+              [
+                {
+                  "color": {
+                    "windowsbrush": [
+                      "ButtonForeground",
+                    ],
+                  },
+                  "fontSize": 14,
+                  "fontWeight": "400",
+                  "margin": 8,
+                  "textAlign": "center",
+                },
+              ]
+            }
+          >
+            Get Font Scale
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`snapshotAllPages PixelRatio 3`] = `
+<View
+  style={
+    {
+      "alignSelf": "center",
+      "flex": 1,
+      "marginVertical": 40,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backfaceVisibility": "hidden",
+        "height": 200,
+        "justifyContent": "center",
+        "width": 200,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontWeight": "bold",
+          }
+        }
+      >
+        Layout Size(dp): 
+      </Text>
+      <TextInput
+        keyboardType="numeric"
+        onChangeText={[Function]}
+        style={
+          {
+            "alignSelf": "center",
+            "borderRadius": 6,
+            "borderWidth": 1,
+            "height": 30,
+            "marginLeft": 14,
+            "paddingHorizontal": 8,
+            "paddingVertical": 0,
+            "width": 200,
+          }
+        }
+        value=""
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+          {
+            "marginTop": 16,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "fontWeight": "bold",
+          }
+        }
+      >
+        Pixel Size: 
+      </Text>
+      <Text>
+        0
+        px
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`snapshotAllPages PixelRatio 4`] = `
+<View
+  style={
+    {
+      "alignSelf": "center",
+      "flex": 1,
+      "marginVertical": 40,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backfaceVisibility": "hidden",
+        "height": 200,
+        "justifyContent": "center",
+        "width": 200,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontWeight": "bold",
+          }
+        }
+      >
+        Layout Size(dp): 
+      </Text>
+      <TextInput
+        keyboardType="numeric"
+        onChangeText={[Function]}
+        style={
+          {
+            "alignSelf": "center",
+            "borderRadius": 6,
+            "borderWidth": 1,
+            "height": 30,
+            "marginLeft": 14,
+            "paddingHorizontal": 8,
+            "paddingVertical": 0,
+            "width": 200,
+          }
+        }
+        value=""
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+          {
+            "marginTop": 16,
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          {
+            "fontWeight": "bold",
+          }
+        }
+      >
+        Nearest Layout Size: 
+      </Text>
+      <Text>
+        0
+        dp
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`snapshotAllPages PlatformColor 1`] = `
 <View
   style={
@@ -68682,9 +69245,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -68702,7 +69267,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -68749,9 +69314,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -68769,7 +69336,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -68816,9 +69383,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -68839,7 +69408,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -68886,9 +69455,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -68906,7 +69477,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -68953,9 +69524,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -68973,7 +69546,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -69020,9 +69593,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -69040,7 +69615,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -69087,9 +69662,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -69107,7 +69684,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -69154,9 +69731,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -69174,7 +69753,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -69221,9 +69800,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -69241,7 +69822,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -69288,9 +69869,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -69308,7 +69891,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -69355,9 +69938,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -69375,7 +69960,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -69422,9 +70007,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -69442,7 +70029,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -69489,9 +70076,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -69509,7 +70098,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -69556,9 +70145,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -69576,7 +70167,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -69623,9 +70214,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -69643,7 +70236,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -69690,9 +70283,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -69710,7 +70305,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -69757,9 +70352,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -69777,7 +70374,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -69824,9 +70421,11 @@ exports[`snapshotAllPages Text 1`] = `
                   <View
                     style={
                       [
+                        {
+                          "borderColor": "#005dffff",
+                        },
                         {
                           "alignItems": "center",
-                          "borderColor": "rgba(0,0,0, 0.1)",
                           "borderRadius": 16,
                           "borderWidth": 1,
                           "padding": 6,
@@ -69844,7 +70443,7 @@ exports[`snapshotAllPages Text 1`] = `
                     <Text
                       style={
                         {
-                          "color": "black",
+                          "color": "#3c3c4399",
                         }
                       }
                     >
@@ -69919,9 +70518,11 @@ exports[`snapshotAllPages Text 1`] = `
                 <View
                   style={
                     [
+                      {
+                        "borderColor": "#005dffff",
+                      },
                       {
                         "alignItems": "center",
-                        "borderColor": "rgba(0,0,0, 0.1)",
                         "borderRadius": 16,
                         "borderWidth": 1,
                         "padding": 6,
@@ -69942,7 +70543,7 @@ exports[`snapshotAllPages Text 1`] = `
                   <Text
                     style={
                       {
-                        "color": "black",
+                        "color": "#3c3c4399",
                       }
                     }
                   >
@@ -69989,9 +70590,11 @@ exports[`snapshotAllPages Text 1`] = `
                 <View
                   style={
                     [
+                      {
+                        "borderColor": "#005dffff",
+                      },
                       {
                         "alignItems": "center",
-                        "borderColor": "rgba(0,0,0, 0.1)",
                         "borderRadius": 16,
                         "borderWidth": 1,
                         "padding": 6,
@@ -70009,7 +70612,7 @@ exports[`snapshotAllPages Text 1`] = `
                   <Text
                     style={
                       {
-                        "color": "black",
+                        "color": "#3c3c4399",
                       }
                     }
                   >
@@ -70056,9 +70659,11 @@ exports[`snapshotAllPages Text 1`] = `
                 <View
                   style={
                     [
+                      {
+                        "borderColor": "#005dffff",
+                      },
                       {
                         "alignItems": "center",
-                        "borderColor": "rgba(0,0,0, 0.1)",
                         "borderRadius": 16,
                         "borderWidth": 1,
                         "padding": 6,
@@ -70076,7 +70681,7 @@ exports[`snapshotAllPages Text 1`] = `
                   <Text
                     style={
                       {
-                        "color": "black",
+                        "color": "#3c3c4399",
                       }
                     }
                   >
@@ -86878,9 +87483,11 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -86898,7 +87505,7 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -86945,9 +87552,11 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -86965,7 +87574,7 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -87012,9 +87621,11 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -87032,7 +87643,7 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -87079,9 +87690,11 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -87102,7 +87715,7 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -87149,9 +87762,11 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -87169,7 +87784,7 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -87216,9 +87831,11 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -87236,7 +87853,7 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -87283,9 +87900,11 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -87303,7 +87922,7 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -87350,9 +87969,11 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -87370,7 +87991,7 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -87417,9 +88038,11 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -87437,7 +88060,7 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -87484,9 +88107,11 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -87504,7 +88129,7 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -87551,9 +88176,11 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -87571,7 +88198,7 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
@@ -87618,9 +88245,11 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
         <View
           style={
             [
+              {
+                "borderColor": "#005dffff",
+              },
               {
                 "alignItems": "center",
-                "borderColor": "rgba(0,0,0, 0.1)",
                 "borderRadius": 16,
                 "borderWidth": 1,
                 "padding": 6,
@@ -87638,7 +88267,7 @@ exports[`snapshotAllPages XMLHttpRequest 2`] = `
           <Text
             style={
               {
-                "color": "black",
+                "color": "#3c3c4399",
               }
             }
           >
diff --git a/packages/e2e-test-app/package.json b/packages/e2e-test-app/package.json
index 459a94f52c..44b4e45495 100644
--- a/packages/e2e-test-app/package.json
+++ b/packages/e2e-test-app/package.json
@@ -20,7 +20,7 @@
     "@typescript-eslint/eslint-plugin": "^5.21.0",
     "@typescript-eslint/parser": "^5.21.0",
     "react": "18.2.0",
-    "react-native": "0.75.0-nightly-20240413-1b152f6ec",
+    "react-native": "0.75.0-nightly-20240420-03a51da72",
     "react-native-windows": "^0.0.0-canary.817",
     "react-native-xaml": "^0.0.78"
   },
@@ -32,7 +32,7 @@
     "@babel/runtime": "^7.20.0",
     "@react-native-windows/automation": "^0.3.239",
     "@react-native-windows/automation-commands": "^0.1.259",
-    "@react-native/metro-config": "0.75.0-nightly-20240413-1b152f6ec",
+    "@react-native/metro-config": "0.75.0-nightly-20240420-03a51da72",
     "@rnw-scripts/babel-node-config": "2.3.2",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
     "@rnw-scripts/eslint-config": "1.2.16",
diff --git a/packages/integration-test-app/package.json b/packages/integration-test-app/package.json
index 095a3c8d03..1907707512 100644
--- a/packages/integration-test-app/package.json
+++ b/packages/integration-test-app/package.json
@@ -17,7 +17,7 @@
     "@typescript-eslint/parser": "^5.21.0",
     "chai": "^4.2.0",
     "react": "18.2.0",
-    "react-native": "0.75.0-nightly-20240413-1b152f6ec",
+    "react-native": "0.75.0-nightly-20240420-03a51da72",
     "react-native-windows": "^0.0.0-canary.817"
   },
   "devDependencies": {
@@ -27,7 +27,7 @@
     "@babel/preset-typescript": "^7.11.5",
     "@babel/traverse": "^7.11.5",
     "@babel/types": "^7.11.5",
-    "@react-native/metro-config": "0.75.0-nightly-20240413-1b152f6ec",
+    "@react-native/metro-config": "0.75.0-nightly-20240420-03a51da72",
     "@rnw-scripts/babel-node-config": "2.3.2",
     "@rnw-scripts/eslint-config": "^1.2.16",
     "@rnw-scripts/just-task": "^2.3.32",
diff --git a/packages/playground/package.json b/packages/playground/package.json
index 3376b3b382..dfb98e91d6 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -16,13 +16,13 @@
     "@typescript-eslint/eslint-plugin": "^5.21.0",
     "@typescript-eslint/parser": "^5.21.0",
     "react": "18.2.0",
-    "react-native": "0.75.0-nightly-20240413-1b152f6ec",
+    "react-native": "0.75.0-nightly-20240420-03a51da72",
     "react-native-windows": "^0.0.0-canary.817"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/runtime": "^7.20.0",
-    "@react-native/metro-config": "0.75.0-nightly-20240413-1b152f6ec",
+    "@react-native/metro-config": "0.75.0-nightly-20240420-03a51da72",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
     "@rnw-scripts/eslint-config": "1.2.16",
     "@rnw-scripts/just-task": "2.3.32",
diff --git a/packages/sample-app-fabric/package.json b/packages/sample-app-fabric/package.json
index e92593e65e..20ae24e811 100644
--- a/packages/sample-app-fabric/package.json
+++ b/packages/sample-app-fabric/package.json
@@ -15,7 +15,7 @@
     "@typescript-eslint/eslint-plugin": "^5.21.0",
     "@typescript-eslint/parser": "^5.21.0",
     "react": "18.2.0",
-    "react-native": "0.75.0-nightly-20240413-1b152f6ec",
+    "react-native": "0.75.0-nightly-20240420-03a51da72",
     "react-native-windows": "^0.0.0-canary.817"
   },
   "devDependencies": {
@@ -25,7 +25,7 @@
     "@babel/preset-typescript": "^7.8.3",
     "@babel/runtime": "^7.20.0",
     "@jest/globals": "^29.7.0",
-    "@react-native/metro-config": "0.75.0-nightly-20240413-1b152f6ec",
+    "@react-native/metro-config": "0.75.0-nightly-20240420-03a51da72",
     "@rnw-scripts/babel-node-config": "2.3.2",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
     "@rnw-scripts/eslint-config": "1.2.16",
diff --git a/packages/sample-apps/package.json b/packages/sample-apps/package.json
index 01ec34bb3e..40618ecd92 100644
--- a/packages/sample-apps/package.json
+++ b/packages/sample-apps/package.json
@@ -16,7 +16,7 @@
     "@typescript-eslint/eslint-plugin": "^5.30.5",
     "@typescript-eslint/parser": "^5.57.1",
     "react": "18.2.0",
-    "react-native": "0.75.0-nightly-20240413-1b152f6ec",
+    "react-native": "0.75.0-nightly-20240420-03a51da72",
     "react-native-windows": "^0.0.0-canary.817"
   },
   "devDependencies": {
@@ -25,7 +25,7 @@
     "@babel/runtime": "^7.20.0",
     "@react-native-windows/cli": "0.0.0-canary.213",
     "@react-native-windows/codegen": "0.0.0-canary.87",
-    "@react-native/metro-config": "0.75.0-nightly-20240413-1b152f6ec",
+    "@react-native/metro-config": "0.75.0-nightly-20240420-03a51da72",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
     "@rnw-scripts/eslint-config": "1.2.16",
     "@rnw-scripts/just-task": "2.3.32",
diff --git a/vnext/.flowconfig b/vnext/.flowconfig
index 3fa5987110..f849531b64 100644
--- a/vnext/.flowconfig
+++ b/vnext/.flowconfig
@@ -146,4 +146,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.233.0
+^0.234.0
diff --git a/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/cxxreact/JSExecutor.cpp b/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/cxxreact/JSExecutor.cpp
index 5607cf18f6..a698643d96 100644
--- a/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/cxxreact/JSExecutor.cpp
+++ b/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/cxxreact/JSExecutor.cpp
@@ -44,6 +44,12 @@ bool JSExecutor::supportsConsole() const {
     return false;
 }
 
+std::unique_ptr<facebook::react::jsinspector_modern::StackTrace> JSExecutor::captureStackTrace(
+    facebook::jsi::Runtime &runtime,
+    size_t framesToSkip) {
+  return std::make_unique<facebook::react::jsinspector_modern::StackTrace>();
+}
+
 std::unique_ptr<jsinspector_modern::RuntimeAgentDelegate>
 JSExecutor::createAgentDelegate(
     jsinspector_modern::FrontendChannel frontendChannel,
diff --git a/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/cxxreact/JSExecutor.h b/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/cxxreact/JSExecutor.h
index 20b0c21a96..704775c1e9 100644
--- a/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/cxxreact/JSExecutor.h
+++ b/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/cxxreact/JSExecutor.h
@@ -16,6 +16,7 @@
 #include <jsinspector-modern/FallbackRuntimeAgentDelegate.h>
 #include <jsinspector-modern/ReactCdp.h>
 #include <jsinspector-modern/ConsoleMessage.h>
+#include <jsinspector-modern/StackTrace.h>
 
 #ifndef RN_EXPORT
 #define RN_EXPORT __attribute__((visibility("default")))
@@ -146,6 +147,22 @@ class RN_EXPORT JSExecutor : public jsinspector_modern::RuntimeTargetDelegate {
 
   virtual bool supportsConsole() const;
 
+  /**
+   * \returns an opaque representation of a stack trace. This may be passed back
+   * to the `RuntimeTargetDelegate` as part of `addConsoleMessage` or other APIs
+   * that report stack traces.
+   * \param framesToSkip The number of call frames to skip. The first call frame
+   * is the topmost (current) frame on the Runtime's call stack, which will
+   * typically be the (native) JSI HostFunction that called this method.
+   * \note The method is called on the JS thread, and receives a valid reference
+   * to the current \c jsi::Runtime. The callee MAY use its own intrinsic
+   * Runtime reference, if it has one, without checking it for equivalence with
+   * the one provided here.
+   */
+  std::unique_ptr<jsinspector_modern::StackTrace> captureStackTrace(
+      jsi::Runtime& runtime,
+      size_t framesToSkip = 0) override;
+
   /**
    * Create a RuntimeAgentDelegate that can be used to debug the JS VM instance.
    */
diff --git a/vnext/Shared/HermesRuntimeHolder.cpp b/vnext/Shared/HermesRuntimeHolder.cpp
index 68006301d4..3ed3525b06 100644
--- a/vnext/Shared/HermesRuntimeHolder.cpp
+++ b/vnext/Shared/HermesRuntimeHolder.cpp
@@ -419,6 +419,12 @@ bool HermesJSRuntime::supportsConsole() const {
   return false;
 }
 
+std::unique_ptr<facebook::react::jsinspector_modern::StackTrace> HermesJSRuntime::captureStackTrace(
+    facebook::jsi::Runtime &runtime,
+    size_t framesToSkip) {
+  return std::make_unique<facebook::react::jsinspector_modern::StackTrace>();
+}
+
 std::unique_ptr<facebook::react::jsinspector_modern::RuntimeAgentDelegate> HermesJSRuntime::createAgentDelegate(
     facebook::react::jsinspector_modern::FrontendChannel frontendChannel,
     facebook::react::jsinspector_modern::SessionState &sessionState,
diff --git a/vnext/Shared/HermesRuntimeHolder.h b/vnext/Shared/HermesRuntimeHolder.h
index 20aaaadbf1..216c9b683f 100644
--- a/vnext/Shared/HermesRuntimeHolder.h
+++ b/vnext/Shared/HermesRuntimeHolder.h
@@ -61,6 +61,9 @@ class HermesJSRuntime : public facebook::react::JSRuntime {
   void addConsoleMessage(facebook::jsi::Runtime &runtime, facebook::react::jsinspector_modern::ConsoleMessage message)
       override;
   bool supportsConsole() const override;
+  std::unique_ptr<facebook::react::jsinspector_modern::StackTrace> captureStackTrace(
+      facebook::jsi::Runtime &runtime,
+      size_t framesToSkip = 0) override;
 
   std::unique_ptr<facebook::react::jsinspector_modern::RuntimeAgentDelegate> createAgentDelegate(
       facebook::react::jsinspector_modern::FrontendChannel frontendChannel,
diff --git a/vnext/Shared/Shared.vcxitems b/vnext/Shared/Shared.vcxitems
index 66f487124f..46fdd69c4f 100644
--- a/vnext/Shared/Shared.vcxitems
+++ b/vnext/Shared/Shared.vcxitems
@@ -598,9 +598,6 @@
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\mounting\ShadowTreeRegistry.cpp" />
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\mounting\ShadowView.cpp" />
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\mounting\ShadowViewMutation.cpp" DisableSpecificWarnings="4715;%(DisableSpecificWarnings)" />
-    <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\mounting\Stubs.cpp" />
-    <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\mounting\StubView.cpp" />
-    <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\mounting\StubViewTree.cpp" />
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\mounting\TelemetryController.cpp" />
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\observers\events\EventPerformanceLogger.cpp" />
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\scheduler\Scheduler.cpp" />
diff --git a/vnext/codegen/NativeReactNativeFeatureFlagsSpec.g.h b/vnext/codegen/NativeReactNativeFeatureFlagsSpec.g.h
index 8040547716..36fe8de0dc 100644
--- a/vnext/codegen/NativeReactNativeFeatureFlagsSpec.g.h
+++ b/vnext/codegen/NativeReactNativeFeatureFlagsSpec.g.h
@@ -29,9 +29,10 @@ struct ReactNativeFeatureFlagsSpec : winrt::Microsoft::ReactNative::TurboModuleS
       SyncMethod<bool() noexcept>{10, L"forceBatchingMountItemsOnAndroid"},
       SyncMethod<bool() noexcept>{11, L"inspectorEnableCxxInspectorPackagerConnection"},
       SyncMethod<bool() noexcept>{12, L"inspectorEnableModernCDPRegistry"},
-      SyncMethod<bool() noexcept>{13, L"useModernRuntimeScheduler"},
-      SyncMethod<bool() noexcept>{14, L"useNativeViewConfigsInBridgelessMode"},
-      SyncMethod<bool() noexcept>{15, L"useStateAlignmentMechanism"},
+      SyncMethod<bool() noexcept>{13, L"preventDoubleTextMeasure"},
+      SyncMethod<bool() noexcept>{14, L"useModernRuntimeScheduler"},
+      SyncMethod<bool() noexcept>{15, L"useNativeViewConfigsInBridgelessMode"},
+      SyncMethod<bool() noexcept>{16, L"useStateAlignmentMechanism"},
   };
 
   template <class TModule>
@@ -105,16 +106,21 @@ struct ReactNativeFeatureFlagsSpec : winrt::Microsoft::ReactNative::TurboModuleS
           "    REACT_SYNC_METHOD(inspectorEnableModernCDPRegistry) static bool inspectorEnableModernCDPRegistry() noexcept { /* implementation */ }\n");
     REACT_SHOW_METHOD_SPEC_ERRORS(
           13,
+          "preventDoubleTextMeasure",
+          "    REACT_SYNC_METHOD(preventDoubleTextMeasure) bool preventDoubleTextMeasure() noexcept { /* implementation */ }\n"
+          "    REACT_SYNC_METHOD(preventDoubleTextMeasure) static bool preventDoubleTextMeasure() noexcept { /* implementation */ }\n");
+    REACT_SHOW_METHOD_SPEC_ERRORS(
+          14,
           "useModernRuntimeScheduler",
           "    REACT_SYNC_METHOD(useModernRuntimeScheduler) bool useModernRuntimeScheduler() noexcept { /* implementation */ }\n"
           "    REACT_SYNC_METHOD(useModernRuntimeScheduler) static bool useModernRuntimeScheduler() noexcept { /* implementation */ }\n");
     REACT_SHOW_METHOD_SPEC_ERRORS(
-          14,
+          15,
           "useNativeViewConfigsInBridgelessMode",
           "    REACT_SYNC_METHOD(useNativeViewConfigsInBridgelessMode) bool useNativeViewConfigsInBridgelessMode() noexcept { /* implementation */ }\n"
           "    REACT_SYNC_METHOD(useNativeViewConfigsInBridgelessMode) static bool useNativeViewConfigsInBridgelessMode() noexcept { /* implementation */ }\n");
     REACT_SHOW_METHOD_SPEC_ERRORS(
-          15,
+          16,
           "useStateAlignmentMechanism",
           "    REACT_SYNC_METHOD(useStateAlignmentMechanism) bool useStateAlignmentMechanism() noexcept { /* implementation */ }\n"
           "    REACT_SYNC_METHOD(useStateAlignmentMechanism) static bool useStateAlignmentMechanism() noexcept { /* implementation */ }\n");
diff --git a/vnext/codegen/NativeUIManagerSpec.g.h b/vnext/codegen/NativeUIManagerSpec.g.h
index 495b10192a..1d2096ebe1 100644
--- a/vnext/codegen/NativeUIManagerSpec.g.h
+++ b/vnext/codegen/NativeUIManagerSpec.g.h
@@ -34,11 +34,9 @@ struct UIManagerSpec : winrt::Microsoft::ReactNative::TurboModuleSpec {
       SyncMethod<std::vector<std::string>() noexcept>{15, L"getDefaultEventTypes"},
       Method<void(bool) noexcept>{16, L"setLayoutAnimationEnabledExperimental"},
       Method<void(double, double) noexcept>{17, L"sendAccessibilityEvent"},
-      Method<void(double, std::vector<std::string>, Callback<::React::JSValue>, Callback<std::string, double>) noexcept>{18, L"showPopupMenu"},
-      Method<void() noexcept>{19, L"dismissPopupMenu"},
-      SyncMethod<::React::JSValue(std::string) noexcept>{20, L"lazilyLoadView"},
-      Method<void(double) noexcept>{21, L"focus"},
-      Method<void(double) noexcept>{22, L"blur"},
+      SyncMethod<::React::JSValue(std::string) noexcept>{18, L"lazilyLoadView"},
+      Method<void(double) noexcept>{19, L"focus"},
+      Method<void(double) noexcept>{20, L"blur"},
   };
 
   template <class TModule>
@@ -137,26 +135,16 @@ struct UIManagerSpec : winrt::Microsoft::ReactNative::TurboModuleSpec {
           "    REACT_METHOD(sendAccessibilityEvent) static void sendAccessibilityEvent(double reactTag, double eventType) noexcept { /* implementation */ }\n");
     REACT_SHOW_METHOD_SPEC_ERRORS(
           18,
-          "showPopupMenu",
-          "    REACT_METHOD(showPopupMenu) void showPopupMenu(double reactTag, std::vector<std::string> const & items, std::function<void(::React::JSValue const &)> const & error, std::function<void(std::string, double)> const & success) noexcept { /* implementation */ }\n"
-          "    REACT_METHOD(showPopupMenu) static void showPopupMenu(double reactTag, std::vector<std::string> const & items, std::function<void(::React::JSValue const &)> const & error, std::function<void(std::string, double)> const & success) noexcept { /* implementation */ }\n");
-    REACT_SHOW_METHOD_SPEC_ERRORS(
-          19,
-          "dismissPopupMenu",
-          "    REACT_METHOD(dismissPopupMenu) void dismissPopupMenu() noexcept { /* implementation */ }\n"
-          "    REACT_METHOD(dismissPopupMenu) static void dismissPopupMenu() noexcept { /* implementation */ }\n");
-    REACT_SHOW_METHOD_SPEC_ERRORS(
-          20,
           "lazilyLoadView",
           "    REACT_SYNC_METHOD(lazilyLoadView) ::React::JSValue lazilyLoadView(std::string name) noexcept { /* implementation */ }\n"
           "    REACT_SYNC_METHOD(lazilyLoadView) static ::React::JSValue lazilyLoadView(std::string name) noexcept { /* implementation */ }\n");
     REACT_SHOW_METHOD_SPEC_ERRORS(
-          21,
+          19,
           "focus",
           "    REACT_METHOD(focus) void focus(double reactTag) noexcept { /* implementation */ }\n"
           "    REACT_METHOD(focus) static void focus(double reactTag) noexcept { /* implementation */ }\n");
     REACT_SHOW_METHOD_SPEC_ERRORS(
-          22,
+          20,
           "blur",
           "    REACT_METHOD(blur) void blur(double reactTag) noexcept { /* implementation */ }\n"
           "    REACT_METHOD(blur) static void blur(double reactTag) noexcept { /* implementation */ }\n");
diff --git a/vnext/codegen/rnwcoreJSI-generated.cpp b/vnext/codegen/rnwcoreJSI-generated.cpp
index 1290e29559..030a7362fe 100644
--- a/vnext/codegen/rnwcoreJSI-generated.cpp
+++ b/vnext/codegen/rnwcoreJSI-generated.cpp
@@ -76,6 +76,11 @@ static jsi::Value __hostFunction_NativeReactNativeFeatureFlagsCxxSpecJSI_inspect
     rt
   );
 }
+static jsi::Value __hostFunction_NativeReactNativeFeatureFlagsCxxSpecJSI_preventDoubleTextMeasure(jsi::Runtime &rt, TurboModule &turboModule, const jsi::Value* args, size_t count) {
+  return static_cast<NativeReactNativeFeatureFlagsCxxSpecJSI *>(&turboModule)->preventDoubleTextMeasure(
+    rt
+  );
+}
 static jsi::Value __hostFunction_NativeReactNativeFeatureFlagsCxxSpecJSI_useModernRuntimeScheduler(jsi::Runtime &rt, TurboModule &turboModule, const jsi::Value* args, size_t count) {
   return static_cast<NativeReactNativeFeatureFlagsCxxSpecJSI *>(&turboModule)->useModernRuntimeScheduler(
     rt
@@ -107,6 +112,7 @@ NativeReactNativeFeatureFlagsCxxSpecJSI::NativeReactNativeFeatureFlagsCxxSpecJSI
   methodMap_["forceBatchingMountItemsOnAndroid"] = MethodMetadata {0, __hostFunction_NativeReactNativeFeatureFlagsCxxSpecJSI_forceBatchingMountItemsOnAndroid};
   methodMap_["inspectorEnableCxxInspectorPackagerConnection"] = MethodMetadata {0, __hostFunction_NativeReactNativeFeatureFlagsCxxSpecJSI_inspectorEnableCxxInspectorPackagerConnection};
   methodMap_["inspectorEnableModernCDPRegistry"] = MethodMetadata {0, __hostFunction_NativeReactNativeFeatureFlagsCxxSpecJSI_inspectorEnableModernCDPRegistry};
+  methodMap_["preventDoubleTextMeasure"] = MethodMetadata {0, __hostFunction_NativeReactNativeFeatureFlagsCxxSpecJSI_preventDoubleTextMeasure};
   methodMap_["useModernRuntimeScheduler"] = MethodMetadata {0, __hostFunction_NativeReactNativeFeatureFlagsCxxSpecJSI_useModernRuntimeScheduler};
   methodMap_["useNativeViewConfigsInBridgelessMode"] = MethodMetadata {0, __hostFunction_NativeReactNativeFeatureFlagsCxxSpecJSI_useNativeViewConfigsInBridgelessMode};
   methodMap_["useStateAlignmentMechanism"] = MethodMetadata {0, __hostFunction_NativeReactNativeFeatureFlagsCxxSpecJSI_useStateAlignmentMechanism};
@@ -2666,22 +2672,6 @@ static jsi::Value __hostFunction_NativeUIManagerCxxSpecJSI_sendAccessibilityEven
   );
   return jsi::Value::undefined();
 }
-static jsi::Value __hostFunction_NativeUIManagerCxxSpecJSI_showPopupMenu(jsi::Runtime &rt, TurboModule &turboModule, const jsi::Value* args, size_t count) {
-  static_cast<NativeUIManagerCxxSpecJSI *>(&turboModule)->showPopupMenu(
-    rt,
-    count <= 0 ? throw jsi::JSError(rt, "Expected argument in position 0 to be passed") : args[0].asNumber(),
-    count <= 1 ? throw jsi::JSError(rt, "Expected argument in position 1 to be passed") : args[1].asObject(rt).asArray(rt),
-    count <= 2 ? throw jsi::JSError(rt, "Expected argument in position 2 to be passed") : args[2].asObject(rt).asFunction(rt),
-    count <= 3 ? throw jsi::JSError(rt, "Expected argument in position 3 to be passed") : args[3].asObject(rt).asFunction(rt)
-  );
-  return jsi::Value::undefined();
-}
-static jsi::Value __hostFunction_NativeUIManagerCxxSpecJSI_dismissPopupMenu(jsi::Runtime &rt, TurboModule &turboModule, const jsi::Value* args, size_t count) {
-  static_cast<NativeUIManagerCxxSpecJSI *>(&turboModule)->dismissPopupMenu(
-    rt
-  );
-  return jsi::Value::undefined();
-}
 static jsi::Value __hostFunction_NativeUIManagerCxxSpecJSI_lazilyLoadView(jsi::Runtime &rt, TurboModule &turboModule, const jsi::Value* args, size_t count) {
   return static_cast<NativeUIManagerCxxSpecJSI *>(&turboModule)->lazilyLoadView(
     rt,
@@ -2724,8 +2714,6 @@ NativeUIManagerCxxSpecJSI::NativeUIManagerCxxSpecJSI(std::shared_ptr<CallInvoker
   methodMap_["getDefaultEventTypes"] = MethodMetadata {0, __hostFunction_NativeUIManagerCxxSpecJSI_getDefaultEventTypes};
   methodMap_["setLayoutAnimationEnabledExperimental"] = MethodMetadata {1, __hostFunction_NativeUIManagerCxxSpecJSI_setLayoutAnimationEnabledExperimental};
   methodMap_["sendAccessibilityEvent"] = MethodMetadata {2, __hostFunction_NativeUIManagerCxxSpecJSI_sendAccessibilityEvent};
-  methodMap_["showPopupMenu"] = MethodMetadata {4, __hostFunction_NativeUIManagerCxxSpecJSI_showPopupMenu};
-  methodMap_["dismissPopupMenu"] = MethodMetadata {0, __hostFunction_NativeUIManagerCxxSpecJSI_dismissPopupMenu};
   methodMap_["lazilyLoadView"] = MethodMetadata {1, __hostFunction_NativeUIManagerCxxSpecJSI_lazilyLoadView};
   methodMap_["focus"] = MethodMetadata {1, __hostFunction_NativeUIManagerCxxSpecJSI_focus};
   methodMap_["blur"] = MethodMetadata {1, __hostFunction_NativeUIManagerCxxSpecJSI_blur};
diff --git a/vnext/codegen/rnwcoreJSI.h b/vnext/codegen/rnwcoreJSI.h
index 83e7ae51bd..bce33c2fb1 100644
--- a/vnext/codegen/rnwcoreJSI.h
+++ b/vnext/codegen/rnwcoreJSI.h
@@ -33,6 +33,7 @@ public:
   virtual bool forceBatchingMountItemsOnAndroid(jsi::Runtime &rt) = 0;
   virtual bool inspectorEnableCxxInspectorPackagerConnection(jsi::Runtime &rt) = 0;
   virtual bool inspectorEnableModernCDPRegistry(jsi::Runtime &rt) = 0;
+  virtual bool preventDoubleTextMeasure(jsi::Runtime &rt) = 0;
   virtual bool useModernRuntimeScheduler(jsi::Runtime &rt) = 0;
   virtual bool useNativeViewConfigsInBridgelessMode(jsi::Runtime &rt) = 0;
   virtual bool useStateAlignmentMechanism(jsi::Runtime &rt) = 0;
@@ -163,6 +164,14 @@ private:
       return bridging::callFromJs<bool>(
           rt, &T::inspectorEnableModernCDPRegistry, jsInvoker_, instance_);
     }
+    bool preventDoubleTextMeasure(jsi::Runtime &rt) override {
+      static_assert(
+          bridging::getParameterCount(&T::preventDoubleTextMeasure) == 1,
+          "Expected preventDoubleTextMeasure(...) to have 1 parameters");
+
+      return bridging::callFromJs<bool>(
+          rt, &T::preventDoubleTextMeasure, jsInvoker_, instance_);
+    }
     bool useModernRuntimeScheduler(jsi::Runtime &rt) override {
       static_assert(
           bridging::getParameterCount(&T::useModernRuntimeScheduler) == 1,
@@ -7048,8 +7057,6 @@ public:
   virtual jsi::Array getDefaultEventTypes(jsi::Runtime &rt) = 0;
   virtual void setLayoutAnimationEnabledExperimental(jsi::Runtime &rt, bool enabled) = 0;
   virtual void sendAccessibilityEvent(jsi::Runtime &rt, double reactTag, double eventType) = 0;
-  virtual void showPopupMenu(jsi::Runtime &rt, double reactTag, jsi::Array items, jsi::Function error, jsi::Function success) = 0;
-  virtual void dismissPopupMenu(jsi::Runtime &rt) = 0;
   virtual jsi::Object lazilyLoadView(jsi::Runtime &rt, jsi::String name) = 0;
   virtual void focus(jsi::Runtime &rt, double reactTag) = 0;
   virtual void blur(jsi::Runtime &rt, double reactTag) = 0;
@@ -7228,22 +7235,6 @@ private:
       return bridging::callFromJs<void>(
           rt, &T::sendAccessibilityEvent, jsInvoker_, instance_, std::move(reactTag), std::move(eventType));
     }
-    void showPopupMenu(jsi::Runtime &rt, double reactTag, jsi::Array items, jsi::Function error, jsi::Function success) override {
-      static_assert(
-          bridging::getParameterCount(&T::showPopupMenu) == 5,
-          "Expected showPopupMenu(...) to have 5 parameters");
-
-      return bridging::callFromJs<void>(
-          rt, &T::showPopupMenu, jsInvoker_, instance_, std::move(reactTag), std::move(items), std::move(error), std::move(success));
-    }
-    void dismissPopupMenu(jsi::Runtime &rt) override {
-      static_assert(
-          bridging::getParameterCount(&T::dismissPopupMenu) == 1,
-          "Expected dismissPopupMenu(...) to have 1 parameters");
-
-      return bridging::callFromJs<void>(
-          rt, &T::dismissPopupMenu, jsInvoker_, instance_);
-    }
     jsi::Object lazilyLoadView(jsi::Runtime &rt, jsi::String name) override {
       static_assert(
           bridging::getParameterCount(&T::lazilyLoadView) == 2,
diff --git a/vnext/overrides.json b/vnext/overrides.json
index bf5f7e429b..ed46b243da 100644
--- a/vnext/overrides.json
+++ b/vnext/overrides.json
@@ -8,13 +8,13 @@
     "**/__snapshots__/**",
     "src-win/rntypes/**"
   ],
-  "baseVersion": "0.75.0-nightly-20240413-1b152f6ec",
+  "baseVersion": "0.75.0-nightly-20240420-03a51da72",
   "overrides": [
     {
       "type": "derived",
       "file": ".flowconfig",
       "baseFile": ".flowconfig",
-      "baseHash": "207887dce4d232e4ded4dbeefe4188766b24144a"
+      "baseHash": "4f8e1f39d8ed29d7d0e21455cac407d352a6824d"
     },
     {
       "type": "derived",
@@ -592,4 +592,4 @@
       "baseHash": "b4a125d9134f33aeaba9e06988e18cbb0b4e9e9c"
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/vnext/package.json b/vnext/package.json
index ead4201f4c..a911c2cd8c 100644
--- a/vnext/package.json
+++ b/vnext/package.json
@@ -28,13 +28,13 @@
     "@react-native-community/cli-platform-ios": "14.0.0-alpha.2",
     "@react-native-windows/cli": "0.0.0-canary.213",
     "@react-native/assets": "1.0.0",
-    "@react-native/assets-registry": "0.75.0-nightly-20240413-1b152f6ec",
-    "@react-native/codegen": "0.75.0-nightly-20240413-1b152f6ec",
-    "@react-native/community-cli-plugin": "0.75.0-nightly-20240413-1b152f6ec",
-    "@react-native/gradle-plugin": "0.75.0-nightly-20240413-1b152f6ec",
-    "@react-native/js-polyfills": "0.75.0-nightly-20240413-1b152f6ec",
-    "@react-native/normalize-colors": "0.75.0-nightly-20240413-1b152f6ec",
-    "@react-native/virtualized-lists": "0.75.0-nightly-20240413-1b152f6ec",
+    "@react-native/assets-registry": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/codegen": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/community-cli-plugin": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/gradle-plugin": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/js-polyfills": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/normalize-colors": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/virtualized-lists": "0.75.0-nightly-20240420-03a51da72",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",
@@ -52,7 +52,7 @@
     "nullthrows": "^1.1.1",
     "pretty-format": "^26.5.2",
     "promise": "^8.3.0",
-    "react-devtools-core": "^5.0.2",
+    "react-devtools-core": "5.1.0",
     "react-refresh": "^0.14.0",
     "react-shallow-renderer": "^16.15.0",
     "regenerator-runtime": "^0.13.2",
@@ -66,7 +66,7 @@
   },
   "devDependencies": {
     "@react-native-windows/codegen": "0.0.0-canary.87",
-    "@react-native/metro-config": "0.75.0-nightly-20240413-1b152f6ec",
+    "@react-native/metro-config": "0.75.0-nightly-20240420-03a51da72",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
     "@rnw-scripts/eslint-config": "1.2.16",
     "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.20",
@@ -82,7 +82,7 @@
     "just-scripts": "^1.3.3",
     "prettier": "2.8.8",
     "react": "18.2.0",
-    "react-native": "0.75.0-nightly-20240413-1b152f6ec",
+    "react-native": "0.75.0-nightly-20240420-03a51da72",
     "react-native-platform-override": "^1.9.33",
     "react-refresh": "^0.14.0",
     "typescript": "5.0.4"
@@ -90,7 +90,7 @@
   "peerDependencies": {
     "@types/react": "^18.2.6",
     "react": "18.2.0",
-    "react-native": "0.75.0-nightly-20240413-1b152f6ec"
+    "react-native": "0.75.0-nightly-20240420-03a51da72"
   },
   "beachball": {
     "defaultNpmTag": "canary",
diff --git a/yarn.lock b/yarn.lock
index 719b8e6fae..fdfe1e7775 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2487,27 +2487,27 @@
   resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.7.5.tgz#e43fcd65f260fa4f23e974ccb9fb7c1f7a9ff94a"
   integrity sha512-vhMaOLkXSUb+YKVbukMJToU4g+89VMhBG2U9+cLYF8X8HtFRidrHjohGqT8/OyesDuKIXeLIP+UFYI9Q9CRA9Q==
 
-"@react-native/assets-registry@0.75.0-nightly-20240413-1b152f6ec":
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.75.0-nightly-20240413-1b152f6ec.tgz#1a4f446df7e13aa8d040f10b2c94da9352e2f277"
-  integrity sha512-AQg+BgJ8mCuZHVO+8FJmR+lWH7mVycDcuaYU10VQZgA+HJZr27K/fxR0boAVAfddWyatkLUa+NncK5NzdSFKuQ==
+"@react-native/assets-registry@0.75.0-nightly-20240420-03a51da72":
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.75.0-nightly-20240420-03a51da72.tgz#f24727d38c0ad6cba5ce7acfec1707cbcff316fa"
+  integrity sha512-8SKaVWov9+ywuX5rfMZSrH765XBoEen9kNKEyi8W51PdCw8LpJTjD6WCMtsqe/HOnD3LEGKm9xvI3JnXp+Zk+g==
 
 "@react-native/assets@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e"
   integrity sha512-KrwSpS1tKI70wuKl68DwJZYEvXktDHdZMG0k2AXD/rJVSlB23/X2CB2cutVR0HwNMJIal9HOUOBB2rVfa6UGtQ==
 
-"@react-native/babel-plugin-codegen@0.75.0-nightly-20240413-1b152f6ec":
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/@react-native/babel-plugin-codegen/-/babel-plugin-codegen-0.75.0-nightly-20240413-1b152f6ec.tgz#184d21ce2bf7327df8fe4941c8699679231f4b70"
-  integrity sha512-cKnXTHICyro1n0f60nrPR9xj1hwWlpmxxNZc1+mREdHvyYGo6ce84goCPTe349XoH1tWj89g/H1FaOrdjVcznw==
+"@react-native/babel-plugin-codegen@0.75.0-nightly-20240420-03a51da72":
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/@react-native/babel-plugin-codegen/-/babel-plugin-codegen-0.75.0-nightly-20240420-03a51da72.tgz#418e3b4b7ff323fe973ec7ccf507ab0979a4d41a"
+  integrity sha512-y44ynwZ0bkmeerEaUoxNxWPQUeypE4r5Z0HF7fEgySkSMMfUKqZcnQVtVmXBm/KDorCzlx/JZC/4Dky5Pyq4SQ==
   dependencies:
-    "@react-native/codegen" "0.75.0-nightly-20240413-1b152f6ec"
+    "@react-native/codegen" "0.75.0-nightly-20240420-03a51da72"
 
-"@react-native/babel-preset@0.75.0-nightly-20240413-1b152f6ec":
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/@react-native/babel-preset/-/babel-preset-0.75.0-nightly-20240413-1b152f6ec.tgz#6d97dd2cbede918765ac3ecdf6f39dbd6e0bafeb"
-  integrity sha512-liq/BGo7xgl+UPWt2eEx9xEGXguCnfdfl8Ml0iQ/c82Q/ZmhlW528B54F0lVbbfIvaqbPkT41jNlZGGC2PDwcA==
+"@react-native/babel-preset@0.75.0-nightly-20240420-03a51da72":
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/@react-native/babel-preset/-/babel-preset-0.75.0-nightly-20240420-03a51da72.tgz#464c3bed086368abef17a5cf4c9687439f9adaa2"
+  integrity sha512-SrNWKC1De44eUyZCQNxj/Jpt5x7mAObqCw07nmW+rR6BKAwtSbt1R8pSfItuuu3UKYYfEHwY6ANjisAKSD3iwQ==
   dependencies:
     "@babel/core" "^7.20.0"
     "@babel/plugin-proposal-async-generator-functions" "^7.0.0"
@@ -2549,14 +2549,14 @@
     "@babel/plugin-transform-typescript" "^7.5.0"
     "@babel/plugin-transform-unicode-regex" "^7.0.0"
     "@babel/template" "^7.0.0"
-    "@react-native/babel-plugin-codegen" "0.75.0-nightly-20240413-1b152f6ec"
+    "@react-native/babel-plugin-codegen" "0.75.0-nightly-20240420-03a51da72"
     babel-plugin-transform-flow-enums "^0.0.2"
     react-refresh "^0.14.0"
 
-"@react-native/codegen@0.75.0-nightly-20240413-1b152f6ec":
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/@react-native/codegen/-/codegen-0.75.0-nightly-20240413-1b152f6ec.tgz#79af3a0da2aad8c90f38c49fcbfb971fee6d073b"
-  integrity sha512-YBk5AQxptih20XZf8fDhmJG5ZqpcPNTPlZFPZMLgfrm0ld0NdJlPknbbJz34YrYTCImFrGhmZNlReQCuuTkO7g==
+"@react-native/codegen@0.75.0-nightly-20240420-03a51da72":
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/@react-native/codegen/-/codegen-0.75.0-nightly-20240420-03a51da72.tgz#c242d436a0eab928dd645b16e68a58fd494640ef"
+  integrity sha512-wbUglCC63jmtvoIR0HvwsC8ZWm7yyu++A/vZDVlc2UOm4RV0YPAaFIolNFwBWd1eGRuKo6Ws3flhNmkFk0EHZw==
   dependencies:
     "@babel/parser" "^7.20.0"
     glob "^7.1.1"
@@ -2566,15 +2566,15 @@
     mkdirp "^0.5.1"
     nullthrows "^1.1.1"
 
-"@react-native/community-cli-plugin@0.75.0-nightly-20240413-1b152f6ec":
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/@react-native/community-cli-plugin/-/community-cli-plugin-0.75.0-nightly-20240413-1b152f6ec.tgz#faae27a257952459e3dd7170d7ba59430e729070"
-  integrity sha512-RsgWTMNdTYNYR9nMvWvto4MxlLrFvwRv7/fy+e5pT7nLBSlHSqZ3Nh1hVoCSc5dbsQLkrxTyQmSvG8x8vl9AFw==
+"@react-native/community-cli-plugin@0.75.0-nightly-20240420-03a51da72":
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/@react-native/community-cli-plugin/-/community-cli-plugin-0.75.0-nightly-20240420-03a51da72.tgz#2ee69c3e5bae97c27a1e0b4b6b301776982e3509"
+  integrity sha512-UBbw3cJmmrc94hsX6a7abDq6qBqaQe9xP5n5FplaJEUIefUyf+FD5mK+5PNmwZKDSWFTMWBj4++tgn9/L/S4Iw==
   dependencies:
     "@react-native-community/cli-server-api" "14.0.0-alpha.2"
     "@react-native-community/cli-tools" "14.0.0-alpha.2"
-    "@react-native/dev-middleware" "0.75.0-nightly-20240413-1b152f6ec"
-    "@react-native/metro-babel-transformer" "0.75.0-nightly-20240413-1b152f6ec"
+    "@react-native/dev-middleware" "0.75.0-nightly-20240420-03a51da72"
+    "@react-native/metro-babel-transformer" "0.75.0-nightly-20240420-03a51da72"
     chalk "^4.0.0"
     execa "^5.1.1"
     metro "^0.80.3"
@@ -2584,18 +2584,18 @@
     querystring "^0.2.1"
     readline "^1.3.0"
 
-"@react-native/debugger-frontend@0.75.0-nightly-20240413-1b152f6ec":
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/@react-native/debugger-frontend/-/debugger-frontend-0.75.0-nightly-20240413-1b152f6ec.tgz#f226a73ea89405de99bbe8cb1daa5da0f857ab0a"
-  integrity sha512-Fdg+q2JA9qQhFpaq114NBoGPc+5rSuZMQeyGM8uxf/wXGs/+EI+3e9nU2QtN59M36yxjDrA6iISdXqUsXPA6hw==
+"@react-native/debugger-frontend@0.75.0-nightly-20240420-03a51da72":
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/@react-native/debugger-frontend/-/debugger-frontend-0.75.0-nightly-20240420-03a51da72.tgz#cede088794c95d2ccaf382fc208eacb737dbab62"
+  integrity sha512-DeKCbgPYlihIE9AryGGOsYlTaFOuEn7U2tygtm4wJfooIiTFN9PI8dEA8n3kEo/0QPKlLTb0iD9SebHPE8JHzA==
 
-"@react-native/dev-middleware@0.75.0-nightly-20240413-1b152f6ec":
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/@react-native/dev-middleware/-/dev-middleware-0.75.0-nightly-20240413-1b152f6ec.tgz#0dbb0df5d81c87b75798249a80d985781fb38b4f"
-  integrity sha512-0fGUrmmbxHe+Uuxp0K/r1GX0acQtbthshedhW0ln0ooZwbymhpukTXROe/cy/JlliUXMEPR561up/TgVcxUoww==
+"@react-native/dev-middleware@0.75.0-nightly-20240420-03a51da72":
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/@react-native/dev-middleware/-/dev-middleware-0.75.0-nightly-20240420-03a51da72.tgz#6c4c88dd884ab0ec5afca9412112eccc218acc49"
+  integrity sha512-yvvsMQaRsAS1g1BR9sXAgG1YfPWDfG1Mc3+WVZwHvROzCYXJNKFd4WKrJMWn40Ndsx0bI3+a5ChjTXZizqKH2A==
   dependencies:
     "@isaacs/ttlcache" "^1.4.1"
-    "@react-native/debugger-frontend" "0.75.0-nightly-20240413-1b152f6ec"
+    "@react-native/debugger-frontend" "0.75.0-nightly-20240420-03a51da72"
     chrome-launcher "^0.15.2"
     chromium-edge-launcher "^0.2.0"
     connect "^3.6.5"
@@ -2608,14 +2608,14 @@
     temp-dir "^2.0.0"
     ws "^6.2.2"
 
-"@react-native/eslint-config@0.75.0-nightly-20240413-1b152f6ec":
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/@react-native/eslint-config/-/eslint-config-0.75.0-nightly-20240413-1b152f6ec.tgz#3337f1ad091ea34acb140e4765b07f435d9fa021"
-  integrity sha512-ru0kDHyZr+5XgducnEr4AyDusL8i4TlozT3XeDBiTonp6ru5QyGYZmFPGc1kb5N9PjU++vHtFI/PMXMFl4kIXg==
+"@react-native/eslint-config@0.75.0-nightly-20240420-03a51da72":
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/@react-native/eslint-config/-/eslint-config-0.75.0-nightly-20240420-03a51da72.tgz#673b7220b784f0a3e3b2933b610e46d21b79cd80"
+  integrity sha512-U6uWZbisWpS2jFtLegcp4kRup6bOR/6JEk3eD623CVQGTI1cz0+FuHr+Fb9OHu3qM/ylWPktucEHRINglmNlRQ==
   dependencies:
     "@babel/core" "^7.20.0"
     "@babel/eslint-parser" "^7.20.0"
-    "@react-native/eslint-plugin" "0.75.0-nightly-20240413-1b152f6ec"
+    "@react-native/eslint-plugin" "0.75.0-nightly-20240420-03a51da72"
     "@typescript-eslint/eslint-plugin" "^7.1.1"
     "@typescript-eslint/parser" "^7.1.1"
     eslint-config-prettier "^8.5.0"
@@ -2626,45 +2626,45 @@
     eslint-plugin-react-hooks "^4.6.0"
     eslint-plugin-react-native "^4.0.0"
 
-"@react-native/eslint-plugin@0.75.0-nightly-20240413-1b152f6ec":
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/@react-native/eslint-plugin/-/eslint-plugin-0.75.0-nightly-20240413-1b152f6ec.tgz#3450b2b0091b385f830349bc68c56908fce3b07f"
-  integrity sha512-NJX5uFQqtmxDjpcdEVHhPyi/Z/yjRH43xHBqs8Um6jNe6fVnhxv0XLDaugUk4EEGdzJhKwPUPhlzjiJbGdJO9g==
+"@react-native/eslint-plugin@0.75.0-nightly-20240420-03a51da72":
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/@react-native/eslint-plugin/-/eslint-plugin-0.75.0-nightly-20240420-03a51da72.tgz#dec25e700c47e96066ff186f097fe8599244b3c3"
+  integrity sha512-LxqQnVLumTDc3Vm1sDZSIJmiiA8Pu+Plt0ZPBaoRIkftRJKgvHxE9jUerHBWCeqD71lUMIFqEALA6m8o+O5NZQ==
 
-"@react-native/gradle-plugin@0.75.0-nightly-20240413-1b152f6ec":
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/@react-native/gradle-plugin/-/gradle-plugin-0.75.0-nightly-20240413-1b152f6ec.tgz#c9067d1d9462a2e6a596ed034f539ddb2ab7713e"
-  integrity sha512-x4GzGBg8Mfmv+L8rKG8lcAh25A1TnGLwTSnooGWi6m5/x1pPi96q/1S3x1E3oe4+uMJqlsU5siMLhSqS8Ad5YA==
+"@react-native/gradle-plugin@0.75.0-nightly-20240420-03a51da72":
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/@react-native/gradle-plugin/-/gradle-plugin-0.75.0-nightly-20240420-03a51da72.tgz#755a920860fdf0729cefff66759a5b5d2cc7364e"
+  integrity sha512-l3sfaXIHhXj01yvWD7AC5IyfsNfX/cFTJTWSFTbj1hVrDYu8ZCAFNFCW84kxYMGODq4+uh5S5TJ2qA6/AAPONQ==
 
-"@react-native/js-polyfills@0.75.0-nightly-20240413-1b152f6ec":
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/@react-native/js-polyfills/-/js-polyfills-0.75.0-nightly-20240413-1b152f6ec.tgz#17a9a3842060e754f90660d101d6d216bcd95e82"
-  integrity sha512-+/RRdJgEw7SFOBRwp0FJwRxnmdfvMbV5LHQxVgtDvgFnB+Da1byxcNg1HPd9vYjt268B8zoMe1vwmn7xdtk7mg==
+"@react-native/js-polyfills@0.75.0-nightly-20240420-03a51da72":
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/@react-native/js-polyfills/-/js-polyfills-0.75.0-nightly-20240420-03a51da72.tgz#5731b97f212042204ae5515ab23c2efca868add9"
+  integrity sha512-b+9xL5qUIGHcNNi3kQiAbg15hAvvv3oReczJwaBqzoqZnPvf6ea0vOb3+wgrHNbAoUpGfMova2vfXdTGkt3IaQ==
 
-"@react-native/metro-babel-transformer@0.75.0-nightly-20240413-1b152f6ec":
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.75.0-nightly-20240413-1b152f6ec.tgz#5210f475e983af30a568f298af582a38befb092d"
-  integrity sha512-d9rD4pv5L1V1IzNka1WzrB7ymLJ9yRE/w6/LPXZkJM74gd/GO9IxIrwLAWIpa9hY97/FKgxktIEcwtuWYcGkZg==
+"@react-native/metro-babel-transformer@0.75.0-nightly-20240420-03a51da72":
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.75.0-nightly-20240420-03a51da72.tgz#735fbac108725eb3c8b865959338ea29a6177e7e"
+  integrity sha512-qqt+QqUthQ2CjcWriOKBuvtZO/R4SBEynhQXZ3f3aH5KWfIKGZyi+aJn7NY507NP428YG/vrBeuC/CNzbBPA1w==
   dependencies:
     "@babel/core" "^7.20.0"
-    "@react-native/babel-preset" "0.75.0-nightly-20240413-1b152f6ec"
+    "@react-native/babel-preset" "0.75.0-nightly-20240420-03a51da72"
     hermes-parser "0.20.1"
     nullthrows "^1.1.1"
 
-"@react-native/metro-config@0.75.0-nightly-20240413-1b152f6ec":
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/@react-native/metro-config/-/metro-config-0.75.0-nightly-20240413-1b152f6ec.tgz#51f8750c35df0f7c8c56c9b9bf81d35189d36b5c"
-  integrity sha512-xFMGtmd4RoKgozQQA5BumfhljywbW4ZyH2JDC35WCeAj69FwvuqPk0JB9cI2eTtrvylmQlD6kQiQZEqFBIAuDQ==
+"@react-native/metro-config@0.75.0-nightly-20240420-03a51da72":
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/@react-native/metro-config/-/metro-config-0.75.0-nightly-20240420-03a51da72.tgz#c9a34219611a912b5b65e588ee6424a232b936e1"
+  integrity sha512-jk+FvKbjnG9nq4xxkaCoSl2cXQop5zSGIhbyC/o/YjAmarWzzj55S2X8fdAdoOZKPMw5ig3Lf1Hb/D9tLZbkEw==
   dependencies:
-    "@react-native/js-polyfills" "0.75.0-nightly-20240413-1b152f6ec"
-    "@react-native/metro-babel-transformer" "0.75.0-nightly-20240413-1b152f6ec"
+    "@react-native/js-polyfills" "0.75.0-nightly-20240420-03a51da72"
+    "@react-native/metro-babel-transformer" "0.75.0-nightly-20240420-03a51da72"
     metro-config "^0.80.3"
     metro-runtime "^0.80.3"
 
-"@react-native/normalize-colors@0.75.0-nightly-20240413-1b152f6ec":
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.75.0-nightly-20240413-1b152f6ec.tgz#e6afd2bed3b97a6ee4a840d10d183afee08c7caa"
-  integrity sha512-zZl6louzlA88XpO8oa/1wtHXzq7egk9q/ayoX+uKNa5b7oTA5nAel4g2fmDLAWAtVkGElTB2WSlEs6ORfWUWNQ==
+"@react-native/normalize-colors@0.75.0-nightly-20240420-03a51da72":
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.75.0-nightly-20240420-03a51da72.tgz#ac2ebe883d59c7768c66ec53f67e5e8a362c2dbb"
+  integrity sha512-OZ48SXu6/gkDkzWSboaNZF8ZA+KfhkYQdJPQl94D8gXYlvxHfZFREaVYUQiCUtn2PsR8lBCkk5koSHxl1fe2hA==
 
 "@react-native/popup-menu-android@0.75.0-main":
   version "0.75.0-main"
@@ -2673,10 +2673,10 @@
   dependencies:
     nullthrows "^1.1.1"
 
-"@react-native/virtualized-lists@0.75.0-nightly-20240413-1b152f6ec":
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/@react-native/virtualized-lists/-/virtualized-lists-0.75.0-nightly-20240413-1b152f6ec.tgz#333f565bb8979901e5dfe37cbe1d323546dbcba9"
-  integrity sha512-YaPq/9qmrQntKE9UZRy8Z1SiqUyK/qFbvnELiDs1PobjbhMo0XpMqAfLgIPy4FmdCOe3OpUDbz852thEA2ukbA==
+"@react-native/virtualized-lists@0.75.0-nightly-20240420-03a51da72":
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/@react-native/virtualized-lists/-/virtualized-lists-0.75.0-nightly-20240420-03a51da72.tgz#7c08e74271fe927f7cf0e774d2cc05b8a614fe4a"
+  integrity sha512-PvWIIKX4j6Eded+C+ehpLJu9IB4Jo5w/OII1sIfchF4cW0qc/+IAoUTpHjxen0OUFpFd0cBLWxGHfc5tPOyTOQ==
   dependencies:
     invariant "^2.2.4"
     nullthrows "^1.1.1"
@@ -6792,10 +6792,10 @@ flow-bin@^0.217.2:
   resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.217.2.tgz#96affa17f3cb303019f740bffeb28cfab7ce1250"
   integrity sha512-fk4NcfybYjzlww1sEsfk71nqXvonAYpMRFEjmZxibDWWBiaw8DGmqXWZ7XzSunVB15VkJfOstn/sYP1EYPPyWg==
 
-flow-bin@^0.233.0:
-  version "0.233.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.233.0.tgz#e31951c81d3ec590e1cbfd96e540f6dd2459554c"
-  integrity sha512-BInTgW8v6xdWzVcItgKKUYCacheMw78Xrrn0Ziii5lN+vf/RKmvVX9mFHuOSN1zawZuq7GpqmT6oIS/oQuOAQg==
+flow-bin@^0.234.0:
+  version "0.234.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.234.0.tgz#17dfc5aac1d928b6d7194f93bd0bf742d735c77d"
+  integrity sha512-uLmvfFRW6yEcz2wSJ2H6192RwknBpzAHBezDcXzmxJASxB6QzjKadhPxZvsJ74uJ+9Th1hDNuRB4mGrVUeneyA==
 
 flow-enums-runtime@^0.0.5:
   version "0.0.5"
@@ -10805,10 +10805,10 @@ react-clone-referenced-element@^1.0.1:
   resolved "https://registry.yarnpkg.com/react-clone-referenced-element/-/react-clone-referenced-element-1.1.1.tgz#8d76727dc0459788e461741e804a512d20757381"
   integrity sha512-LZBPvQV8W0B5dFzXFu+D3Tpil8YHS8tO00iFsfXcTLdtpuH7XyvaHqHcoz4hd4uNPQCZ30fceh+s7mLznzMXvg==
 
-react-devtools-core@^5.0.2:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-5.2.0.tgz#072ecd2d84d3653817cc11e4b16f60a3c2b705f9"
-  integrity sha512-vZK+/gvxxsieAoAyYaiRIVFxlajb7KXhgBDV7OsoMzaAE+IqGpoxusBjIgq5ibqA2IloKu0p9n7tE68z1xs18A==
+react-devtools-core@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-5.1.0.tgz#3396494ac94b21602cac4fd657d600e0b52f4a0b"
+  integrity sha512-NRtLBqYVLrIY+lOa2oTpFiAhI7Hru0AUXI0tP9neCyaPPAzlZyeH0i+VZ0shIyRTJbpvyqbD/uCsewA2hpfZHw==
   dependencies:
     shell-quote "^1.6.1"
     ws "^7"
@@ -10835,22 +10835,22 @@ react-native-xaml@^0.0.78:
   dependencies:
     "@types/react" "*"
 
-react-native@0.75.0-nightly-20240413-1b152f6ec:
-  version "0.75.0-nightly-20240413-1b152f6ec"
-  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.75.0-nightly-20240413-1b152f6ec.tgz#43ccfa63ba92e2567568342c26faa97ff69be963"
-  integrity sha512-tO08Q81W8Hg9xcyVLqeBaGVsrAdWWlYMdRY32tYXTMhmP6Cx8ekSGVuxzyyQxIYLvQMRgYyZEInf+WHz9LUBAA==
+react-native@0.75.0-nightly-20240420-03a51da72:
+  version "0.75.0-nightly-20240420-03a51da72"
+  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.75.0-nightly-20240420-03a51da72.tgz#3299823ac316bc88200a882366f29df7a032a2c2"
+  integrity sha512-NXwJn9zOqFZLqtIUdtzK80ELSvj6NxXgGgMCH7CTFU5OQIDDbhQmBSx3VDPxh6HJ8QTt+cmuGSYYBOT6BpdYgw==
   dependencies:
     "@jest/create-cache-key-function" "^29.6.3"
     "@react-native-community/cli" "14.0.0-alpha.2"
     "@react-native-community/cli-platform-android" "14.0.0-alpha.2"
     "@react-native-community/cli-platform-ios" "14.0.0-alpha.2"
-    "@react-native/assets-registry" "0.75.0-nightly-20240413-1b152f6ec"
-    "@react-native/codegen" "0.75.0-nightly-20240413-1b152f6ec"
-    "@react-native/community-cli-plugin" "0.75.0-nightly-20240413-1b152f6ec"
-    "@react-native/gradle-plugin" "0.75.0-nightly-20240413-1b152f6ec"
-    "@react-native/js-polyfills" "0.75.0-nightly-20240413-1b152f6ec"
-    "@react-native/normalize-colors" "0.75.0-nightly-20240413-1b152f6ec"
-    "@react-native/virtualized-lists" "0.75.0-nightly-20240413-1b152f6ec"
+    "@react-native/assets-registry" "0.75.0-nightly-20240420-03a51da72"
+    "@react-native/codegen" "0.75.0-nightly-20240420-03a51da72"
+    "@react-native/community-cli-plugin" "0.75.0-nightly-20240420-03a51da72"
+    "@react-native/gradle-plugin" "0.75.0-nightly-20240420-03a51da72"
+    "@react-native/js-polyfills" "0.75.0-nightly-20240420-03a51da72"
+    "@react-native/normalize-colors" "0.75.0-nightly-20240420-03a51da72"
+    "@react-native/virtualized-lists" "0.75.0-nightly-20240420-03a51da72"
     abort-controller "^3.0.0"
     anser "^1.4.9"
     ansi-regex "^5.0.0"
@@ -10868,7 +10868,7 @@ react-native@0.75.0-nightly-20240413-1b152f6ec:
     nullthrows "^1.1.1"
     pretty-format "^26.5.2"
     promise "^8.3.0"
-    react-devtools-core "^5.0.2"
+    react-devtools-core "5.1.0"
     react-refresh "^0.14.0"
     react-shallow-renderer "^16.15.0"
     regenerator-runtime "^0.13.2"