Release 0.76.4

#publish-packages-to-npm&latest

.github/actions/build-hermes-macos/action.yml

@@ -22,7 +22,7 @@ runs:
     - name: Restore Cached Artifacts
       uses: actions/cache/restore@v4
       with:
-        key: v4-hermes-artifacts-${{ inputs.flavor }}-${{ inputs.hermes-version }}-${{ inputs.react-native-version }}
+        key: v4-hermes-artifacts-${{ inputs.flavor }}-${{ inputs.hermes-version }}-${{ inputs.react-native-version }}-${{ hashFiles('./packages/react-native/sdks/hermes/utils/build-apple-frameworks.sh') }}
         path: |
           /tmp/hermes/osx-bin/${{ inputs.flavor }}
           /tmp/hermes/dSYM/${{ inputs.flavor }}
@@ -200,7 +200,7 @@ runs:
       uses: actions/cache/save@v4
       if: ${{ github.ref == 'refs/heads/main' || contains(github.ref, '-stable') }} # To avoid that the cache explode.
       with:
-        key: v4-hermes-artifacts-${{ inputs.flavor }}-${{ inputs.hermes-version }}-${{ inputs.react-native-version }}
+        key: v4-hermes-artifacts-${{ inputs.flavor }}-${{ inputs.hermes-version }}-${{ inputs.react-native-version }}-${{ hashFiles('./packages/react-native/sdks/hermes/utils/build-apple-frameworks.sh') }}
         path: |
           /tmp/hermes/osx-bin/${{ inputs.flavor }}
           /tmp/hermes/dSYM/${{ inputs.flavor }}

.github/actions/build-hermesc-windows/action.yml

@@ -43,9 +43,6 @@ runs:
       shell: powershell
       run: |
         if (-not(Test-Path -Path $Env:HERMES_WS_DIR\win64-bin\hermesc.exe)) {
-          choco install --no-progress cmake --version 3.14.7
-          if (-not $?) { throw "Failed to install CMake" }
-
           cd $Env:HERMES_WS_DIR\icu
           # If Invoke-WebRequest shows a progress bar, it will fail with
           #   Win32 internal error "Access is denied" 0x5 occurred [...]

.github/workflow-scripts/__tests__/publishTemplate-test.js

@@ -0,0 +1,169 @@
+/**
+ * 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
+ */
+
+const {
+  publishTemplate,
+  verifyPublishedTemplate,
+} = require('../publishTemplate');
+
+const mockRun = jest.fn();
+const mockSleep = jest.fn();
+const mockGetNpmPackageInfo = jest.fn();
+const silence = () => {};
+
+jest.mock('../utils.js', () => ({
+  log: silence,
+  run: mockRun,
+  sleep: mockSleep,
+  getNpmPackageInfo: mockGetNpmPackageInfo,
+}));
+
+const getMockGithub = () => ({
+  rest: {
+    actions: {
+      createWorkflowDispatch: jest.fn(),
+    },
+  },
+});
+
+describe('#publishTemplate', () => {
+  beforeEach(jest.clearAllMocks);
+
+  it('checks commits for magic #publish-package-to-npm&latest string and sets latest', async () => {
+    mockRun.mockReturnValueOnce(`
+      The commit message
+
+    #publish-packages-to-npm&latest`);
+
+    const github = getMockGithub();
+    await publishTemplate(github, '0.76.0', true);
+    expect(github.rest.actions.createWorkflowDispatch).toHaveBeenCalledWith({
+      owner: 'react-native-community',
+      repo: 'template',
+      workflow_id: 'release.yaml',
+      ref: '0.76-stable',
+      inputs: {
+        dry_run: true,
+        is_latest_on_npm: true,
+        version: '0.76.0',
+      },
+    });
+  });
+
+  it('pubished as is_latest_on_npm = false if missing magic string', async () => {
+    mockRun.mockReturnValueOnce(`
+      The commit message without magic
+    `);
+
+    const github = getMockGithub();
+    await publishTemplate(github, '0.76.0', false);
+    expect(github.rest.actions.createWorkflowDispatch).toHaveBeenCalledWith({
+      owner: 'react-native-community',
+      repo: 'template',
+      workflow_id: 'release.yaml',
+      ref: '0.76-stable',
+      inputs: {
+        dry_run: false,
+        is_latest_on_npm: false,
+        version: '0.76.0',
+      },
+    });
+  });
+});
+
+describe('#verifyPublishedTemplate', () => {
+  beforeEach(jest.clearAllMocks);
+
+  it("fixes versions prefixed with 'v'", async () => {
+    const dirtyVersion = 'v0.76.0';
+    const cleanVersion = '0.76.0';
+    await verifyPublishedTemplate(dirtyVersion);
+
+    expect(mockGetNpmPackageInfo).toHaveBeenLastCalledWith(
+      '@react-native-community/template',
+      cleanVersion,
+    );
+  });
+
+  it("waits on npm updating for version and not 'latest'", async () => {
+    const NOT_LATEST = false;
+    mockGetNpmPackageInfo
+      // template@<version>
+      .mockReturnValueOnce(Promise.reject('mock http/404'))
+      .mockReturnValueOnce(Promise.resolve());
+    mockSleep.mockReturnValueOnce(Promise.resolve()).mockImplementation(() => {
+      throw new Error('Should not be called again!');
+    });
+
+    const version = '0.77.0';
+    await verifyPublishedTemplate(version, NOT_LATEST);
+
+    expect(mockGetNpmPackageInfo).toHaveBeenLastCalledWith(
+      '@react-native-community/template',
+      version,
+    );
+  });
+
+  it('waits on npm updating version and latest tag', async () => {
+    const IS_LATEST = true;
+    const version = '0.77.0';
+    mockGetNpmPackageInfo
+      // template@latest → unknown tag
+      .mockReturnValueOnce(Promise.reject('mock http/404'))
+      // template@latest != version → old tag
+      .mockReturnValueOnce(Promise.resolve({version: '0.76.5'}))
+      // template@latest == version → correct tag
+      .mockReturnValueOnce(Promise.resolve({version}));
+    mockSleep
+      .mockReturnValueOnce(Promise.resolve())
+      .mockReturnValueOnce(Promise.resolve())
+      .mockImplementation(() => {
+        throw new Error('Should not be called again!');
+      });
+
+    await verifyPublishedTemplate(version, IS_LATEST);
+
+    expect(mockGetNpmPackageInfo).toHaveBeenCalledWith(
+      '@react-native-community/template',
+      'latest',
+    );
+  });
+
+  describe('timeouts', () => {
+    let mockProcess;
+    beforeEach(() => {
+      mockProcess = jest.spyOn(process, 'exit').mockImplementation(code => {
+        throw new Error(`process.exit(${code}) called!`);
+      });
+    });
+    afterEach(() => mockProcess.mockRestore());
+    it('will timeout if npm does not update package version after a set number of retries', async () => {
+      const RETRIES = 2;
+      mockGetNpmPackageInfo.mockReturnValue(Promise.reject('mock http/404'));
+      mockSleep.mockReturnValue(Promise.resolve());
+      await expect(() =>
+        verifyPublishedTemplate('0.77.0', true, RETRIES),
+      ).rejects.toThrowError('process.exit(1) called!');
+      expect(mockGetNpmPackageInfo).toHaveBeenCalledTimes(RETRIES);
+    });
+
+    it('will timeout if npm does not update latest tag after a set number of retries', async () => {
+      const RETRIES = 7;
+      const IS_LATEST = true;
+      mockGetNpmPackageInfo.mockReturnValue(
+        Promise.resolve({version: '0.76.5'}),
+      );
+      mockSleep.mockReturnValue(Promise.resolve());
+      await expect(async () => {
+        await verifyPublishedTemplate('0.77.0', IS_LATEST, RETRIES);
+      }).rejects.toThrowError('process.exit(1) called!');
+      expect(mockGetNpmPackageInfo).toHaveBeenCalledTimes(RETRIES);
+    });
+  });
+});

.github/workflow-scripts/publishTemplate.js

@@ -0,0 +1,104 @@
+/**
+ * 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
+ */
+
+const {run, sleep, getNpmPackageInfo, log} = require('./utils.js');
+
+const TAG_AS_LATEST_REGEX = /#publish-packages-to-npm&latest/;
+
+/**
+ * Should this commit be `latest` on npm?
+ */
+function isLatest() {
+  const commitMessage = run('git log -n1 --pretty=%B');
+  return TAG_AS_LATEST_REGEX.test(commitMessage);
+}
+module.exports.isLatest = isLatest;
+
+/**
+ * Create a Github Action to publish the community template matching the released version
+ * of React Native.
+ */
+module.exports.publishTemplate = async (github, version, dryRun = true) => {
+  log(`📤 Get the ${TEMPLATE_NPM_PKG} repo to publish ${version}`);
+
+  const is_latest_on_npm = isLatest();
+
+  const majorMinor = /^v?(\d+\.\d+)/.exec(version);
+
+  if (!majorMinor) {
+    log(`🔥 can't capture MAJOR.MINOR from '${version}', giving up.`);
+    process.exit(1);
+  }
+
+  // MAJOR.MINOR-stable
+  const ref = `${majorMinor[1]}-stable`;
+
+  await github.rest.actions.createWorkflowDispatch({
+    owner: 'react-native-community',
+    repo: 'template',
+    workflow_id: 'release.yaml',
+    ref,
+    inputs: {
+      dry_run: dryRun,
+      is_latest_on_npm,
+      // 0.75.0-rc.0, note no 'v' prefix
+      version: version.replace(/^v/, ''),
+    },
+  });
+};
+
+const SLEEP_S = 10;
+const MAX_RETRIES = 3 * 6; // 3 minutes
+const TEMPLATE_NPM_PKG = '@react-native-community/template';
+
+/**
+ * Will verify that @latest and the @<version> have been published.
+ *
+ * NOTE: This will infinitely query each step until successful, make sure the
+ *       calling job has a timeout.
+ */
+module.exports.verifyPublishedTemplate = async (
+  version,
+  latest = false,
+  retries = MAX_RETRIES,
+) => {
+  version = version.replace(/^v/, '');
+  log(`🔍 Is ${TEMPLATE_NPM_PKG}@${version} on npm?`);
+
+  let count = retries;
+  while (count-- > 0) {
+    try {
+      const json = await getNpmPackageInfo(
+        TEMPLATE_NPM_PKG,
+        latest ? 'latest' : version,
+      );
+      log(`🎉 Found ${TEMPLATE_NPM_PKG}@${version} on npm`);
+      if (!latest) {
+        return;
+      }
+      if (json.version === version) {
+        log(`🎉 ${TEMPLATE_NPM_PKG}@latest → ${json.version} on npm`);
+        return;
+      }
+      log(
+        `🐌 ${TEMPLATE_NPM_PKG}@latest → ${json.version} on npm and not ${version} as expected, retrying...`,
+      );
+    } catch (e) {
+      log(`Nope, fetch failed: ${e.message}`);
+    }
+    await sleep(SLEEP_S);
+  }
+
+  let msg = `🚨 Timed out when trying to verify ${TEMPLATE_NPM_PKG}@${version} on npm`;
+  if (latest) {
+    msg += ' and latest tag points to this version.';
+  }
+  log(msg);
+  process.exit(1);
+};

.github/workflow-scripts/utils.js

@@ -0,0 +1,29 @@
+/**
+ * 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
+ */
+
+const {execSync} = require('child_process');
+
+function run(cmd) {
+  return execSync(cmd, 'utf8').toString().trim();
+}
+module.exports.run = run;
+
+async function sleep(seconds) {
+  return new Promise(resolve => setTimeout(resolve, seconds * 1000));
+}
+module.exports.sleep = sleep;
+
+async function getNpmPackageInfo(pkg, versionOrTag) {
+  return fetch(`https://registry.npmjs.org/${pkg}/${versionOrTag}`).then(resp =>
+    resp.json(),
+  );
+}
+module.exports.getNpmPackageInfo = getNpmPackageInfo;
+
+module.exports.log = (...args) => console.log(...args);

.github/workflows/publish-release.yml

@@ -191,46 +191,23 @@ jobs:
           gha-npm-token: ${{ env.GHA_NPM_TOKEN }}
       - name: Publish @react-native-community/template
         id: publish-template-to-npm
-        shell: bash
-        run: |
-          COMMIT_MSG=$(git log -n1 --pretty=%B);
-          if grep -q '#publish-packages-to-npm&latest' <<< "$COMMIT_MSG"; then
-            echo "TAG=latest" >> $GITHUB_OUTPUT
-            IS_LATEST=true
-          else
-            IS_LATEST=false
-          fi
-          # Go from v0.75.0-rc.4 -> 0.75-stable, which is the template's branching scheme
-          VERSION=$(grep -oE '\d+\.\d+' <<< "${{ github.ref_name }}" | { read version; echo "$version-stable"; })
-          echo "VERSION=$VERSION" >> $GITHUB_OUTPUT
-
-          curl -L https://api.github.com/repos/react-native-community/template/actions/workflows/release.yaml/dispatches
-            -H "Accept: application/vnd.github.v3+json" \
-            -H "Authorization: Bearer $REACT_NATIVE_BOT_GITHUB_TOKEN" \
-            -d "{\"ref\":\"$VERSION\",\"inputs\":{\"version\":\"${{ github.ref_name }}\",\"is_latest_on_npm\":\"$IS_LATEST\"}}"
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.REACT_NATIVE_BOT_GITHUB_TOKEN }}
+          script: |
+            const {publishTemplate} = require('./.github/workflow-scripts/publishTemplate.js')
+            const version = "${{ github.ref_name }}"
+            const isDryRun = false
+            await publishTemplate(github, version, isDryRun);
       - name: Wait for template to be published
         timeout-minutes: 3
-        env:
-          VERSION: ${{ steps.publish-template-to-npm.outputs.VERSION }}
-          TAG: ${{ steps.publish-template-to-npm.outputs.TAG }}
-        shell: bash
-        run: |
-          echo "Waiting until @react-native-community/template is published to npm"
-          while true; do
-            if curl -o /dev/null -s -f "https://registry.npmjs.org/@react-native-community/template/$VERSION"; then
-              echo "Confirm that @react-native-community/template@$VERSION is published on npm"
-              break
-            fi
-            sleep 10
-          done
-          while [ "$TAG" == "latest" ]; do
-            CURRENT=$(curl -s "https://registry.npmjs.org/react-native/latest" | jq -r '.version');
-            if [ "$CURRENT" == "$VERSION" ]; then
-              echo "Confirm that @react-native-community/template@latest == $VERSION on npm"
-              break
-            fi
-            sleep 10
-          done
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.REACT_NATIVE_BOT_GITHUB_TOKEN }}
+          script: |
+            const {verifyPublishedTemplate, isLatest} = require('./.github/workflow-scripts/publishTemplate.js')
+            const version = "${{ github.ref_name }}"
+            await verifyPublishedTemplate(version, isLatest());
       - name: Update rn-diff-purge to generate upgrade-support diff
         run: |
           curl -X POST https://api.github.com/repos/react-native-community/rn-diff-purge/dispatches \

Gemfile

@@ -5,3 +5,4 @@ ruby ">= 2.6.10"
 
 gem 'cocoapods', '~> 1.13', '!= 1.15.0', '!= 1.15.1'
 gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'
+gem 'xcodeproj', '< 1.26.0'

gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.10-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

package.json

@@ -32,8 +32,7 @@
     "test-typescript": "dtslint packages/react-native/types",
     "test": "jest",
     "trigger-react-native-release": "node ./scripts/releases-local/trigger-react-native-release.js",
-    "update-lock": "npx yarn-deduplicate",
-    "postinstall": "cd packages/react-native-codegen && yarn build"
+    "update-lock": "npx yarn-deduplicate"
   },
   "workspaces": [
     "packages/*",
@@ -50,8 +49,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.76.0-main",
-    "@react-native/metro-config": "0.76.0-main",
+    "@react-native/metro-babel-transformer": "0.76.4",
+    "@react-native/metro-config": "0.76.4",
     "@tsconfig/node18": "1.0.1",
     "@types/react": "^18.2.6",
     "@typescript-eslint/parser": "^7.1.1",
@@ -87,24 +86,21 @@
     "jest": "^29.6.3",
     "jest-junit": "^10.0.0",
     "jscodeshift": "^0.14.0",
-    "metro-babel-register": "^0.80.10",
-    "metro-memory-fs": "^0.80.10",
+    "metro-babel-register": "^0.81.0",
+    "metro-memory-fs": "^0.81.0",
     "micromatch": "^4.0.4",
     "mkdirp": "^0.5.1",
     "node-fetch": "^2.2.0",
     "nullthrows": "^1.1.1",
     "prettier": "2.8.8",
     "prettier-plugin-hermes-parser": "0.23.1",
-    "react": "19.0.0-rc-fb9a90fa48-20240614",
-    "react-test-renderer": "19.0.0-rc-fb9a90fa48-20240614",
+    "react": "18.3.1",
+    "react-test-renderer": "18.3.1",
     "rimraf": "^3.0.2",
     "shelljs": "^0.8.5",
     "signedsource": "^1.0.0",
     "supports-color": "^7.1.0",
     "typescript": "5.0.4",
     "ws": "^6.2.3"
-  },
-  "resolutions": {
-    "react-is": "19.0.0-rc-fb9a90fa48-20240614"
   }
 }

packages/assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/assets-registry",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "Asset support code for React Native.",
   "license": "MIT",
   "repository": {

packages/babel-plugin-codegen/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/babel-plugin-codegen",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "Babel plugin to generate native module and view manager code for React Native.",
   "license": "MIT",
   "repository": {
@@ -25,7 +25,7 @@
     "index.js"
   ],
   "dependencies": {
-    "@react-native/codegen": "0.76.0-main"
+    "@react-native/codegen": "0.76.4"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2"

packages/community-cli-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/community-cli-plugin",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "Core CLI commands for React Native",
   "keywords": [
     "react-native",
@@ -22,18 +22,20 @@
     "dist"
   ],
   "dependencies": {
-    "@react-native/dev-middleware": "0.76.0-main",
-    "@react-native/metro-babel-transformer": "0.76.0-main",
+    "@react-native/dev-middleware": "0.76.4",
+    "@react-native/metro-babel-transformer": "0.76.4",
     "chalk": "^4.0.0",
     "execa": "^5.1.1",
-    "metro": "^0.80.10",
-    "metro-config": "^0.80.10",
-    "metro-core": "^0.80.10",
+    "invariant": "^2.2.4",
+    "metro": "^0.81.0",
+    "metro-config": "^0.81.0",
+    "metro-core": "^0.81.0",
     "node-fetch": "^2.2.0",
-    "readline": "^1.3.0"
+    "readline": "^1.3.0",
+    "semver": "^7.1.3"
   },
   "devDependencies": {
-    "metro-resolver": "^0.80.10"
+    "metro-resolver": "^0.81.0"
   },
   "peerDependencies": {
     "@react-native-community/cli-server-api": "*"

packages/community-cli-plugin/src/commands/bundle/buildBundle.js

@@ -140,7 +140,7 @@ async function buildBundleWithConfig(
       args.assetCatalogDest,
     );
   } finally {
-    server.end();
+    await server.end();
   }
 }
 

packages/community-cli-plugin/src/commands/start/OpenDebuggerKeyboardHandler.js

@@ -0,0 +1,174 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import type TerminalReporter from 'metro/src/lib/TerminalReporter';
+
+import chalk from 'chalk';
+import fetch from 'node-fetch';
+
+type PageDescription = $ReadOnly<{
+  id: string,
+  title: string,
+  description: string,
+  deviceName: string,
+  ...
+}>;
+
+export default class OpenDebuggerKeyboardHandler {
+  #devServerUrl: string;
+  #reporter: TerminalReporter;
+  #targetsShownForSelection: ?$ReadOnlyArray<PageDescription> = null;
+
+  constructor({
+    devServerUrl,
+    reporter,
+  }: {
+    devServerUrl: string,
+    reporter: TerminalReporter,
+  }) {
+    this.#devServerUrl = devServerUrl;
+    this.#reporter = reporter;
+  }
+
+  async #tryOpenDebuggerForTarget(target: PageDescription): Promise<void> {
+    this.#targetsShownForSelection = null;
+    this.#clearTerminalMenu();
+
+    try {
+      await fetch(
+        new URL(
+          '/open-debugger?target=' + encodeURIComponent(target.id),
+          this.#devServerUrl,
+        ).href,
+        {method: 'POST'},
+      );
+    } catch (e) {
+      this.#log(
+        'error',
+        'Failed to open debugger for %s on %s debug targets: %s',
+        target.description,
+        target.deviceName,
+        e.message,
+      );
+      this.#clearTerminalMenu();
+    }
+  }
+
+  /**
+   * Used in response to 'j' to debug - fetch the available debug targets and:
+   *  - If no targets, warn
+   *  - If one target, open it
+   *  - If more, show a list. The keyboard listener should run subsequent key
+   *    presses through maybeHandleTargetSelection, which will launch the
+   *    debugger if a match is made.
+   */
+  async handleOpenDebugger(): Promise<void> {
+    this.#setTerminalMenu('Fetching available debugging targets...');
+    this.#targetsShownForSelection = null;
+
+    try {
+      const res = await fetch(this.#devServerUrl + '/json/list', {
+        method: 'POST',
+      });
+
+      if (res.status !== 200) {
+        throw new Error(`Unexpected status code: ${res.status}`);
+      }
+      const targets = (await res.json()) as $ReadOnlyArray<PageDescription>;
+      if (!Array.isArray(targets)) {
+        throw new Error('Expected array.');
+      }
+
+      if (targets.length === 0) {
+        this.#log('warn', 'No connected targets');
+        this.#clearTerminalMenu();
+      } else if (targets.length === 1) {
+        const target = targets[0];
+        // eslint-disable-next-line no-void
+        void this.#tryOpenDebuggerForTarget(target);
+      } else {
+        this.#targetsShownForSelection = targets;
+
+        if (targets.length > 9) {
+          this.#log(
+            'warn',
+            '10 or more debug targets available, showing the first 9.',
+          );
+        }
+
+        this.#setTerminalMenu(
+          `Multiple debug targets available, please select:\n  ${targets
+            .slice(0, 9)
+            .map(
+              ({description, deviceName}, i) =>
+                ` ${chalk.white.inverse(` ${i + 1} `)} - "${description}" on "${deviceName}"`,
+            )
+            .join('\n  ')}`,
+        );
+      }
+    } catch (e) {
+      this.#log('error', `Failed to fetch debug targets: ${e.message}`);
+      this.#clearTerminalMenu();
+    }
+  }
+
+  /**
+   * Handle key presses that correspond to a valid selection from a visible
+   * selection list.
+   *
+   * @return true if we've handled the key as a target selection, false if the
+   *   caller should handle the key.
+   */
+  maybeHandleTargetSelection(keyName: string): boolean {
+    if (keyName >= '1' && keyName <= '9') {
+      const targetIndex = Number(keyName) - 1;
+      if (
+        this.#targetsShownForSelection != null &&
+        targetIndex < this.#targetsShownForSelection.length
+      ) {
+        const target = this.#targetsShownForSelection[targetIndex];
+        // eslint-disable-next-line no-void
+        void this.#tryOpenDebuggerForTarget(target);
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Dismiss any target selection UI, if shown.
+   */
+  dismiss() {
+    this.#clearTerminalMenu();
+    this.#targetsShownForSelection = null;
+  }
+
+  #log(level: 'info' | 'warn' | 'error', ...data: Array<mixed>): void {
+    this.#reporter.update({
+      type: 'unstable_server_log',
+      level,
+      data,
+    });
+  }
+
+  #setTerminalMenu(message: string) {
+    this.#reporter.update({
+      type: 'unstable_server_menu_updated',
+      message,
+    });
+  }
+
+  #clearTerminalMenu() {
+    this.#reporter.update({
+      type: 'unstable_server_menu_cleared',
+    });
+  }
+}

packages/community-cli-plugin/src/commands/start/attachKeyHandlers.js

@@ -10,20 +10,44 @@
  */
 
 import type {Config} from '@react-native-community/cli-types';
+import type TerminalReporter from 'metro/src/lib/TerminalReporter';
 
-import {KeyPressHandler} from '../../utils/KeyPressHandler';
 import {logger} from '../../utils/logger';
+import OpenDebuggerKeyboardHandler from './OpenDebuggerKeyboardHandler';
 import chalk from 'chalk';
 import execa from 'execa';
-import fetch from 'node-fetch';
+import invariant from 'invariant';
+import readline from 'readline';
+import {ReadStream} from 'tty';
 
 const CTRL_C = '\u0003';
 const CTRL_D = '\u0004';
+const RELOAD_TIMEOUT = 500;
+
+const throttle = (callback: () => void, timeout: number) => {
+  let previousCallTimestamp = 0;
+  return () => {
+    const currentCallTimestamp = new Date().getTime();
+    if (currentCallTimestamp - previousCallTimestamp > timeout) {
+      previousCallTimestamp = currentCallTimestamp;
+      callback();
+    }
+  };
+};
+
+type KeyEvent = {
+  sequence: string,
+  name: string,
+  ctrl: boolean,
+  meta: boolean,
+  shift: boolean,
+};
 
 export default function attachKeyHandlers({
   cliConfig,
   devServerUrl,
   messageSocket,
+  reporter,
 }: {
   cliConfig: Config,
   devServerUrl: string,
@@ -31,21 +55,40 @@ export default function attachKeyHandlers({
     broadcast: (type: string, params?: Record<string, mixed> | null) => void,
     ...
   }>,
+  reporter: TerminalReporter,
 }) {
   if (process.stdin.isTTY !== true) {
     logger.debug('Interactive mode is not supported in this environment');
     return;
   }
 
+  readline.emitKeypressEvents(process.stdin);
+  setRawMode(true);
+
   const execaOptions = {
     env: {FORCE_COLOR: chalk.supportsColor ? 'true' : 'false'},
   };
 
-  const onPress = async (key: string) => {
-    switch (key.toLowerCase()) {
+  const reload = throttle(() => {
+    logger.info('Reloading connected app(s)...');
+    messageSocket.broadcast('reload', null);
+  }, RELOAD_TIMEOUT);
+
+  const openDebuggerKeyboardHandler = new OpenDebuggerKeyboardHandler({
+    reporter,
+    devServerUrl,
+  });
+
+  process.stdin.on('keypress', (str: string, key: KeyEvent) => {
+    logger.debug(`Key pressed: ${key.sequence}`);
+
+    if (openDebuggerKeyboardHandler.maybeHandleTargetSelection(key.name)) {
+      return;
+    }
+
+    switch (key.sequence) {
       case 'r':
-        logger.info('Reloading connected app(s)...');
-        messageSocket.broadcast('reload', null);
+        reload();
         break;
       case 'd':
         logger.info('Opening Dev Menu...');
@@ -76,21 +119,19 @@ export default function attachKeyHandlers({
         ).stdout?.pipe(process.stdout);
         break;
       case 'j':
-        // TODO(T192878199): Add multi-target selection
-        await fetch(devServerUrl + '/open-debugger', {method: 'POST'});
+        // eslint-disable-next-line no-void
+        void openDebuggerKeyboardHandler.handleOpenDebugger();
         break;
       case CTRL_C:
       case CTRL_D:
+        openDebuggerKeyboardHandler.dismiss();
         logger.info('Stopping server');
-        keyPressHandler.stopInterceptingKeyStrokes();
+        setRawMode(false);
+        process.stdin.pause();
         process.emit('SIGINT');
         process.exit();
     }
-  };
-
-  const keyPressHandler = new KeyPressHandler(onPress);
-  keyPressHandler.createInteractionListener();
-  keyPressHandler.startInterceptingKeyStrokes();
+  });
 
   logger.log(
     [
@@ -104,3 +145,11 @@ export default function attachKeyHandlers({
     ].join('\n'),
   );
 }
+
+function setRawMode(enable: boolean) {
+  invariant(
+    process.stdin instanceof ReadStream,
+    'process.stdin must be a readable stream to modify raw mode',
+  );
+  process.stdin.setRawMode(enable);
+}

packages/community-cli-plugin/src/commands/start/runServer.js

@@ -14,6 +14,7 @@ import type {Reporter} from 'metro/src/lib/reporting';
 import type {TerminalReportableEvent} from 'metro/src/lib/TerminalReporter';
 import typeof TerminalReporter from 'metro/src/lib/TerminalReporter';
 
+import createDevMiddlewareLogger from '../../utils/createDevMiddlewareLogger';
 import isDevServerRunning from '../../utils/isDevServerRunning';
 import loadMetroConfig from '../../utils/loadMetroConfig';
 import {logger} from '../../utils/logger';
@@ -98,6 +99,11 @@ async function runServer(
     );
   }
 
+  let reportEvent: (event: TerminalReportableEvent) => void;
+  const terminal = new Terminal(process.stdout);
+  const ReporterImpl = getReporterImpl(args.customLogReporterPath);
+  const terminalReporter = new ReporterImpl(terminal);
+
   const {
     middleware: communityMiddleware,
     websocketEndpoints: communityWebsocketEndpoints,
@@ -111,13 +117,9 @@ async function runServer(
   const {middleware, websocketEndpoints} = createDevMiddleware({
     projectRoot,
     serverBaseUrl: devServerUrl,
-    logger,
+    logger: createDevMiddlewareLogger(terminalReporter),
   });
 
-  let reportEvent: (event: TerminalReportableEvent) => void;
-  const terminal = new Terminal(process.stdout);
-  const ReporterImpl = getReporterImpl(args.customLogReporterPath);
-  const terminalReporter = new ReporterImpl(terminal);
   const reporter: Reporter = {
     update(event: TerminalReportableEvent) {
       terminalReporter.update(event);
@@ -130,6 +132,7 @@ async function runServer(
           cliConfig: ctx,
           devServerUrl,
           messageSocket: messageSocketEndpoint,
+          reporter: terminalReporter,
         });
       }
     },

packages/community-cli-plugin/src/utils/KeyPressHandler.js

@@ -1,90 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow strict-local
- * @format
- * @oncall react_native
- */
-
-import {CLIError} from './errors';
-import {logger} from './logger';
-
-const CTRL_C = '\u0003';
-
-/** An abstract key stroke interceptor. */
-export class KeyPressHandler {
-  _isInterceptingKeyStrokes = false;
-  _isHandlingKeyPress = false;
-  _onPress: (key: string) => Promise<void>;
-
-  constructor(onPress: (key: string) => Promise<void>) {
-    this._onPress = onPress;
-  }
-
-  /** Start observing interaction pause listeners. */
-  createInteractionListener(): ({pause: boolean, ...}) => void {
-    // Support observing prompts.
-    let wasIntercepting = false;
-
-    const listener = ({pause}: {pause: boolean, ...}) => {
-      if (pause) {
-        // Track if we were already intercepting key strokes before pausing, so we can
-        // resume after pausing.
-        wasIntercepting = this._isInterceptingKeyStrokes;
-        this.stopInterceptingKeyStrokes();
-      } else if (wasIntercepting) {
-        // Only start if we were previously intercepting.
-        this.startInterceptingKeyStrokes();
-      }
-    };
-
-    return listener;
-  }
-
-  _handleKeypress = async (key: string): Promise<CLIError | void> => {
-    // Prevent sending another event until the previous event has finished.
-    if (this._isHandlingKeyPress && key !== CTRL_C) {
-      return;
-    }
-    this._isHandlingKeyPress = true;
-    try {
-      logger.debug(`Key pressed: ${key}`);
-      await this._onPress(key);
-    } catch (error) {
-      return new CLIError('There was an error with the key press handler.');
-    } finally {
-      this._isHandlingKeyPress = false;
-      return;
-    }
-  };
-
-  /** Start intercepting all key strokes and passing them to the input `onPress` method. */
-  startInterceptingKeyStrokes() {
-    if (this._isInterceptingKeyStrokes) {
-      return;
-    }
-    this._isInterceptingKeyStrokes = true;
-    const {stdin} = process;
-    // $FlowFixMe[prop-missing]
-    stdin.setRawMode(true);
-    stdin.resume();
-    stdin.setEncoding('utf8');
-    stdin.on('data', this._handleKeypress);
-  }
-
-  /** Stop intercepting all key strokes. */
-  stopInterceptingKeyStrokes() {
-    if (!this._isInterceptingKeyStrokes) {
-      return;
-    }
-    this._isInterceptingKeyStrokes = false;
-    const {stdin} = process;
-    stdin.removeListener('data', this._handleKeypress);
-    // $FlowFixMe[prop-missing]
-    stdin.setRawMode(false);
-    stdin.resume();
-  }
-}

packages/community-cli-plugin/src/utils/createDevMiddlewareLogger.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import type TerminalReporter from 'metro/src/lib/TerminalReporter';
+
+type LoggerFn = (...message: $ReadOnlyArray<string>) => void;
+
+/**
+ * Create a dev-middleware logger object that will emit logs via Metro's
+ * terminal reporter.
+ */
+export default function createDevMiddlewareLogger(
+  reporter: TerminalReporter,
+): $ReadOnly<{
+  info: LoggerFn,
+  error: LoggerFn,
+  warn: LoggerFn,
+}> {
+  return {
+    info: makeLogger(reporter, 'info'),
+    warn: makeLogger(reporter, 'warn'),
+    error: makeLogger(reporter, 'error'),
+  };
+}
+
+function makeLogger(
+  reporter: TerminalReporter,
+  level: 'info' | 'warn' | 'error',
+): LoggerFn {
+  return (...data: Array<mixed>) =>
+    reporter.update({
+      type: 'unstable_server_log',
+      level,
+      data,
+    });
+}

packages/core-cli-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/core-cli-utils",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "React Native CLI library for Frameworks to build on",
   "license": "MIT",
   "main": "./src/index.flow.js",

packages/debugger-frontend/BUILD_INFO

@@ -1,9 +1,9 @@
-@generated SignedSource<<d156d11a5d3cc2a10238c2f014ada9f9>>
-Git revision: a556d261a5e2131864f4e38ded62d8f90e81c39a
+@generated SignedSource<<e1b6cf83a0e98051a2f929ad191b1d6c>>
+Git revision: f1f917329169ff3d2c12bcfaea7e301b71c3149e
 Built with --nohooks: false
 Is local checkout: false
 Remote URL: https://github.com/facebookexperimental/rn-chrome-devtools-frontend
-Remote branch: main
+Remote branch: 0.76-stable
 GN build args (overrides only): 
   is_official_build = true
 Git status in checkout:

packages/debugger-frontend/dist/third-party/front_end/Images/Images.js

@@ -20,7 +20,6 @@ style.setProperty('--image-file-nodeIcon', 'url(\"' + new URL('./nodeIcon.avif',
 style.setProperty('--image-file-popoverArrows', 'url(\"' + new URL('./popoverArrows.png', import.meta.url).toString() + '\")');
 style.setProperty('--image-file-react_native/learn-debugging-basics', 'url(\"' + new URL('./react_native/learn-debugging-basics.jpg', import.meta.url).toString() + '\")');
 style.setProperty('--image-file-react_native/learn-native-debugging', 'url(\"' + new URL('./react_native/learn-native-debugging.jpg', import.meta.url).toString() + '\")');
-style.setProperty('--image-file-react_native/learn-react-devtools', 'url(\"' + new URL('./react_native/learn-react-devtools.jpg', import.meta.url).toString() + '\")');
 style.setProperty('--image-file-react_native/learn-react-native-devtools', 'url(\"' + new URL('./react_native/learn-react-native-devtools.jpg', import.meta.url).toString() + '\")');
 style.setProperty('--image-file-react_native/welcomeIcon', 'url(\"' + new URL('./react_native/welcomeIcon.png', import.meta.url).toString() + '\")');
 style.setProperty('--image-file-toolbarResizerVertical', 'url(\"' + new URL('./toolbarResizerVertical.png', import.meta.url).toString() + '\")');

packages/debugger-frontend/dist/third-party/front_end/panels/react_devtools/react_devtools_components-meta.js

@@ -1 +1 @@
-import*as e from"../../core/i18n/i18n.js";import*as o from"../../ui/legacy/legacy.js";const t={title:"⚛️ Components",command:"Show React DevTools Components panel"},n=e.i18n.registerUIStrings("panels/react_devtools/react_devtools_components-meta.ts",t),a=e.i18n.getLazilyComputedLocalizedString.bind(void 0,n);let i;o.ViewManager.registerViewExtension({location:"panel",id:"react-devtools-components",title:a(t.title),commandPrompt:a(t.command),persistence:"permanent",order:1e3,loadView:async()=>new((await async function(){return i||(i=await import("./react_devtools.js")),i}()).ReactDevToolsComponentsView.ReactDevToolsComponentsViewImpl)});
+import*as e from"../../core/i18n/i18n.js";import*as o from"../../ui/legacy/legacy.js";const t={title:"Components ⚛",command:"Show React DevTools Components panel"},n=e.i18n.registerUIStrings("panels/react_devtools/react_devtools_components-meta.ts",t),a=e.i18n.getLazilyComputedLocalizedString.bind(void 0,n);let i;o.ViewManager.registerViewExtension({location:"panel",id:"react-devtools-components",title:a(t.title),commandPrompt:a(t.command),persistence:"permanent",order:1e3,loadView:async()=>new((await async function(){return i||(i=await import("./react_devtools.js")),i}()).ReactDevToolsComponentsView.ReactDevToolsComponentsViewImpl)});

packages/debugger-frontend/dist/third-party/front_end/panels/react_devtools/react_devtools_profiler-meta.js

@@ -1 +1 @@
-import*as e from"../../core/i18n/i18n.js";import*as o from"../../ui/legacy/legacy.js";const t={title:"⚛️ Profiler",command:"Show React DevTools Profiler panel"},i=e.i18n.registerUIStrings("panels/react_devtools/react_devtools_profiler-meta.ts",t),r=e.i18n.getLazilyComputedLocalizedString.bind(void 0,i);let a;o.ViewManager.registerViewExtension({location:"panel",id:"react-devtools-profiler",title:r(t.title),commandPrompt:r(t.command),persistence:"permanent",order:1e3,loadView:async()=>new((await async function(){return a||(a=await import("./react_devtools.js")),a}()).ReactDevToolsProfilerView.ReactDevToolsProfilerViewImpl)});
+import*as e from"../../core/i18n/i18n.js";import*as o from"../../ui/legacy/legacy.js";const t={title:"Profiler ⚛",command:"Show React DevTools Profiler panel"},i=e.i18n.registerUIStrings("panels/react_devtools/react_devtools_profiler-meta.ts",t),r=e.i18n.getLazilyComputedLocalizedString.bind(void 0,i);let a;o.ViewManager.registerViewExtension({location:"panel",id:"react-devtools-profiler",title:r(t.title),commandPrompt:r(t.command),persistence:"permanent",order:1e3,loadView:async()=>new((await async function(){return a||(a=await import("./react_devtools.js")),a}()).ReactDevToolsProfilerView.ReactDevToolsProfilerViewImpl)});

packages/debugger-frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/debugger-frontend",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "Debugger frontend for React Native based on Chrome DevTools",
   "keywords": [
     "react-native",

packages/dev-middleware/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/dev-middleware",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "Dev server middleware for React Native",
   "keywords": [
     "react-native",
@@ -23,7 +23,7 @@
   ],
   "dependencies": {
     "@isaacs/ttlcache": "^1.4.1",
-    "@react-native/debugger-frontend": "0.76.0-main",
+    "@react-native/debugger-frontend": "0.76.4",
     "chrome-launcher": "^0.15.2",
     "chromium-edge-launcher": "^0.2.0",
     "connect": "^3.6.5",

packages/dev-middleware/src/__tests__/FetchUtils.js

@@ -21,7 +21,7 @@ declare var globalThis: $FlowFixMe;
  */
 export async function fetchLocal(
   url: string,
-  options?: Parameters<typeof fetch>[1] & {dispatcher?: mixed},
+  options?: Partial<Parameters<typeof fetch>[1] & {dispatcher?: mixed}>,
 ): ReturnType<typeof fetch> {
   return await fetch(url, {
     ...options,

packages/dev-middleware/src/__tests__/InspectorProxyHttpApi-test.js

@@ -18,6 +18,7 @@ import {fetchJson, fetchLocal} from './FetchUtils';
 import {createDeviceMock} from './InspectorDeviceUtils';
 import {withAbortSignalForEachTest} from './ResourceUtils';
 import {withServerForEachTest} from './ServerUtils';
+import DefaultBrowserLauncher from '../utils/DefaultBrowserLauncher';
 
 // Must be greater than or equal to PAGES_POLLING_INTERVAL in `InspectorProxy.js`.
 const PAGES_POLLING_DELAY = 1000;
@@ -368,4 +369,60 @@ describe('inspector proxy HTTP API', () => {
       }
     });
   });
+
+  describe('/open-debugger endpoint', () => {
+    it('opens requested device using appId, device, and target', async () => {
+      // Connect a device to use when opening the debugger
+      const device = await createDeviceMock(
+        `${serverRef.serverBaseWsUrl}/inspector/device?device=device1&name=foo&app=bar`,
+        autoCleanup.signal,
+      );
+      device.getPages.mockImplementation(() => [
+        {
+          app: 'bar-app',
+          id: 'page1',
+          title: 'bar-title',
+          vm: 'bar-vm',
+          capabilities: {
+            // Ensure the device target can be found when launching the debugger
+            nativePageReloads: true,
+          },
+        },
+      ]);
+      jest.advanceTimersByTime(PAGES_POLLING_DELAY);
+
+      // Hook into `DefaultBrowserLauncher.launchDebuggerAppWindow` to ensure debugger was launched
+      const launchDebuggerSpy = jest
+        .spyOn(DefaultBrowserLauncher, 'launchDebuggerAppWindow')
+        .mockResolvedValueOnce();
+
+      try {
+        // Fetch the target information for the device
+        const pageListResponse = await fetchJson<JsonPagesListResponse>(
+          `${serverRef.serverBaseUrl}/json`,
+        );
+        // Select the first target from the page list response
+        expect(pageListResponse.length).toBeGreaterThanOrEqual(1);
+        const firstPage = pageListResponse[0];
+
+        // Build the URL for the debugger
+        const openUrl = new URL('/open-debugger', serverRef.serverBaseUrl);
+        openUrl.searchParams.set('appId', firstPage.description);
+        openUrl.searchParams.set(
+          'device',
+          firstPage.reactNative.logicalDeviceId,
+        );
+        openUrl.searchParams.set('target', firstPage.id);
+        // Request to open the debugger for the first device
+        const response = await fetchLocal(openUrl.toString(), {method: 'POST'});
+
+        // Ensure the request was handled properly
+        expect(response.status).toBe(200);
+        // Ensure the debugger was launched
+        expect(launchDebuggerSpy).toHaveBeenCalledWith(expect.any(String));
+      } finally {
+        device.close();
+      }
+    });
+  });
 });

packages/dev-middleware/src/middleware/openDebuggerMiddleware.js

@@ -132,6 +132,7 @@ export default function openDebuggerMiddleware({
                 {launchId, useFuseboxEntryPoint},
               ),
             );
+            res.writeHead(200);
             res.end();
             break;
           case 'redirect':

packages/eslint-config-react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/eslint-config",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "ESLint config for React Native",
   "license": "MIT",
   "repository": {
@@ -22,7 +22,7 @@
   "dependencies": {
     "@babel/core": "^7.25.2",
     "@babel/eslint-parser": "^7.25.1",
-    "@react-native/eslint-plugin": "0.76.0-main",
+    "@react-native/eslint-plugin": "0.76.4",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
     "eslint-config-prettier": "^8.5.0",

packages/eslint-plugin-react-native/__tests__/eslint-tester.js

@@ -12,7 +12,7 @@
 const ESLintTester = require('eslint').RuleTester;
 
 ESLintTester.setDefaultConfig({
-  parser: require.resolve('@babel/eslint-parser'),
+  parser: require.resolve('hermes-eslint'),
   parserOptions: {
     requireConfigFile: false,
     ecmaVersion: 6,

packages/eslint-plugin-react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/eslint-plugin",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "ESLint rules for @react-native/eslint-config",
   "license": "MIT",
   "repository": {
@@ -16,8 +16,12 @@
     "react-native"
   ],
   "bugs": "https://github.com/facebook/react-native/issues",
+  "main": "index.js",
+  "devDependencies": {
+    "babel-plugin-syntax-hermes-parser": "^0.23.1",
+    "hermes-eslint": "^0.23.1"
+  },
   "engines": {
     "node": ">=18"
-  },
-  "main": "index.js"
+  }
 }

packages/eslint-plugin-specs/__tests__/eslint-tester.js

@@ -12,13 +12,13 @@
 const ESLintTester = require('eslint').RuleTester;
 
 ESLintTester.setDefaultConfig({
-  parser: require.resolve('@babel/eslint-parser'),
+  parser: require.resolve('hermes-eslint'),
   parserOptions: {
     requireConfigFile: false,
     ecmaVersion: 6,
     sourceType: 'module',
     babelOptions: {
-      presets: [require.resolve('@babel/preset-flow')],
+      presets: [require.resolve('babel-plugin-syntax-hermes-parser')],
     },
   },
 });

packages/eslint-plugin-specs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/eslint-plugin-specs",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "ESLint rules to validate NativeModule and Component Specs",
   "license": "MIT",
   "repository": {
@@ -18,9 +18,6 @@
     "specs"
   ],
   "bugs": "https://github.com/facebook/react-native/issues",
-  "engines": {
-    "node": ">=18"
-  },
   "main": "index.js",
   "scripts": {
     "prepack": "node prepack.js",
@@ -28,12 +25,18 @@
   },
   "dependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/eslint-parser": "^7.25.1",
     "@babel/plugin-transform-flow-strip-types": "^7.25.2",
     "@babel/preset-flow": "^7.24.7",
-    "@react-native/codegen": "0.76.0-main",
+    "@react-native/codegen": "0.76.4",
     "make-dir": "^2.1.0",
     "pirates": "^4.0.1",
     "source-map-support": "0.5.0"
+  },
+  "devDependencies": {
+    "babel-plugin-syntax-hermes-parser": "^0.23.1",
+    "hermes-eslint": "^0.23.1"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

packages/gradle-plugin/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.10-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

packages/gradle-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/gradle-plugin",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "Gradle Plugin for React Native",
   "license": "MIT",
   "repository": {

packages/gradle-plugin/react-native-gradle-plugin/build.gradle.kts

@@ -64,7 +64,8 @@ tasks.withType<KotlinCompile>().configureEach {
     apiVersion = "1.6"
     // See comment above on JDK 11 support
     jvmTarget = "11"
-    allWarningsAsErrors = true
+    allWarningsAsErrors =
+        project.properties["enableWarningsAsErrors"]?.toString()?.toBoolean() ?: false
   }
 }
 

packages/gradle-plugin/react-native-gradle-plugin/src/main/kotlin/com/facebook/react/ReactExtension.kt

@@ -188,6 +188,7 @@ abstract class ReactExtension @Inject constructor(val project: Project) {
           ?.dependencies
           ?.values
           ?.filter { it.platforms?.android !== null }
+          ?.filterNot { it.platforms?.android?.isPureCxxDependency == true }
           ?.forEach { deps ->
             val nameCleansed = deps.nameCleansed
             val dependencyConfiguration = deps.platforms?.android?.dependencyConfiguration

packages/gradle-plugin/react-native-gradle-plugin/src/main/kotlin/com/facebook/react/tasks/GenerateAutolinkingNewArchitecturesFileTask.kt

@@ -59,15 +59,15 @@ abstract class GenerateAutolinkingNewArchitecturesFileTask : DefaultTask() {
           val cxxModuleCMakeListsPath = dep.cxxModuleCMakeListsPath
           if (libraryName != null && cmakeListsPath != null) {
             // If user provided a custom cmakeListsPath, let's honor it.
-            val nativeFolderPath = cmakeListsPath.replace("CMakeLists.txt", "")
+            val nativeFolderPath = sanitizeCmakeListsPath(cmakeListsPath)
             addDirectoryString +=
-                "add_subdirectory($nativeFolderPath ${libraryName}_autolinked_build)"
+                "add_subdirectory(\"$nativeFolderPath\" ${libraryName}_autolinked_build)"
           }
           if (cxxModuleCMakeListsPath != null) {
             // If user provided a custom cxxModuleCMakeListsPath, let's honor it.
-            val nativeFolderPath = cxxModuleCMakeListsPath.replace("CMakeLists.txt", "")
+            val nativeFolderPath = sanitizeCmakeListsPath(cxxModuleCMakeListsPath)
             addDirectoryString +=
-                "\nadd_subdirectory($nativeFolderPath ${libraryName}_cxxmodule_autolinked_build)"
+                "\nadd_subdirectory(\"$nativeFolderPath\" ${libraryName}_cxxmodule_autolinked_build)"
           }
           addDirectoryString
         }
@@ -159,6 +159,9 @@ abstract class GenerateAutolinkingNewArchitecturesFileTask : DefaultTask() {
     const val COMPONENT_DESCRIPTOR_FILENAME = "ComponentDescriptors.h"
     const val COMPONENT_INCLUDE_PATH = "react/renderer/components"
 
+    internal fun sanitizeCmakeListsPath(cmakeListsPath: String): String =
+        cmakeListsPath.replace("CMakeLists.txt", "").replace(" ", "\\ ")
+
     // language=cmake
     val CMAKE_TEMPLATE =
         """
@@ -166,6 +169,10 @@ abstract class GenerateAutolinkingNewArchitecturesFileTask : DefaultTask() {
       cmake_minimum_required(VERSION 3.13)
       set(CMAKE_VERBOSE_MAKEFILE on)
       
+      # We set REACTNATIVE_MERGED_SO so libraries/apps can selectively decide to depend on either libreactnative.so
+      # or link against a old prefab target (this is needed for React Native 0.76 on).
+      set(REACTNATIVE_MERGED_SO true)
+      
       {{ libraryIncludes }}
       
       set(AUTOLINKED_LIBRARIES

packages/gradle-plugin/react-native-gradle-plugin/src/main/kotlin/com/facebook/react/tasks/GeneratePackageListTask.kt

@@ -30,10 +30,19 @@ abstract class GeneratePackageListTask : DefaultTask() {
 
   @TaskAction
   fun taskAction() {
-    val model = JsonUtils.fromAutolinkingConfigJson(autolinkInputFile.get().asFile)
+    val model =
+        JsonUtils.fromAutolinkingConfigJson(autolinkInputFile.get().asFile)
+            ?: error(
+                """
+        RNGP - Autolinking: Could not parse autolinking config file:
+        ${autolinkInputFile.get().asFile.absolutePath}
+        
+        The file is either missing or not containing valid JSON so the build won't succeed. 
+      """
+                    .trimIndent())
 
     val packageName =
-        model?.project?.android?.packageName
+        model.project?.android?.packageName
             ?: error(
                 "RNGP - Autolinking: Could not find project.android.packageName in react-native config output! Could not autolink packages without this field.")
 

packages/gradle-plugin/react-native-gradle-plugin/src/test/kotlin/com/facebook/react/ReactExtensionTest.kt

@@ -189,6 +189,44 @@ class ReactExtensionTest {
     assertThat(deps).isEmpty()
   }
 
+  @Test
+  fun getGradleDependenciesToApply_withIsPureCxxDeps_filtersCorrectly() {
+    val validJsonFile =
+      createJsonFile(
+        """
+      {
+        "reactNativeVersion": "1000.0.0",
+        "dependencies": {
+          "@react-native/oss-library-example": {
+            "root": "./node_modules/@react-native/android-example",
+            "name": "@react-native/android-example",
+            "platforms": {
+              "android": {
+                "sourceDir": "src/main/java",
+                "packageImportPath": "com.facebook.react"
+              }
+            }
+          },
+          "@react-native/another-library-for-testing": {
+            "root": "./node_modules/@react-native/cxx-testing",
+            "name": "@react-native/cxx-testing",
+            "platforms": {
+              "android": {
+                "sourceDir": "src/main/java",
+                "packageImportPath": "com.facebook.react",
+                "isPureCxxDependency": true
+              }
+            }
+          }
+        }
+      }
+      """
+          .trimIndent())
+
+    val deps = getGradleDependenciesToApply(validJsonFile)
+    assertThat(deps).containsExactly("implementation" to ":react-native_android-example")
+  }
+
   private fun createJsonFile(@Language("JSON") input: String) =
       tempFolder.newFile().apply { writeText(input) }
 }

packages/gradle-plugin/react-native-gradle-plugin/src/test/kotlin/com/facebook/react/tasks/GenerateAutolinkingNewArchitecturesFileTaskTest.kt

@@ -11,6 +11,7 @@ import com.facebook.react.model.ModelAutolinkingConfigJson
 import com.facebook.react.model.ModelAutolinkingDependenciesJson
 import com.facebook.react.model.ModelAutolinkingDependenciesPlatformAndroidJson
 import com.facebook.react.model.ModelAutolinkingDependenciesPlatformJson
+import com.facebook.react.tasks.GenerateAutolinkingNewArchitecturesFileTask.Companion.sanitizeCmakeListsPath
 import com.facebook.react.tests.createTestTask
 import org.assertj.core.api.Assertions.assertThat
 import org.junit.Rule
@@ -115,6 +116,10 @@ class GenerateAutolinkingNewArchitecturesFileTaskTest {
       cmake_minimum_required(VERSION 3.13)
       set(CMAKE_VERBOSE_MAKEFILE on)
       
+      # We set REACTNATIVE_MERGED_SO so libraries/apps can selectively decide to depend on either libreactnative.so
+      # or link against a old prefab target (this is needed for React Native 0.76 on).
+      set(REACTNATIVE_MERGED_SO true)
+      
       
       
       set(AUTOLINKED_LIBRARIES
@@ -137,9 +142,13 @@ class GenerateAutolinkingNewArchitecturesFileTaskTest {
       cmake_minimum_required(VERSION 3.13)
       set(CMAKE_VERBOSE_MAKEFILE on)
       
-      add_subdirectory(./a/directory/ aPackage_autolinked_build)
-      add_subdirectory(./another/directory/ anotherPackage_autolinked_build)
-      add_subdirectory(./another/directory/cxx/ anotherPackage_cxxmodule_autolinked_build)
+      # We set REACTNATIVE_MERGED_SO so libraries/apps can selectively decide to depend on either libreactnative.so
+      # or link against a old prefab target (this is needed for React Native 0.76 on).
+      set(REACTNATIVE_MERGED_SO true)
+      
+      add_subdirectory("./a/directory/" aPackage_autolinked_build)
+      add_subdirectory("./another/directory/with\ spaces/" anotherPackage_autolinked_build)
+      add_subdirectory("./another/directory/cxx/" anotherPackage_cxxmodule_autolinked_build)
       
       set(AUTOLINKED_LIBRARIES
         react_codegen_aPackage
@@ -250,6 +259,24 @@ class GenerateAutolinkingNewArchitecturesFileTaskTest {
                 .trimIndent())
   }
 
+  @Test
+  fun sanitizeCmakeListsPath_withPathEndingWithFileName_removesFilename() {
+    val input = "./a/directory/CMakeLists.txt"
+    assertThat(sanitizeCmakeListsPath(input)).isEqualTo("./a/directory/")
+  }
+
+  @Test
+  fun sanitizeCmakeListsPath_withSpaces_removesSpaces() {
+    val input = "./a/dir ectory/with spaces/"
+    assertThat(sanitizeCmakeListsPath(input)).isEqualTo("./a/dir\\ ectory/with\\ spaces/")
+  }
+
+  @Test
+  fun sanitizeCmakeListsPath_withPathEndingWithFileNameAndSpaces_sanitizesIt() {
+    val input = "./a/dir ectory/CMakeLists.txt"
+    assertThat(sanitizeCmakeListsPath(input)).isEqualTo("./a/dir\\ ectory/")
+  }
+
   private val testDependencies =
       listOf(
           ModelAutolinkingDependenciesPlatformAndroidJson(
@@ -268,7 +295,7 @@ class GenerateAutolinkingNewArchitecturesFileTaskTest {
               buildTypes = emptyList(),
               libraryName = "anotherPackage",
               componentDescriptors = listOf("AnotherPackageComponentDescriptor"),
-              cmakeListsPath = "./another/directory/CMakeLists.txt",
+              cmakeListsPath = "./another/directory/with spaces/CMakeLists.txt",
               cxxModuleCMakeListsPath = "./another/directory/cxx/CMakeLists.txt",
               cxxModuleHeaderName = "AnotherCxxModule",
               cxxModuleCMakeListsModuleName = "another_cxxModule",

packages/gradle-plugin/settings-plugin/build.gradle.kts

@@ -54,7 +54,8 @@ tasks.withType<KotlinCompile>().configureEach {
     apiVersion = "1.6"
     // See comment above on JDK 11 support
     jvmTarget = "11"
-    allWarningsAsErrors = true
+    allWarningsAsErrors =
+        project.properties["enableWarningsAsErrors"]?.toString()?.toBoolean() ?: false
   }
 }
 

packages/gradle-plugin/shared-testutil/build.gradle.kts

@@ -24,7 +24,8 @@ tasks.withType<KotlinCompile>().configureEach {
   kotlinOptions {
     apiVersion = "1.6"
     jvmTarget = "11"
-    allWarningsAsErrors = true
+    allWarningsAsErrors =
+        project.properties["enableWarningsAsErrors"]?.toString()?.toBoolean() ?: false
   }
 }
 

packages/gradle-plugin/shared/build.gradle.kts

@@ -30,7 +30,8 @@ tasks.withType<KotlinCompile>().configureEach {
   kotlinOptions {
     apiVersion = "1.6"
     jvmTarget = "11"
-    allWarningsAsErrors = true
+    allWarningsAsErrors =
+        project.properties["enableWarningsAsErrors"]?.toString()?.toBoolean() ?: false
   }
 }
 

packages/gradle-plugin/shared/src/main/kotlin/com/facebook/react/utils/JsonUtils.kt

@@ -21,8 +21,23 @@ object JsonUtils {
       }
 
   fun fromAutolinkingConfigJson(input: File): ModelAutolinkingConfigJson? =
-      input.bufferedReader().use {
-        runCatching { gsonConverter.fromJson(it, ModelAutolinkingConfigJson::class.java) }
+      input.bufferedReader().use { reader ->
+        runCatching {
+              // We sanitize the output of the `config` command as it could contain debug logs
+              // such as:
+              //
+              // > AwesomeProject@0.0.1 npx
+              // > rnc-cli config
+              //
+              // which will render the JSON invalid.
+              val content =
+                  reader
+                      .readLines()
+                      .filterNot { line -> line.startsWith(">") }
+                      .joinToString("\n")
+                      .trim()
+              gsonConverter.fromJson(content, ModelAutolinkingConfigJson::class.java)
+            }
             .getOrNull()
       }
 }

packages/gradle-plugin/shared/src/test/kotlin/com/facebook/react/utils/JsonUtilsTest.kt

@@ -186,6 +186,54 @@ class JsonUtilsTest {
     assertThat("implementation").isEqualTo(parsed.project!!.android!!.dependencyConfiguration)
   }
 
+  @Test
+  fun fromAutolinkingConfigJson_withInfoLogs_sanitizeAndParseIt() {
+    @Suppress("JsonStandardCompliance")
+    val validJson =
+        createJsonFile(
+            """
+      
+      > AwesomeProject@0.0.1 npx
+      > rnc-cli config
+      
+       {
+        "reactNativeVersion": "1000.0.0",
+        "project": {
+          "ios": {
+            "sourceDir": "./packages/rn-tester",
+            "xcodeProject": {
+              "name": "RNTesterPods.xcworkspace",
+              "isWorkspace": true
+            },
+            "automaticPodsInstallation": false
+          },
+          "android": {
+            "sourceDir": "./packages/rn-tester",
+            "appName": "RN-Tester",
+            "packageName": "com.facebook.react.uiapp",
+            "applicationId": "com.facebook.react.uiapp",
+            "mainActivity": ".RNTesterActivity",
+            "watchModeCommandParams": [
+              "--mode HermesDebug"
+            ],
+            "dependencyConfiguration": "implementation"
+          }
+        }
+      } 
+      """
+                .trimIndent())
+    val parsed = JsonUtils.fromAutolinkingConfigJson(validJson)!!
+
+    assertThat("./packages/rn-tester").isEqualTo(parsed.project!!.android!!.sourceDir)
+    assertThat("RN-Tester").isEqualTo(parsed.project!!.android!!.appName)
+    assertThat("com.facebook.react.uiapp").isEqualTo(parsed.project!!.android!!.packageName)
+    assertThat("com.facebook.react.uiapp").isEqualTo(parsed.project!!.android!!.applicationId)
+    assertThat(".RNTesterActivity").isEqualTo(parsed.project!!.android!!.mainActivity)
+    assertThat("--mode HermesDebug")
+        .isEqualTo(parsed.project!!.android!!.watchModeCommandParams!![0])
+    assertThat("implementation").isEqualTo(parsed.project!!.android!!.dependencyConfiguration)
+  }
+
   @Test
   fun fromAutolinkingConfigJson_withDependenciesSpecified_canParseIt() {
     val validJson =

packages/helloworld/Gemfile

@@ -4,3 +4,4 @@ ruby ">= 2.6.10"
 
 gem 'cocoapods', '~> 1.13', '!= 1.15.0', '!= 1.15.1'
 gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'
+gem 'xcodeproj', '< 1.26.0'

packages/helloworld/android/app/src/main/java/com/helloworld/MainApplication.kt

@@ -16,6 +16,7 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.react.soloader.OpenSourceMergedSoMapping
 import com.facebook.soloader.SoLoader
 
 class MainApplication : Application(), ReactApplication {
@@ -41,7 +42,7 @@ class MainApplication : Application(), ReactApplication {
 
   override fun onCreate() {
     super.onCreate()
-    SoLoader.init(this, false)
+    SoLoader.init(this, OpenSourceMergedSoMapping)
     if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
       // If you opted-in for the New Architecture, we load the native entry point for this app.
       load()

packages/helloworld/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.10-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

packages/helloworld/package.json

@@ -1,6 +1,6 @@
 {
   "name": "helloworld",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "private": true,
   "scripts": {
     "bootstrap": "node ./cli.js bootstrap",
@@ -12,24 +12,24 @@
     "test": "jest"
   },
   "dependencies": {
-    "react": "19.0.0-rc-fb9a90fa48-20240614",
-    "react-native": "1000.0.0"
+    "react": "18.3.1",
+    "react-native": "0.76.4"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
-    "@react-native/babel-preset": "0.76.0-main",
-    "@react-native/core-cli-utils": "0.76.0-main",
-    "@react-native/eslint-config": "0.76.0-main",
-    "@react-native/metro-config": "0.76.0-main",
+    "@react-native/babel-preset": "0.76.4",
+    "@react-native/core-cli-utils": "0.76.4",
+    "@react-native/eslint-config": "0.76.4",
+    "@react-native/metro-config": "0.76.4",
     "babel-jest": "^29.6.3",
     "chalk": "^4.1.2",
     "commander": "^12.0.0",
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
     "listr2": "^8.2.1",
-    "react-test-renderer": "19.0.0-rc-fb9a90fa48-20240614",
+    "react-test-renderer": "18.3.1",
     "rxjs": "^7.8.1"
   },
   "engines": {

packages/hermes-inspector-msggen/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/hermes-inspector-msggen",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "private": true,
   "description": "Hermes Inspector Message Generator for React Native",
   "license": "MIT",

packages/metro-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/metro-config",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "Metro configuration for React Native.",
   "license": "MIT",
   "repository": {
@@ -26,9 +26,9 @@
     "dist"
   ],
   "dependencies": {
-    "@react-native/js-polyfills": "0.76.0-main",
-    "@react-native/metro-babel-transformer": "0.76.0-main",
-    "metro-config": "^0.80.10",
-    "metro-runtime": "^0.80.10"
+    "@react-native/js-polyfills": "0.76.4",
+    "@react-native/metro-babel-transformer": "0.76.4",
+    "metro-config": "^0.81.0",
+    "metro-runtime": "^0.81.0"
   }
 }

packages/metro-config/src/index.flow.js

@@ -11,6 +11,8 @@
 
 import type {ConfigT} from 'metro-config';
 
+export type {MetroConfig} from 'metro-config';
+
 import {getDefaultConfig as getBaseConfig, mergeConfig} from 'metro-config';
 
 const INTERNAL_CALLSITES_REGEX = new RegExp(
@@ -87,7 +89,6 @@ export function getDefaultConfig(projectRoot: string): ConfigT {
       babelTransformerPath: require.resolve(
         '@react-native/metro-babel-transformer',
       ),
-      hermesParser: true,
       getTransformOptions: async () => ({
         transform: {
           experimentalImportSupport: false,

packages/normalize-color/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/normalize-colors",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "Color normalization for React Native.",
   "license": "MIT",
   "repository": {

packages/polyfills/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/js-polyfills",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "Polyfills for React Native.",
   "license": "MIT",
   "repository": {

packages/react-native-babel-preset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/babel-preset",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "Babel preset for React Native applications",
   "main": "src/index.js",
   "repository": {
@@ -15,23 +15,16 @@
   "license": "MIT",
   "dependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/plugin-transform-async-generator-functions": "^7.25.4",
-    "@babel/plugin-transform-class-properties": "^7.25.4",
     "@babel/plugin-proposal-export-default-from": "^7.24.7",
-    "@babel/plugin-transform-logical-assignment-operators": "^7.24.7",
-    "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
-    "@babel/plugin-transform-numeric-separator": "^7.24.7",
-    "@babel/plugin-transform-object-rest-spread": "^7.24.7",
-    "@babel/plugin-transform-optional-catch-binding": "^7.24.7",
-    "@babel/plugin-transform-optional-chaining": "^7.24.8",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-export-default-from": "^7.24.7",
-    "@babel/plugin-syntax-flow": "^7.24.7",
     "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
     "@babel/plugin-syntax-optional-chaining": "^7.8.3",
     "@babel/plugin-transform-arrow-functions": "^7.24.7",
+    "@babel/plugin-transform-async-generator-functions": "^7.25.4",
     "@babel/plugin-transform-async-to-generator": "^7.24.7",
     "@babel/plugin-transform-block-scoping": "^7.25.0",
+    "@babel/plugin-transform-class-properties": "^7.25.4",
     "@babel/plugin-transform-classes": "^7.25.4",
     "@babel/plugin-transform-computed-properties": "^7.24.7",
     "@babel/plugin-transform-destructuring": "^7.24.8",
@@ -39,8 +32,14 @@
     "@babel/plugin-transform-for-of": "^7.24.7",
     "@babel/plugin-transform-function-name": "^7.25.1",
     "@babel/plugin-transform-literals": "^7.25.2",
+    "@babel/plugin-transform-logical-assignment-operators": "^7.24.7",
     "@babel/plugin-transform-modules-commonjs": "^7.24.8",
     "@babel/plugin-transform-named-capturing-groups-regex": "^7.24.7",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
+    "@babel/plugin-transform-numeric-separator": "^7.24.7",
+    "@babel/plugin-transform-object-rest-spread": "^7.24.7",
+    "@babel/plugin-transform-optional-catch-binding": "^7.24.7",
+    "@babel/plugin-transform-optional-chaining": "^7.24.8",
     "@babel/plugin-transform-parameters": "^7.24.7",
     "@babel/plugin-transform-private-methods": "^7.24.7",
     "@babel/plugin-transform-private-property-in-object": "^7.24.7",
@@ -56,7 +55,8 @@
     "@babel/plugin-transform-typescript": "^7.25.2",
     "@babel/plugin-transform-unicode-regex": "^7.24.7",
     "@babel/template": "^7.25.0",
-    "@react-native/babel-plugin-codegen": "0.76.0-main",
+    "@react-native/babel-plugin-codegen": "0.76.4",
+    "babel-plugin-syntax-hermes-parser": "^0.25.1",
     "babel-plugin-transform-flow-enums": "^0.0.2",
     "react-refresh": "^0.14.0"
   },

packages/react-native-babel-preset/src/configs/main.js

@@ -25,7 +25,7 @@ function isTSXSource(fileName) {
 const loose = true;
 
 const defaultPlugins = [
-  [require('@babel/plugin-syntax-flow')],
+  [require('babel-plugin-syntax-hermes-parser'), {parseLangTypes: 'flow'}],
   [require('babel-plugin-transform-flow-enums')],
   [require('@babel/plugin-transform-block-scoping')],
   [require('@babel/plugin-transform-class-properties'), {loose}],

packages/react-native-babel-transformer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/metro-babel-transformer",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "Babel transformer for React Native applications.",
   "main": "src/index.js",
   "repository": {
@@ -16,7 +16,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/core": "^7.25.2",
-    "@react-native/babel-preset": "0.76.0-main",
+    "@react-native/babel-preset": "0.76.4",
     "hermes-parser": "0.23.1",
     "nullthrows": "^1.1.1"
   },

packages/react-native-bots/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-native/bots",
   "description": "React Native Bots",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "private": true,
   "license": "MIT",
   "repository": {

packages/react-native-codegen-typescript-test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/codegen-typescript-test",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "private": true,
   "description": "TypeScript related unit test for @react-native/codegen",
   "license": "MIT",
@@ -19,7 +19,7 @@
     "prepare": "yarn run build"
   },
   "dependencies": {
-    "@react-native/codegen": "0.76.0-main"
+    "@react-native/codegen": "0.76.4"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

packages/react-native-codegen/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/codegen",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "Code generation tools for React Native",
   "license": "MIT",
   "repository": {

packages/react-native-info/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-info",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "main": "build/index.js",
   "license": "MIT",
   "private": true,
@@ -17,10 +17,10 @@
     "directory": "packages/react-native-info"
   },
   "dependencies": {
-    "@react-native-community/cli-config": "15.0.0-alpha.2",
-    "@react-native-community/cli-platform-apple": "15.0.0-alpha.2",
-    "@react-native-community/cli-tools": "15.0.0-alpha.2",
-    "@react-native-community/cli-types": "15.0.0-alpha.2",
+    "@react-native-community/cli-config": "15.0.1",
+    "@react-native-community/cli-platform-apple": "15.0.1",
+    "@react-native-community/cli-tools": "15.0.1",
+    "@react-native-community/cli-types": "15.0.1",
     "commander": "^12.0.0",
     "fs-extra": "^11.2.0",
     "yaml": "^2.4.1"

packages/react-native-popup-menu-android/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/popup-menu-android",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "PopupMenu for the Android platform",
   "main": "index.js",
   "files": [
@@ -17,7 +17,7 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@react-native/codegen": "0.76.0-main"
+    "@react-native/codegen": "0.76.4"
   },
   "peerDependencies": {
     "@types/react": "^18.2.6",

packages/react-native-test-library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/oss-library-example",
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "private": true,
   "description": "Package that includes native module exapmle, native component example, targets both the old and the new architecture. It should serve as an example of a real-world OSS library.",
   "license": "MIT",
@@ -26,8 +26,8 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@react-native/babel-preset": "0.76.0-main",
-    "react-native": "1000.0.0"
+    "@react-native/babel-preset": "0.76.4",
+    "react-native": "0.76.4"
   },
   "peerDependencies": {
     "react": "*",

packages/react-native-test-renderer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-native/test-renderer",
   "private": true,
-  "version": "0.76.0-main",
+  "version": "0.76.4",
   "description": "A Test rendering library for React Native",
   "license": "MIT",
   "devDependencies": {

packages/react-native/Libraries/AppDelegate/RCTAppDelegate.h

@@ -64,6 +64,9 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, strong, nullable) NSDictionary *initialProps;
 @property (nonatomic, strong, nonnull) RCTRootViewFactory *rootViewFactory;
 
+/// If `automaticallyLoadReactNativeWindow` is set to `true`, the React Native window will be loaded automatically.
+@property (nonatomic, assign) BOOL automaticallyLoadReactNativeWindow;
+
 @property (nonatomic, nullable) RCTSurfacePresenterBridgeAdapter *bridgeAdapter;
 
 /**

packages/react-native/Libraries/AppDelegate/RCTAppDelegate.mm

@@ -12,6 +12,7 @@
 #import <React/RCTSurfacePresenterBridgeAdapter.h>
 #import <React/RCTUtils.h>
 #import <ReactCommon/RCTHost.h>
+#include <UIKit/UIKit.h>
 #import <objc/runtime.h>
 #import <react/featureflags/ReactNativeFeatureFlags.h>
 #import <react/featureflags/ReactNativeFeatureFlagsDefaults.h>
@@ -38,6 +39,14 @@
 
 @implementation RCTAppDelegate
 
+- (instancetype)init
+{
+  if (self = [super init]) {
+    _automaticallyLoadReactNativeWindow = YES;
+  }
+  return self;
+}
+
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
   [self _setUpFeatureFlags];
@@ -47,23 +56,29 @@
   RCTAppSetupPrepareApp(application, self.turboModuleEnabled);
 
   self.rootViewFactory = [self createRCTRootViewFactory];
-
-  UIView *rootView = [self.rootViewFactory viewWithModuleName:self.moduleName
-                                            initialProperties:self.initialProps
-                                                launchOptions:launchOptions];
-
   if (self.newArchEnabled || self.fabricEnabled) {
     [RCTComponentViewFactory currentComponentViewFactory].thirdPartyFabricComponentsProvider = self;
   }
 
+  if (self.automaticallyLoadReactNativeWindow) {
+    [self loadReactNativeWindow:launchOptions];
+  }
+
+  return YES;
+}
+
+- (void)loadReactNativeWindow:(NSDictionary *)launchOptions
+{
+  UIView *rootView = [self.rootViewFactory viewWithModuleName:self.moduleName
+                                            initialProperties:self.initialProps
+                                                launchOptions:launchOptions];
+
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
   UIViewController *rootViewController = [self createRootViewController];
   [self setRootView:rootView toRootViewController:rootViewController];
-  self.window.rootViewController = rootViewController;
-  self.window.windowScene.delegate = self;
-  [self.window makeKeyAndVisible];
-
-  return YES;
+  _window.windowScene.delegate = self;
+  _window.rootViewController = rootViewController;
+  [_window makeKeyAndVisible];
 }
 
 - (void)applicationDidEnterBackground:(UIApplication *)application
@@ -261,19 +276,6 @@
     return [weakSelf sourceURLForBridge:bridge];
   };
 
-  configuration.hostDidStartBlock = ^(RCTHost *_Nonnull host) {
-    [weakSelf hostDidStart:host];
-  };
-
-  configuration.hostDidReceiveJSErrorStackBlock =
-      ^(RCTHost *_Nonnull host,
-        NSArray<NSDictionary<NSString *, id> *> *_Nonnull stack,
-        NSString *_Nonnull message,
-        NSUInteger exceptionId,
-        BOOL isFatal) {
-        [weakSelf host:host didReceiveJSErrorStack:stack message:message exceptionId:exceptionId isFatal:isFatal];
-      };
-
   if ([self respondsToSelector:@selector(extraModulesForBridge:)]) {
     configuration.extraModulesForBridge = ^NSArray<id<RCTBridgeModule>> *_Nonnull(RCTBridge *_Nonnull bridge)
     {
@@ -295,7 +297,7 @@
     };
   }
 
-  return [[RCTRootViewFactory alloc] initWithConfiguration:configuration andTurboModuleManagerDelegate:self];
+  return [[RCTRootViewFactory alloc] initWithTurboModuleDelegate:self hostDelegate:self configuration:configuration];
 }
 
 #pragma mark - Feature Flags

packages/react-native/Libraries/AppDelegate/RCTRootViewFactory.h

@@ -12,6 +12,7 @@
 @protocol RCTCxxBridgeDelegate;
 @protocol RCTComponentViewFactoryComponentProvider;
 @protocol RCTTurboModuleManagerDelegate;
+@protocol RCTHostDelegate;
 @class RCTBridge;
 @class RCTHost;
 @class RCTRootView;
@@ -30,13 +31,6 @@ typedef NSURL *_Nullable (^RCTBundleURLBlock)(void);
 typedef NSArray<id<RCTBridgeModule>> *_Nonnull (^RCTExtraModulesForBridgeBlock)(RCTBridge *bridge);
 typedef NSDictionary<NSString *, Class> *_Nonnull (^RCTExtraLazyModuleClassesForBridge)(RCTBridge *bridge);
 typedef BOOL (^RCTBridgeDidNotFindModuleBlock)(RCTBridge *bridge, NSString *moduleName);
-typedef void (^RCTHostDidStartBlock)(RCTHost *host);
-typedef void (^RCTHostDidReceiveJSErrorStackBlock)(
-    RCTHost *host,
-    NSArray<NSDictionary<NSString *, id> *> *stack,
-    NSString *message,
-    NSUInteger exceptionId,
-    BOOL isFatal);
 
 #pragma mark - RCTRootViewFactory Configuration
 @interface RCTRootViewFactoryConfiguration : NSObject
@@ -147,22 +141,6 @@ typedef void (^RCTHostDidReceiveJSErrorStackBlock)(
  */
 @property (nonatomic, nullable) RCTBridgeDidNotFindModuleBlock bridgeDidNotFindModule;
 
-/**
- * Called when `RCTHost` started.
- * @parameter: host - The started `RCTHost`.
- */
-@property (nonatomic, nullable) RCTHostDidStartBlock hostDidStartBlock;
-
-/**
- * Called when `RCTHost` received JS error.
- * @parameter: host - `RCTHost` which received js error.
- * @parameter: stack - JS error stack.
- * @parameter: message - Error message.
- * @parameter: exceptionId - Exception ID.
- * @parameter: isFatal - YES if JS error is fatal.
- */
-@property (nonatomic, nullable) RCTHostDidReceiveJSErrorStackBlock hostDidReceiveJSErrorStackBlock;
-
 @end
 
 #pragma mark - RCTRootViewFactory
@@ -187,6 +165,10 @@ typedef void (^RCTHostDidReceiveJSErrorStackBlock)(
 
 - (instancetype)initWithConfiguration:(RCTRootViewFactoryConfiguration *)configuration;
 
+- (instancetype)initWithTurboModuleDelegate:(id<RCTTurboModuleManagerDelegate>)turboModuleManagerDelegate
+                               hostDelegate:(id<RCTHostDelegate>)hostdelegate
+                              configuration:(RCTRootViewFactoryConfiguration *)configuration;
+
 /**
  * This method can be used to create new RCTRootViews on demand.
  *

packages/react-native/Libraries/AppDelegate/RCTRootViewFactory.mm

@@ -83,7 +83,7 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
 
 @end
 
-@interface RCTRootViewFactory () <RCTContextContainerHandling, RCTHostDelegate> {
+@interface RCTRootViewFactory () <RCTContextContainerHandling> {
   std::shared_ptr<const facebook::react::ReactNativeConfig> _reactNativeConfig;
   facebook::react::ContextContainer::Shared _contextContainer;
 }
@@ -95,15 +95,18 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
 @end
 
 @implementation RCTRootViewFactory {
-  RCTRootViewFactoryConfiguration *_configuration;
   __weak id<RCTTurboModuleManagerDelegate> _turboModuleManagerDelegate;
+  __weak id<RCTHostDelegate> _hostDelegate;
+  RCTRootViewFactoryConfiguration *_configuration;
 }
 
-- (instancetype)initWithConfiguration:(RCTRootViewFactoryConfiguration *)configuration
-        andTurboModuleManagerDelegate:(id<RCTTurboModuleManagerDelegate>)turboModuleManagerDelegate
+- (instancetype)initWithTurboModuleDelegate:(id<RCTTurboModuleManagerDelegate>)turboModuleManagerDelegate
+                               hostDelegate:(id<RCTHostDelegate>)hostdelegate
+                              configuration:(RCTRootViewFactoryConfiguration *)configuration
 {
   if (self = [super init]) {
     _configuration = configuration;
+    _hostDelegate = hostdelegate;
     _contextContainer = std::make_shared<const facebook::react::ContextContainer>();
     _reactNativeConfig = std::make_shared<const facebook::react::EmptyReactNativeConfig>();
     _contextContainer->insert("ReactNativeConfig", _reactNativeConfig);
@@ -112,6 +115,17 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
   return self;
 }
 
+- (instancetype)initWithConfiguration:(RCTRootViewFactoryConfiguration *)configuration
+        andTurboModuleManagerDelegate:(id<RCTTurboModuleManagerDelegate>)turboModuleManagerDelegate
+{
+  id<RCTHostDelegate> hostDelegate = [turboModuleManagerDelegate conformsToProtocol:@protocol(RCTHostDelegate)]
+      ? (id<RCTHostDelegate>)turboModuleManagerDelegate
+      : nil;
+  return [self initWithTurboModuleDelegate:turboModuleManagerDelegate
+                              hostDelegate:hostDelegate
+                             configuration:configuration];
+}
+
 - (instancetype)initWithConfiguration:(RCTRootViewFactoryConfiguration *)configuration
 {
   return [self initWithConfiguration:configuration andTurboModuleManagerDelegate:nil];
@@ -188,26 +202,6 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
   return rootView;
 }
 
-#pragma mark - RCTHostDelegate
-
-- (void)hostDidStart:(RCTHost *)host
-{
-  if (self->_configuration.hostDidStartBlock) {
-    self->_configuration.hostDidStartBlock(host);
-  }
-}
-
-- (void)host:(RCTHost *)host
-    didReceiveJSErrorStack:(NSArray<NSDictionary<NSString *, id> *> *)stack
-                   message:(NSString *)message
-               exceptionId:(NSUInteger)exceptionId
-                   isFatal:(BOOL)isFatal
-{
-  if (self->_configuration.hostDidReceiveJSErrorStackBlock) {
-    self->_configuration.hostDidReceiveJSErrorStackBlock(host, stack, message, exceptionId, isFatal);
-  }
-}
-
 #pragma mark - RCTCxxBridgeDelegate
 - (std::unique_ptr<facebook::react::JSExecutorFactory>)jsExecutorFactoryForBridge:(RCTBridge *)bridge
 {
@@ -266,7 +260,7 @@ static NSDictionary *updateInitialProps(NSDictionary *initialProps, BOOL isFabri
   __weak __typeof(self) weakSelf = self;
   RCTHost *reactHost =
       [[RCTHost alloc] initWithBundleURLProvider:self->_configuration.bundleURLBlock
-                                    hostDelegate:self
+                                    hostDelegate:_hostDelegate
                       turboModuleManagerDelegate:_turboModuleManagerDelegate
                                 jsEngineProvider:^std::shared_ptr<facebook::react::JSRuntimeFactory>() {
                                   return [weakSelf createJSRuntimeFactory];

packages/react-native/Libraries/AppDelegate/React-RCTAppDelegate.podspec

@@ -63,7 +63,7 @@ Pod::Spec.new do |s|
     "CLANG_CXX_LANGUAGE_STANDARD" => rct_cxx_language_standard(),
     "DEFINES_MODULE" => "YES"
   }
-  s.user_target_xcconfig   = { "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/Headers/Private/React-Core\""}
+  s.user_target_xcconfig   = { "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/Headers/Private/React-Core\" \"$(PODS_ROOT)/Headers/Private/Yoga\""}
 
   s.dependency "React-Core"
   s.dependency "RCT-Folly", folly_version

packages/react-native/Libraries/Blob/RCTFileReaderModule.mm

@@ -72,9 +72,10 @@ RCT_EXPORT_METHOD(readAsDataURL
           nil);
     } else {
       NSString *type = [RCTConvert NSString:blob[@"type"]];
-      NSString *text = [NSString stringWithFormat:@"data:%@;base64,%@",
-                                                  type != nil && [type length] > 0 ? type : @"application/octet-stream",
-                                                  [data base64EncodedStringWithOptions:0]];
+      NSString *text = [NSString
+          stringWithFormat:@"data:%@;base64,%@",
+                           ![type isEqual:[NSNull null]] && [type length] > 0 ? type : @"application/octet-stream",
+                           [data base64EncodedStringWithOptions:0]];
 
       resolve(text);
     }

packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -9,6 +9,7 @@
  */
 
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
+import type {DimensionsPayload} from '../../Utilities/NativeDeviceInfo';
 import type {
   ViewLayout,
   ViewLayoutEvent,
@@ -18,6 +19,7 @@ import type {KeyboardEvent, KeyboardMetrics} from './Keyboard';
 
 import LayoutAnimation from '../../LayoutAnimation/LayoutAnimation';
 import StyleSheet from '../../StyleSheet/StyleSheet';
+import Dimensions from '../../Utilities/Dimensions';
 import Platform from '../../Utilities/Platform';
 import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
 import AccessibilityInfo from '../AccessibilityInfo/AccessibilityInfo';
@@ -66,6 +68,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
   viewRef: {current: React.ElementRef<typeof View> | null, ...};
   _initialFrameHeight: number = 0;
   _bottom: number = 0;
+  _windowWidth: number = Dimensions.get('window').width;
 
   constructor(props: Props) {
     super(props);
@@ -130,6 +133,10 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
     }
   };
 
+  _onDimensionsChange = ({window}: DimensionsPayload) => {
+    this._windowWidth = window?.width ?? 0;
+  };
+
   // Avoid unnecessary renders if the KeyboardAvoidingView is disabled.
   _setBottom = (value: number) => {
     const enabled = this.props.enabled ?? true;
@@ -145,6 +152,15 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
       return;
     }
 
+    if (
+      Platform.OS === 'ios' &&
+      this._windowWidth !== this._keyboardEvent.endCoordinates.width
+    ) {
+      // The keyboard is not the standard bottom-of-the-screen keyboard. For example, floating keyboard on iPadOS.
+      this._setBottom(0);
+      return;
+    }
+
     const {duration, easing, endCoordinates} = this._keyboardEvent;
     const height = await this._relativeKeyboardHeight(endCoordinates);
 
@@ -178,6 +194,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
     if (Platform.OS === 'ios') {
       this._subscriptions = [
         Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),
+        Dimensions.addEventListener('change', this._onDimensionsChange),
       ];
     } else {
       this._subscriptions = [

packages/react-native/Libraries/Components/ScrollView/ScrollView.js

@@ -1931,19 +1931,22 @@ function createRefForwarder<TNativeInstance, TPublicInstance>(
   return state;
 }
 
+// TODO: After upgrading to React 19, remove `forwardRef` from this component.
 // NOTE: This wrapper component is necessary because `ScrollView` is a class
 // component and we need to map `ref` to a differently named prop. This can be
 // removed when `ScrollView` is a functional component.
-function Wrapper({
-  ref,
-  ...props
-}: {
-  ...Props,
-  ref: React.RefSetter<PublicScrollViewInstance>,
-}): React.Node {
-  return <ScrollView {...props} scrollViewRef={ref} />;
-}
+const Wrapper = React.forwardRef(function Wrapper(
+  props: Props,
+  ref: ?React.RefSetter<PublicScrollViewInstance>,
+): React.Node {
+  return ref == null ? (
+    <ScrollView {...props} />
+  ) : (
+    <ScrollView {...props} scrollViewRef={ref} />
+  );
+});
 Wrapper.displayName = 'ScrollView';
+// $FlowExpectedError[prop-missing]
 Wrapper.Context = ScrollViewContext;
 
 module.exports = ((Wrapper: $FlowFixMe): React.AbstractComponent<

packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -160,6 +160,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           snapToInterval: true,
           snapToOffsets: true,
           snapToStart: true,
+          verticalScrollIndicatorInsets: {
+            diff: require('../../Utilities/differ/insetsDiffer'),
+          },
           zoomScale: true,
           ...ConditionallyIgnoredEventHandlers({
             onScrollBeginDrag: true,

packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -85,8 +85,15 @@ const RCTTextInputViewConfig = {
     topContentSizeChange: {
       registrationName: 'onContentSizeChange',
     },
+    topChangeSync: {
+      registrationName: 'onChangeSync',
+    },
+    topKeyPressSync: {
+      registrationName: 'onKeyPressSync',
+    },
   },
   validAttributes: {
+    dynamicTypeRamp: true,
     fontSize: true,
     fontWeight: true,
     fontVariant: true,
@@ -97,6 +104,7 @@ const RCTTextInputViewConfig = {
     textTransform: true,
     textAlign: true,
     fontFamily: true,
+    lineBreakModeIOS: true,
     lineHeight: true,
     isHighlighted: true,
     writingDirection: true,
@@ -150,6 +158,8 @@ const RCTTextInputViewConfig = {
       onSelectionChange: true,
       onContentSizeChange: true,
       onScroll: true,
+      onChangeSync: true,
+      onKeyPressSync: true,
     }),
   },
 };

packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -120,7 +120,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Filter
    */
-  experimental_filter: {process: processFilter},
+  filter: {process: processFilter},
 
   /**
    * MixBlendMode
@@ -135,7 +135,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /*
    * BoxShadow
    */
-  experimental_boxShadow: {process: processBoxShadow},
+  boxShadow: {process: processBoxShadow},
 
   /**
    * Linear Gradient

packages/react-native/Libraries/Core/ReactNativeVersion.js

@@ -14,9 +14,9 @@ const version: $ReadOnly<{
   patch: number,
   prerelease: string | null,
 }> = {
-  major: 1000,
-  minor: 0,
-  patch: 0,
+  major: 0,
+  minor: 76,
+  patch: 4,
   prerelease: null,
 };
 

packages/react-native/Libraries/Core/setUpDeveloperTools.js

@@ -42,9 +42,13 @@ if (__DEV__) {
   if (!Platform.isTesting) {
     const HMRClient = require('../Utilities/HMRClient');
 
+    // [0.76 only] When under React Native DevTools, log "JavaScript logs will
+    // be removed from Metro..." warning, and continue to forward logs.
     if (global.__FUSEBOX_HAS_FULL_CONSOLE_SUPPORT__) {
       HMRClient.unstable_notifyFuseboxConsoleEnabled();
-    } else if (console._isPolyfilled) {
+    }
+
+    if (console._isPolyfilled) {
       // We assume full control over the console and send JavaScript logs to Metro.
       [
         'trace',

packages/react-native/Libraries/Core/setUpErrorHandling.js

@@ -21,13 +21,7 @@ ExceptionsManager.installConsoleErrorReporter();
 if (!global.__fbDisableExceptionsManager) {
   const handleError = (e: mixed, isFatal: boolean) => {
     try {
-      // TODO(T196834299): We should really use a c++ turbomodule for this
-      if (
-        !global.RN$handleException ||
-        !global.RN$handleException(e, isFatal)
-      ) {
-        ExceptionsManager.handleException(e, isFatal);
-      }
+      ExceptionsManager.handleException(e, isFatal);
     } catch (ee) {
       console.log('Failed to print error: ', ee.message);
       throw e;

packages/react-native/Libraries/LogBox/Data/LogBoxData.js

@@ -82,9 +82,9 @@ let warningFilter: WarningFilter = function (format) {
   return {
     finalFormat: format,
     forceDialogImmediately: false,
-    suppressDialog_LEGACY: true,
+    suppressDialog_LEGACY: false,
     suppressCompletely: false,
-    monitorEvent: 'unknown',
+    monitorEvent: 'warning_unhandled',
     monitorListVersion: 0,
     monitorSampleRate: 1,
   };

packages/react-native/Libraries/LogBox/__tests__/LogBox-integration-test.js

@@ -11,45 +11,29 @@
 import {
   DoesNotUseKey,
   FragmentWithProp,
+  ManualConsoleError,
+  ManualConsoleErrorWithStack,
 } from './__fixtures__/ReactWarningFixtures';
 import * as React from 'react';
 
 const LogBoxData = require('../Data/LogBoxData');
 const TestRenderer = require('react-test-renderer');
 
-const installLogBox = () => {
-  const LogBox = require('../LogBox');
+const ExceptionsManager = require('../../Core/ExceptionsManager.js');
 
+const installLogBox = () => {
+  const LogBox = require('../LogBox').default;
   LogBox.install();
 };
 
 const uninstallLogBox = () => {
-  const LogBox = require('../LogBox');
+  const LogBox = require('../LogBox').default;
   LogBox.uninstall();
 };
 
-const BEFORE_SLASH_RE = /(?:\/[a-zA-Z]+\/)(.+?)(?:\/.+)\//;
-
-const cleanPath = message => {
-  return message.replace(BEFORE_SLASH_RE, '/path/to/');
-};
-
-const cleanLog = logs => {
-  return logs.map(log => {
-    return {
-      ...log,
-      componentStack: log.componentStack.map(stack => ({
-        ...stack,
-        fileName: cleanPath(stack.fileName),
-      })),
-    };
-  });
-};
-
-// TODO(T71117418): Re-enable skipped LogBox integration tests once React component
-// stack frames are the same internally and in open source.
-// eslint-disable-next-line jest/no-disabled-tests
-describe.skip('LogBox', () => {
+// TODO: we can remove all the symetric matchers once OSS lands component stack frames.
+// For now, the component stack parsing differs in ways we can't easily detect in this test.
+describe('LogBox', () => {
   const {error, warn} = console;
   const mockError = jest.fn();
   const mockWarn = jest.fn();
@@ -57,10 +41,14 @@ describe.skip('LogBox', () => {
   beforeEach(() => {
     jest.resetModules();
     jest.restoreAllMocks();
+    jest.spyOn(console, 'error').mockImplementation(() => {});
 
     mockError.mockClear();
     mockWarn.mockClear();
-
+    // Reset ExceptionManager patching.
+    if (console._errorOriginal) {
+      console._errorOriginal = null;
+    }
     (console: any).error = mockError;
     (console: any).warn = mockWarn;
   });
@@ -79,7 +67,10 @@ describe.skip('LogBox', () => {
     // so we can assert on what React logs.
     jest.spyOn(console, 'error');
 
-    const output = TestRenderer.create(<DoesNotUseKey />);
+    let output;
+    TestRenderer.act(() => {
+      output = TestRenderer.create(<DoesNotUseKey />);
+    });
 
     // The key error should always be the highest severity.
     // In LogBox, we expect these errors to:
@@ -88,16 +79,37 @@ describe.skip('LogBox', () => {
     //   - Pass to console.error, with a "Warning" prefix so it does not pop a RedBox.
     expect(output).toBeDefined();
     expect(mockWarn).not.toBeCalled();
-    expect(console.error.mock.calls[0].map(cleanPath)).toMatchSnapshot(
-      'Log sent from React',
-    );
-    expect(cleanLog(spy.mock.calls[0])).toMatchSnapshot('Log added to LogBox');
-    expect(mockError.mock.calls[0].map(cleanPath)).toMatchSnapshot(
-      'Log passed to console error',
-    );
+    expect(console.error).toBeCalledTimes(1);
+    expect(console.error.mock.calls[0]).toEqual([
+      'Warning: Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.%s',
+      '\n\nCheck the render method of `DoesNotUseKey`.',
+      '',
+      expect.stringMatching('at DoesNotUseKey'),
+    ]);
+    expect(spy).toHaveBeenCalledWith({
+      level: 'error',
+      category: expect.stringContaining(
+        'Warning: Each child in a list should have a unique',
+      ),
+      componentStack: expect.anything(),
+      componentStackType: 'stack',
+      message: {
+        content:
+          'Warning: Each child in a list should have a unique "key" prop.\n\nCheck the render method of `DoesNotUseKey`. See https://reactjs.org/link/warning-keys for more information.',
+        substitutions: [
+          {length: 45, offset: 62},
+          {length: 0, offset: 107},
+        ],
+      },
+    });
 
     // The Warning: prefix is added due to a hack in LogBox to prevent double logging.
-    expect(mockError.mock.calls[0][0].startsWith('Warning: ')).toBe(true);
+    // We also interpolate the string before passing to the underlying console method.
+    expect(mockError.mock.calls[0]).toEqual([
+      expect.stringMatching(
+        'Warning: Each child in a list should have a unique "key" prop.\n\nCheck the render method of `DoesNotUseKey`. See https://reactjs.org/link/warning-keys for more information.\n    at ',
+      ),
+    ]);
   });
 
   it('integrates with React and handles a fragment warning in LogBox', () => {
@@ -108,7 +120,10 @@ describe.skip('LogBox', () => {
     // so we can assert on what React logs.
     jest.spyOn(console, 'error');
 
-    const output = TestRenderer.create(<FragmentWithProp />);
+    let output;
+    TestRenderer.act(() => {
+      output = TestRenderer.create(<FragmentWithProp />);
+    });
 
     // The fragment warning is not as severe. For this warning we don't want to
     // pop open a dialog, so we show a collapsed error UI.
@@ -118,15 +133,125 @@ describe.skip('LogBox', () => {
     //   - Pass to console.error, with a "Warning" prefix so it does not pop a RedBox.
     expect(output).toBeDefined();
     expect(mockWarn).not.toBeCalled();
-    expect(console.error.mock.calls[0].map(cleanPath)).toMatchSnapshot(
-      'Log sent from React',
-    );
-    expect(cleanLog(spy.mock.calls[0])).toMatchSnapshot('Log added to LogBox');
-    expect(mockError.mock.calls[0].map(cleanPath)).toMatchSnapshot(
-      'Log passed to console error',
-    );
+    expect(console.error).toBeCalledTimes(1);
+    expect(console.error.mock.calls[0]).toEqual([
+      'Warning: Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.%s',
+      'invalid',
+      expect.stringMatching('at FragmentWithProp'),
+    ]);
+    expect(spy).toHaveBeenCalledWith({
+      level: 'error',
+      category: expect.stringContaining('Warning: Invalid prop'),
+      componentStack: expect.anything(),
+      componentStackType: expect.stringMatching(/(stack|legacy)/),
+      message: {
+        content:
+          'Warning: Invalid prop `invalid` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.',
+        substitutions: [{length: 7, offset: 23}],
+      },
+    });
 
     // The Warning: prefix is added due to a hack in LogBox to prevent double logging.
-    expect(mockError.mock.calls[0][0].startsWith('Warning: ')).toBe(true);
+    // We also interpolate the string before passing to the underlying console method.
+    expect(mockError.mock.calls[0]).toEqual([
+      expect.stringMatching(
+        'Warning: Invalid prop `invalid` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.\n    at FragmentWithProp',
+      ),
+    ]);
+  });
+
+  it('handles a manual console.error without a component stack in LogBox', () => {
+    const LogBox = require('../LogBox').default;
+    const spy = jest.spyOn(LogBox, 'addException');
+    installLogBox();
+
+    // console.error handling depends on installing the ExceptionsManager error reporter.
+    ExceptionsManager.installConsoleErrorReporter();
+
+    // Spy console.error after LogBox is installed
+    // so we can assert on what React logs.
+    jest.spyOn(console, 'error');
+
+    let output;
+    TestRenderer.act(() => {
+      output = TestRenderer.create(<ManualConsoleError />);
+    });
+
+    // Manual console errors should show a collapsed error dialog.
+    // When there is no component stack, we expect these errors to:
+    //   - Go to the LogBox patch and fall through to console.error.
+    //   - Get picked up by the ExceptionsManager console.error override.
+    //   - Get passed back to LogBox via addException (non-fatal).
+    expect(output).toBeDefined();
+    expect(mockWarn).not.toBeCalled();
+    expect(spy).toBeCalledTimes(1);
+    expect(console.error).toBeCalledTimes(1);
+    expect(console.error.mock.calls[0]).toEqual(['Manual console error']);
+    expect(spy).toHaveBeenCalledWith({
+      id: 1,
+      isComponentError: false,
+      isFatal: false,
+      name: 'console.error',
+      originalMessage: 'Manual console error',
+      message: 'console.error: Manual console error',
+      extraData: expect.anything(),
+      componentStack: null,
+      stack: expect.anything(),
+    });
+
+    // No Warning: prefix is added due since this is falling through.
+    expect(mockError.mock.calls[0]).toEqual(['Manual console error']);
+  });
+
+  it('handles a manual console.error with a component stack in LogBox', () => {
+    const spy = jest.spyOn(LogBoxData, 'addLog');
+    installLogBox();
+
+    // console.error handling depends on installing the ExceptionsManager error reporter.
+    ExceptionsManager.installConsoleErrorReporter();
+
+    // Spy console.error after LogBox is installed
+    // so we can assert on what React logs.
+    jest.spyOn(console, 'error');
+
+    let output;
+    TestRenderer.act(() => {
+      output = TestRenderer.create(<ManualConsoleErrorWithStack />);
+    });
+
+    // Manual console errors should show a collapsed error dialog.
+    // When there is a component stack, we expect these errors to:
+    //   - Go to the LogBox patch and be detected as a React error.
+    //   - Check the warning filter to see if there is a fiter setting.
+    //   - Call console.error with the parsed error.
+    //   - Get picked up by ExceptionsManager console.error override.
+    //   - Log to console.error.
+    expect(output).toBeDefined();
+    expect(mockWarn).not.toBeCalled();
+    expect(console.error).toBeCalledTimes(1);
+    expect(spy).toBeCalledTimes(1);
+    expect(console.error.mock.calls[0]).toEqual([
+      expect.stringContaining(
+        'Manual console error\n    at ManualConsoleErrorWithStack',
+      ),
+    ]);
+    expect(spy).toHaveBeenCalledWith({
+      level: 'error',
+      category: expect.stringContaining('Warning: Manual console error'),
+      componentStack: expect.anything(),
+      componentStackType: 'stack',
+      message: {
+        content: 'Warning: Manual console error',
+        substitutions: [],
+      },
+    });
+
+    // The Warning: prefix is added due to a hack in LogBox to prevent double logging.
+    // We also interpolate the string before passing to the underlying console method.
+    expect(mockError.mock.calls[0]).toEqual([
+      expect.stringMatching(
+        'Warning: Manual console error\n    at ManualConsoleErrorWithStack',
+      ),
+    ]);
   });
 });

packages/react-native/Libraries/LogBox/__tests__/LogBox-test.js

@@ -13,6 +13,7 @@
 
 const LogBoxData = require('../Data/LogBoxData');
 const LogBox = require('../LogBox').default;
+const ExceptionsManager = require('../../Core/ExceptionsManager.js');
 
 declare var console: any;
 
@@ -34,15 +35,18 @@ describe('LogBox', () => {
 
   beforeEach(() => {
     jest.resetModules();
+    jest.restoreAllMocks();
     console.error = jest.fn();
-    console.log = jest.fn();
     console.warn = jest.fn();
   });
 
   afterEach(() => {
     LogBox.uninstall();
+    // Reset ExceptionManager patching.
+    if (console._errorOriginal) {
+      console._errorOriginal = null;
+    }
     console.error = error;
-    console.log = log;
     console.warn = warn;
   });
 
@@ -95,7 +99,7 @@ describe('LogBox', () => {
   });
 
   it('registers warnings', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
 
     LogBox.install();
 
@@ -105,13 +109,14 @@ describe('LogBox', () => {
   });
 
   it('reports a LogBox exception if we fail to add warnings', () => {
-    jest.mock('../Data/LogBoxData');
-    const mockError = new Error('Simulated error');
+    jest.spyOn(LogBoxData, 'addLog');
+    jest.spyOn(LogBoxData, 'reportLogBoxError');
 
     // Picking a random implementation detail to simulate throwing.
-    (LogBoxData.isMessageIgnored: any).mockImplementation(() => {
+    jest.spyOn(LogBoxData, 'isMessageIgnored').mockImplementation(() => {
       throw mockError;
     });
+    const mockError = new Error('Simulated error');
 
     LogBox.install();
 
@@ -123,7 +128,8 @@ describe('LogBox', () => {
   });
 
   it('only registers errors beginning with "Warning: "', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
 
     LogBox.install();
 
@@ -133,7 +139,8 @@ describe('LogBox', () => {
   });
 
   it('registers react errors with the formatting from filter', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
 
     mockFilterResult({
       finalFormat: 'Custom format',
@@ -157,7 +164,8 @@ describe('LogBox', () => {
   });
 
   it('registers errors with component stack as errors by default', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
 
     mockFilterResult({});
 
@@ -174,7 +182,8 @@ describe('LogBox', () => {
   });
 
   it('registers errors with component stack as errors by default if not found in warning filter', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
 
     mockFilterResult({
       monitorEvent: 'warning_unhandled',
@@ -193,10 +202,12 @@ describe('LogBox', () => {
   });
 
   it('registers errors with component stack with legacy suppression as warning', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
 
     mockFilterResult({
       suppressDialog_LEGACY: true,
+      monitorEvent: 'warning',
     });
 
     LogBox.install();
@@ -211,10 +222,12 @@ describe('LogBox', () => {
   });
 
   it('registers errors with component stack and a forced dialog as fatals', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
 
     mockFilterResult({
       forceDialogImmediately: true,
+      monitorEvent: 'warning',
     });
 
     LogBox.install();
@@ -229,7 +242,8 @@ describe('LogBox', () => {
   });
 
   it('registers warning module errors with the formatting from filter', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
 
     mockFilterResult({
       finalFormat: 'Custom format',
@@ -248,7 +262,8 @@ describe('LogBox', () => {
   });
 
   it('registers warning module errors as errors by default', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
 
     mockFilterResult({});
 
@@ -262,10 +277,12 @@ describe('LogBox', () => {
   });
 
   it('registers warning module errors with only legacy suppression as warning', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
 
     mockFilterResult({
       suppressDialog_LEGACY: true,
+      monitorEvent: 'warning',
     });
 
     LogBox.install();
@@ -277,10 +294,12 @@ describe('LogBox', () => {
   });
 
   it('registers warning module errors with a forced dialog as fatals', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
 
     mockFilterResult({
       forceDialogImmediately: true,
+      monitorEvent: 'warning',
     });
 
     LogBox.install();
@@ -292,10 +311,12 @@ describe('LogBox', () => {
   });
 
   it('ignores warning module errors that are suppressed completely', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
 
     mockFilterResult({
       suppressCompletely: true,
+      monitorEvent: 'warning',
     });
 
     LogBox.install();
@@ -305,10 +326,11 @@ describe('LogBox', () => {
   });
 
   it('ignores warning module errors that are pattern ignored', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
+    jest.spyOn(LogBoxData, 'isMessageIgnored').mockReturnValue(true);
+    jest.spyOn(LogBoxData, 'addLog');
 
     mockFilterResult({});
-    (LogBoxData.isMessageIgnored: any).mockReturnValue(true);
 
     LogBox.install();
 
@@ -317,10 +339,11 @@ describe('LogBox', () => {
   });
 
   it('ignores warning module errors that are from LogBox itself', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
+    jest.spyOn(LogBoxData, 'isLogBoxErrorMessage').mockReturnValue(true);
+    jest.spyOn(LogBoxData, 'addLog');
 
     mockFilterResult({});
-    (LogBoxData.isLogBoxErrorMessage: any).mockReturnValue(true);
 
     LogBox.install();
 
@@ -329,8 +352,9 @@ describe('LogBox', () => {
   });
 
   it('ignores logs that are pattern ignored"', () => {
-    jest.mock('../Data/LogBoxData');
-    (LogBoxData.isMessageIgnored: any).mockReturnValue(true);
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
+    jest.spyOn(LogBoxData, 'isMessageIgnored').mockReturnValue(true);
+    jest.spyOn(LogBoxData, 'addLog');
 
     LogBox.install();
 
@@ -339,8 +363,8 @@ describe('LogBox', () => {
   });
 
   it('does not add logs that are from LogBox itself"', () => {
-    jest.mock('../Data/LogBoxData');
-    (LogBoxData.isLogBoxErrorMessage: any).mockReturnValue(true);
+    jest.spyOn(LogBoxData, 'isLogBoxErrorMessage').mockReturnValue(true);
+    jest.spyOn(LogBoxData, 'addLog');
 
     LogBox.install();
 
@@ -349,7 +373,7 @@ describe('LogBox', () => {
   });
 
   it('ignores logs starting with "(ADVICE)"', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
 
     LogBox.install();
 
@@ -358,7 +382,7 @@ describe('LogBox', () => {
   });
 
   it('does not ignore logs formatted to start with "(ADVICE)"', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
 
     LogBox.install();
 
@@ -376,7 +400,7 @@ describe('LogBox', () => {
   });
 
   it('ignores console methods after uninstalling', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
 
     LogBox.install();
     LogBox.uninstall();
@@ -389,7 +413,7 @@ describe('LogBox', () => {
   });
 
   it('does not add logs after uninstalling', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addLog');
 
     LogBox.install();
     LogBox.uninstall();
@@ -406,7 +430,7 @@ describe('LogBox', () => {
   });
 
   it('does not add exceptions after uninstalling', () => {
-    jest.mock('../Data/LogBoxData');
+    jest.spyOn(LogBoxData, 'addException');
 
     LogBox.install();
     LogBox.uninstall();
@@ -482,4 +506,80 @@ describe('LogBox', () => {
       'Custom: after installing for the second time',
     );
   });
+
+  it('registers errors with component stack as errors by default, when ExceptionManager is registered first', () => {
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
+    jest.spyOn(LogBoxData, 'addLog');
+
+    ExceptionsManager.installConsoleErrorReporter();
+    LogBox.install();
+
+    console.error(
+      'HIT\n    at Text (/path/to/Component:30:175)\n    at DoesNotUseKey',
+    );
+
+    expect(LogBoxData.addLog).toBeCalledWith(
+      expect.objectContaining({level: 'error'}),
+    );
+    expect(LogBoxData.checkWarningFilter).toBeCalledWith(
+      'HIT\n    at Text (/path/to/Component:30:175)\n    at DoesNotUseKey',
+    );
+  });
+
+  it('registers errors with component stack as errors by default, when ExceptionManager is registered second', () => {
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
+    jest.spyOn(LogBoxData, 'addLog');
+
+    LogBox.install();
+    ExceptionsManager.installConsoleErrorReporter();
+
+    console.error(
+      'HIT\n    at Text (/path/to/Component:30:175)\n    at DoesNotUseKey',
+    );
+
+    expect(LogBoxData.addLog).toBeCalledWith(
+      expect.objectContaining({level: 'error'}),
+    );
+    expect(LogBoxData.checkWarningFilter).toBeCalledWith(
+      'HIT\n    at Text (/path/to/Component:30:175)\n    at DoesNotUseKey',
+    );
+  });
+
+  it('registers errors without component stack as errors by default, when ExceptionManager is registered first', () => {
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
+    jest.spyOn(LogBoxData, 'addException');
+
+    ExceptionsManager.installConsoleErrorReporter();
+    LogBox.install();
+
+    console.error('HIT');
+
+    // Errors without a component stack skip the warning filter and
+    // fall through to the ExceptionManager, which are then reported
+    // back to LogBox as non-fatal exceptions, in a convuluted dance
+    // in the most legacy cruft way.
+    expect(LogBoxData.addException).toBeCalledWith(
+      expect.objectContaining({originalMessage: 'HIT'}),
+    );
+    expect(LogBoxData.checkWarningFilter).not.toBeCalled();
+  });
+
+  it('registers errors without component stack as errors by default, when ExceptionManager is registered second', () => {
+    jest.spyOn(LogBoxData, 'checkWarningFilter');
+    jest.spyOn(LogBoxData, 'addException');
+
+    LogBox.install();
+    ExceptionsManager.installConsoleErrorReporter();
+
+    console.error('HIT');
+
+    // Errors without a component stack skip the warning filter and
+    // fall through to the ExceptionManager, which are then reported
+    // back to LogBox as non-fatal exceptions, in a convuluted dance
+    // in the most legacy cruft way.
+    expect(LogBoxData.addException).toBeCalledWith(
+      expect.objectContaining({originalMessage: 'HIT'}),
+    );
+    expect(LogBoxData.checkWarningFilter).not.toBeCalled();
+  });
 });

packages/react-native/Libraries/LogBox/__tests__/__fixtures__/ReactWarningFixtures.js

@@ -30,3 +30,27 @@ export const FragmentWithProp = () => {
     </React.Fragment>
   );
 };
+
+export const ManualConsoleError = () => {
+  console.error('Manual console error');
+  return (
+    <React.Fragment>
+      {['foo', 'bar'].map(item => (
+        <Text key={item}>{item}</Text>
+      ))}
+    </React.Fragment>
+  );
+};
+
+export const ManualConsoleErrorWithStack = () => {
+  console.error(
+    'Manual console error\n    at ManualConsoleErrorWithStack (/path/to/ManualConsoleErrorWithStack:30:175)\n    at TestApp',
+  );
+  return (
+    <React.Fragment>
+      {['foo', 'bar'].map(item => (
+        <Text key={item}>{item}</Text>
+      ))}
+    </React.Fragment>
+  );
+};

packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -169,10 +169,10 @@ const validAttributesForNonEventProps = {
   experimental_backgroundImage: {
     process: require('../StyleSheet/processBackgroundImage').default,
   },
-  experimental_boxShadow: {
+  boxShadow: {
     process: require('../StyleSheet/processBoxShadow').default,
   },
-  experimental_filter: {
+  filter: {
     process: require('../StyleSheet/processFilter').default,
   },
   experimental_mixBlendMode: true,

packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -198,6 +198,7 @@ const validAttributesForNonEventProps = {
   testID: true,
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   backfaceVisibility: true,
+  cursor: true,
   opacity: true,
   shadowColor: {process: require('../StyleSheet/processColor').default},
   shadowOffset: {diff: require('../Utilities/differ/sizesDiffer')},
@@ -216,16 +217,18 @@ const validAttributesForNonEventProps = {
   role: true,
   borderRadius: true,
   borderColor: {process: require('../StyleSheet/processColor').default},
+  borderBlockColor: {process: require('../StyleSheet/processColor').default},
   borderCurve: true,
   borderWidth: true,
+  borderBlockWidth: true,
   borderStyle: true,
   hitSlop: {diff: require('../Utilities/differ/insetsDiffer')},
   collapsable: true,
   collapsableChildren: true,
-  experimental_filter: {
+  filter: {
     process: require('../StyleSheet/processFilter').default,
   },
-  experimental_boxShadow: {
+  boxShadow: {
     process: require('../StyleSheet/processBoxShadow').default,
   },
   experimental_mixBlendMode: true,
@@ -240,9 +243,15 @@ const validAttributesForNonEventProps = {
   borderLeftWidth: true,
   borderLeftColor: {process: require('../StyleSheet/processColor').default},
   borderStartWidth: true,
+  borderBlockStartWidth: true,
   borderStartColor: {process: require('../StyleSheet/processColor').default},
+  borderBlockStartColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
   borderEndWidth: true,
+  borderBlockEndWidth: true,
   borderEndColor: {process: require('../StyleSheet/processColor').default},
+  borderBlockEndColor: {process: require('../StyleSheet/processColor').default},
 
   borderTopLeftRadius: true,
   borderTopRightRadius: true,

packages/react-native/Libraries/ReactNative/AppRegistry.js

@@ -13,7 +13,7 @@ import type {RootTag} from '../Types/RootTagTypes';
 import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 import type {DisplayModeType} from './DisplayMode';
 
-import BatchedBridge from '../BatchedBridge/BatchedBridge';
+import registerCallableModule from '../Core/registerCallableModule';
 import BugReporting from '../BugReporting/BugReporting';
 import createPerformanceLogger from '../Utilities/createPerformanceLogger';
 import infoLog from '../Utilities/infoLog';
@@ -363,8 +363,8 @@ global.RN$SurfaceRegistry = {
 
 if (global.RN$Bridgeless === true) {
   console.log('Bridgeless mode is enabled');
-} else {
-  BatchedBridge.registerCallableModule('AppRegistry', AppRegistry);
 }
 
+registerCallableModule('AppRegistry', AppRegistry);
+
 module.exports = AppRegistry;

packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js

@@ -188,6 +188,10 @@ function getProcessorForType(typeName: string): ?(nextProp: any) => any {
     case 'UIImage':
     case 'RCTImageSource':
       return resolveAssetSource;
+    case 'BoxShadowArray':
+      return processBoxShadow;
+    case 'FilterArray':
+      return processFilter;
     // Android Types
     case 'Color':
       return processColor;