community-cli-plugin: resolve cli-server-api via peer dependency on cli

Changelog: [Internal]

.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 }}

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",
+    "update-lock": "npx yarn-deduplicate"
-    "postinstall": "cd packages/react-native-codegen && yarn build"
   },
   "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-babel-transformer": "0.76.0-rc.4",
-    "@react-native/metro-config": "0.76.0-main",
+    "@react-native/metro-config": "0.76.0-rc.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-babel-register": "^0.81.0-alpha.2",
-    "metro-memory-fs": "^0.80.10",
+    "metro-memory-fs": "^0.81.0-alpha.2",
     "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": "18.3.1",
-    "react-test-renderer": "19.0.0-rc-fb9a90fa48-20240614",
+    "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.0-rc.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.0-rc.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.0-rc.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.0-rc.4",
   "description": "Core CLI commands for React Native",
   "keywords": [
     "react-native",
@@ -22,24 +22,25 @@
     "dist"
   ],
   "dependencies": {
-    "@react-native/dev-middleware": "0.76.0-main",
+    "@react-native/dev-middleware": "0.76.0-rc.4",
-    "@react-native/metro-babel-transformer": "0.76.0-main",
+    "@react-native/metro-babel-transformer": "0.76.0-rc.4",
     "chalk": "^4.0.0",
     "execa": "^5.1.1",
-    "metro": "^0.80.10",
+    "invariant": "^2.2.4",
-    "metro-config": "^0.80.10",
+    "metro": "^0.81.0-alpha.2",
-    "metro-core": "^0.80.10",
+    "metro-config": "^0.81.0-alpha.2",
+    "metro-core": "^0.81.0-alpha.2",
     "node-fetch": "^2.2.0",
     "readline": "^1.3.0"
   },
   "devDependencies": {
-    "metro-resolver": "^0.80.10"
+    "metro-resolver": "^0.81.0-alpha.2"
   },
   "peerDependencies": {
-    "@react-native-community/cli-server-api": "*"
+    "@react-native-community/cli": "*"
   },
   "peerDependenciesMeta": {
-    "@react-native-community/cli-server-api": {
+    "@react-native-community/cli": {
       "optional": true
     }
   },

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) => {
+  const reload = throttle(() => {
-    switch (key.toLowerCase()) {
+    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)...');
+        reload();
-        messageSocket.broadcast('reload', null);
         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
+        // eslint-disable-next-line no-void
-        await fetch(devServerUrl + '/open-debugger', {method: 'POST'});
+        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/middleware.js

@@ -12,6 +12,8 @@
 import type {NextHandleFunction, Server} from 'connect';
 import type {TerminalReportableEvent} from 'metro/src/lib/TerminalReporter';
 
+import typeof * as CLIServerAPI from '@react-native-community/cli-server-api';
+
 import {logger} from '../../utils/logger';
 
 type MiddlewareReturn = {
@@ -65,11 +67,26 @@ const communityMiddlewareFallback = {
 // Attempt to use the community middleware if it exists, but fallback to
 // the stubs if it doesn't.
 try {
-  const community = require('@react-native-community/cli-server-api');
+  // `@react-native-community/cli` is an optional peer dependency of this
-  communityMiddlewareFallback.indexPageMiddleware =
+  // package, and should be a dev dependency of the host project (via the
-    community.indexPageMiddleware;
+  // community template's package.json).
+  const communityCliPath = require.resolve('@react-native-community/cli');
+
+  // `@react-native-community/cli-server-api` is a dependency of
+  // `@react-native-community/cli`, but is not re-exported by it, so we need
+  // to resolve the former through the latter.
+  const communityCliServerApiPath = require.resolve(
+    '@react-native-community/cli-server-api',
+    {paths: [communityCliPath]},
+  );
+  // $FlowIgnore[unsupported-syntax] dynamic import
+  const communityCliServerApi: CLIServerAPI = require(
+    communityCliServerApiPath,
+  );
   communityMiddlewareFallback.createDevServerMiddleware =
-    community.createDevServerMiddleware;
+    communityCliServerApi.createDevServerMiddleware;
+  communityMiddlewareFallback.indexPageMiddleware =
+    communityCliServerApi.indexPageMiddleware;
 } catch {
   logger.debug(`⚠️ Unable to find @react-native-community/cli-server-api
 Starting the server without the community middleware.`);

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.0-rc.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>>
+@generated SignedSource<<2ae3cc4cc779b7d9b387f7d8ba402248>>
-Git revision: a556d261a5e2131864f4e38ded62d8f90e81c39a
+Git revision: ce5d32a14f18a8fc4bdaf787eb46800b7f73e524
 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.0-rc.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.0-rc.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.0-rc.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/index.js

@@ -39,7 +39,7 @@ module.exports = {
   overrides: [
     {
       files: ['*.js'],
-      parser: '@babel/eslint-parser',
+      parser: 'hermes-eslint',
       plugins: ['ft-flow'],
       rules: {
         // Flow Plugin
@@ -51,7 +51,7 @@ module.exports = {
     },
     {
       files: ['*.jsx'],
-      parser: '@babel/eslint-parser',
+      parser: 'hermes-eslint',
     },
     {
       files: ['*.ts', '*.tsx'],

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

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/eslint-config",
-  "version": "0.76.0-main",
+  "version": "0.76.0-rc.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.0-rc.4",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
     "eslint-config-prettier": "^8.5.0",
@@ -31,7 +31,8 @@
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-native": "^4.0.0"
+    "eslint-plugin-react-native": "^4.0.0",
+    "hermes-eslint": "^0.23.1"
   },
   "peerDependencies": {
     "eslint": ">=8",

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.0-rc.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.0-rc.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.0-rc.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/gradle-plugin",
-  "version": "0.76.0-main",
+  "version": "0.76.0-rc.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

@@ -166,6 +166,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

@@ -115,6 +115,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,6 +141,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)
+      
       add_subdirectory(./a/directory/ aPackage_autolinked_build)
       add_subdirectory(./another/directory/ anotherPackage_autolinked_build)
       add_subdirectory(./another/directory/cxx/ anotherPackage_cxxmodule_autolinked_build)

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 {
+      input.bufferedReader().use { reader ->
-        runCatching { gsonConverter.fromJson(it, ModelAutolinkingConfigJson::class.java) }
+        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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "helloworld",
-  "version": "0.76.0-main",
+  "version": "0.76.0-rc.4",
   "private": true,
   "scripts": {
     "bootstrap": "node ./cli.js bootstrap",
@@ -12,24 +12,24 @@
     "test": "jest"
   },
   "dependencies": {
-    "react": "19.0.0-rc-fb9a90fa48-20240614",
+    "react": "18.3.1",
-    "react-native": "1000.0.0"
+    "react-native": "0.76.0-rc.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/babel-preset": "0.76.0-rc.4",
-    "@react-native/core-cli-utils": "0.76.0-main",
+    "@react-native/core-cli-utils": "0.76.0-rc.4",
-    "@react-native/eslint-config": "0.76.0-main",
+    "@react-native/eslint-config": "0.76.0-rc.4",
-    "@react-native/metro-config": "0.76.0-main",
+    "@react-native/metro-config": "0.76.0-rc.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.0-rc.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.0-rc.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/js-polyfills": "0.76.0-rc.4",
-    "@react-native/metro-babel-transformer": "0.76.0-main",
+    "@react-native/metro-babel-transformer": "0.76.0-rc.4",
-    "metro-config": "^0.80.10",
+    "metro-config": "^0.81.0-alpha.2",
-    "metro-runtime": "^0.80.10"
+    "metro-runtime": "^0.81.0-alpha.2"
   }
 }

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(

packages/normalize-color/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/normalize-colors",
-  "version": "0.76.0-main",
+  "version": "0.76.0-rc.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.0-rc.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.0-rc.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.0-rc.4",
+    "babel-plugin-syntax-hermes-parser": "^0.23.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')],
   [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.0-rc.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.0-rc.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.0-rc.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.0-rc.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.0-rc.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.0-rc.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.0-rc.4",
   "main": "build/index.js",
   "license": "MIT",
   "private": true,

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.0-rc.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.0-rc.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.0-rc.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/babel-preset": "0.76.0-rc.4",
-    "react-native": "1000.0.0"
+    "react-native": "0.76.0-rc.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.0-rc.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,28 @@
   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;
+  _window.rootViewController = rootViewController;
-  self.window.windowScene.delegate = self;
+  [_window makeKeyAndVisible];
-  [self.window makeKeyAndVisible];
-
-  return YES;
 }
 
 - (void)applicationDidEnterBackground:(UIApplication *)application
@@ -261,19 +275,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 +296,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
+- (instancetype)initWithTurboModuleDelegate:(id<RCTTurboModuleManagerDelegate>)turboModuleManagerDelegate
-        andTurboModuleManagerDelegate:(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/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,%@",
+      NSString *text = [NSString
-                                                  type != nil && [type length] > 0 ? type : @"application/octet-stream",
+          stringWithFormat:@"data:%@;base64,%@",
-                                                  [data base64EncodedStringWithOptions:0]];
+                           ![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({
+const Wrapper = React.forwardRef(function Wrapper(
-  ref,
+  props: Props,
-  ...props
+  ref: ?React.RefSetter<PublicScrollViewInstance>,
-}: {
+): React.Node {
-  ...Props,
+  return ref == null ? (
-  ref: React.RefSetter<PublicScrollViewInstance>,
+    <ScrollView {...props} />
-}): React.Node {
+  ) : (
-  return <ScrollView {...props} scrollViewRef={ref} />;
+    <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,10 +14,10 @@ const version: $ReadOnly<{
   patch: number,
   prerelease: string | null,
 }> = {
-  major: 1000,
+  major: 0,
-  minor: 0,
+  minor: 76,
   patch: 0,
-  prerelease: null,
+  prerelease: 'rc.4',
 };
 
 module.exports = {version};

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/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/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;

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -110,11 +110,102 @@ export interface FlexStyle {
   top?: DimensionValue | undefined;
   width?: DimensionValue | undefined;
   zIndex?: number | undefined;
+  direction?: 'inherit' | 'ltr' | 'rtl' | undefined;
 
   /**
-   * @platform ios
+   * Equivalent to `top`, `bottom`, `right` and `left`
    */
-  direction?: 'inherit' | 'ltr' | 'rtl' | undefined;
+  inset?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `top`, `bottom`
+   */
+  insetBlock?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `bottom`
+   */
+  insetBlockEnd?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `top`
+   */
+  insetBlockStart?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `right` and `left`
+   */
+  insetInline?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `right` or `left`
+   */
+  insetInlineEnd?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `right` or `left`
+   */
+  insetInlineStart?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `marginVertical`
+   */
+  marginBlock?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `marginBottom`
+   */
+  marginBlockEnd?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `marginTop`
+   */
+  marginBlockStart?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `marginHorizontal`
+   */
+  marginInline?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `marginEnd`
+   */
+  marginInlineEnd?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `marginStart`
+   */
+  marginInlineStart?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `paddingVertical`
+   */
+  paddingBlock?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `paddingBottom`
+   */
+  paddingBlockEnd?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `paddingTop`
+   */
+  paddingBlockStart?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `paddingHorizontal`
+   */
+  paddingInline?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `paddingEnd`
+   */
+  paddingInlineEnd?: DimensionValue | undefined;
+
+  /**
+   * Equivalent to `paddingStart`
+   */
+  paddingInlineStart?: DimensionValue | undefined;
 }
 
 export interface ShadowStyleIOS {
@@ -239,16 +330,16 @@ export type FilterFunction =
   | {opacity: number | string}
   | {saturate: number | string}
   | {sepia: number | string}
-  | {dropShadow: DropShadowPrimitive | string};
+  | {dropShadow: DropShadowValue | string};
 
-export type DropShadowPrimitive = {
+export type DropShadowValue = {
   offsetX: number | string;
   offsetY: number | string;
   standardDeviation?: number | string | undefined;
   color?: ColorValue | number | undefined;
 };
 
-export type BoxShadowPrimitive = {
+export type BoxShadowValue = {
   offsetX: number | string;
   offsetY: number | string;
   color?: string | undefined;
@@ -336,6 +427,8 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;
   isolation?: 'auto' | 'isolate' | undefined;
   cursor?: CursorValue | undefined;
+  boxShadow?: ReadonlyArray<BoxShadowValue> | string | undefined;
+  filter?: ReadonlyArray<FilterFunction> | string | undefined;
 }
 
 export type FontVariant =

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js

@@ -700,9 +700,9 @@ export type FilterFunction =
   | {opacity: number | string}
   | {saturate: number | string}
   | {sepia: number | string}
-  | {dropShadow: DropShadowPrimitive | string};
+  | {dropShadow: DropShadowValue | string};
 
-export type DropShadowPrimitive = {
+export type DropShadowValue = {
   offsetX: number | string,
   offsetY: number | string,
   standardDeviation?: number | string,
@@ -719,7 +719,7 @@ export type GradientValue = {
   }>,
 };
 
-export type BoxShadowPrimitive = {
+export type BoxShadowValue = {
   offsetX: number | string,
   offsetY: number | string,
   color?: ____ColorValue_Internal,
@@ -788,8 +788,8 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   elevation?: number,
   pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
   cursor?: CursorValue,
-  experimental_boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
+  boxShadow?: $ReadOnlyArray<BoxShadowValue> | string,
-  experimental_filter?: $ReadOnlyArray<FilterFunction> | string,
+  filter?: $ReadOnlyArray<FilterFunction> | string,
   experimental_mixBlendMode?: ____BlendMode_Internal,
   experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | string,
   isolation?: 'auto' | 'isolate',

packages/react-native/Libraries/StyleSheet/processBoxShadow.js

@@ -10,7 +10,7 @@
  */
 
 import type {ProcessedColorValue} from './processColor';
-import type {BoxShadowPrimitive} from './StyleSheetTypes';
+import type {BoxShadowValue} from './StyleSheetTypes';
 
 import processColor from './processColor';
 
@@ -24,7 +24,7 @@ export type ParsedBoxShadow = {
 };
 
 export default function processBoxShadow(
-  rawBoxShadows: ?($ReadOnlyArray<BoxShadowPrimitive> | string),
+  rawBoxShadows: ?($ReadOnlyArray<BoxShadowValue> | string),
 ): Array<ParsedBoxShadow> {
   const result: Array<ParsedBoxShadow> = [];
   if (rawBoxShadows == null) {
@@ -106,16 +106,14 @@ export default function processBoxShadow(
   return result;
 }
 
-function parseBoxShadowString(
+function parseBoxShadowString(rawBoxShadows: string): Array<BoxShadowValue> {
-  rawBoxShadows: string,
+  let result: Array<BoxShadowValue> = [];
-): Array<BoxShadowPrimitive> {
-  let result: Array<BoxShadowPrimitive> = [];
 
   for (const rawBoxShadow of rawBoxShadows
     .split(/,(?![^()]*\))/) // split by comma that is not in parenthesis
     .map(bS => bS.trim())
     .filter(bS => bS !== '')) {
-    const boxShadow: BoxShadowPrimitive = {
+    const boxShadow: BoxShadowValue = {
       offsetX: 0,
       offsetY: 0,
     };

packages/react-native/Libraries/StyleSheet/processFilter.js

@@ -12,7 +12,7 @@
 'use strict';
 
 import type {ColorValue} from './StyleSheet';
-import type {DropShadowPrimitive, FilterFunction} from './StyleSheetTypes';
+import type {DropShadowValue, FilterFunction} from './StyleSheetTypes';
 
 import processColor from './processColor';
 
@@ -179,7 +179,7 @@ function _getFilterAmount(filterName: string, filterArgs: mixed): ?number {
 }
 
 function parseDropShadow(
-  rawDropShadow: string | DropShadowPrimitive,
+  rawDropShadow: string | DropShadowValue,
 ): ?ParsedDropShadow {
   const dropShadow =
     typeof rawDropShadow === 'string'
@@ -248,8 +248,8 @@ function parseDropShadow(
   return parsedDropShadow;
 }
 
-function parseDropShadowString(rawDropShadow: string): ?DropShadowPrimitive {
+function parseDropShadowString(rawDropShadow: string): ?DropShadowValue {
-  const dropShadow: DropShadowPrimitive = {
+  const dropShadow: DropShadowValue = {
     offsetX: 0,
     offsetY: 0,
   };

packages/react-native/Libraries/Utilities/HMRClient.js

@@ -153,11 +153,12 @@ const HMRClient: HMRClientNativeInterface = {
         level: 'info',
         data: [
           '\n' +
-            '\x1b[7m' +
+            '\u001B[7m' +
-            ' \x1b[1mJavaScript logs have moved!\x1b[22m They will now appear in the debugger console. ' +
+            ' \u001B[1m💡 JavaScript logs will be removed from Metro in React ' +
-            'Tip: Type \x1b[1mj\x1b[22m in the terminal to open the debugger (requires Google Chrome ' +
+            'Native 0.77!\u001B[22m Please use React Native DevTools as your ' +
-            'or Microsoft Edge).' +
+            'default tool. Tip: Type \u001B[1mj\u001B[22m in the terminal to ' +
-            '\x1b[27m' +
+            'open (requires Google Chrome or Microsoft Edge).' +
+            '\u001B[27m' +
             '\n',
         ],
       }),

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -1749,10 +1749,12 @@ declare class KeyboardAvoidingView extends React.Component<Props, State> {
   viewRef: { current: React.ElementRef<typeof View> | null, ... };
   _initialFrameHeight: number;
   _bottom: number;
+  _windowWidth: number;
   constructor(props: Props): void;
   _relativeKeyboardHeight(keyboardFrame: KeyboardMetrics): Promise<number>;
   _onKeyboardChange: $FlowFixMe;
   _onLayout: $FlowFixMe;
+  _onDimensionsChange: $FlowFixMe;
   _setBottom: $FlowFixMe;
   _updateBottomIfNecessary: $FlowFixMe;
   componentDidUpdate(_: Props, prevState: State): void;
@@ -8232,8 +8234,8 @@ export type FilterFunction =
   | { opacity: number | string }
   | { saturate: number | string }
   | { sepia: number | string }
-  | { dropShadow: DropShadowPrimitive | string };
+  | { dropShadow: DropShadowValue | string };
-export type DropShadowPrimitive = {
+export type DropShadowValue = {
   offsetX: number | string,
   offsetY: number | string,
   standardDeviation?: number | string,
@@ -8247,7 +8249,7 @@ export type GradientValue = {
     positions?: $ReadOnlyArray<string>,
   }>,
 };
-export type BoxShadowPrimitive = {
+export type BoxShadowValue = {
   offsetX: number | string,
   offsetY: number | string,
   color?: ____ColorValue_Internal,
@@ -8314,8 +8316,8 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   elevation?: number,
   pointerEvents?: \\"auto\\" | \\"none\\" | \\"box-none\\" | \\"box-only\\",
   cursor?: CursorValue,
-  experimental_boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
+  boxShadow?: $ReadOnlyArray<BoxShadowValue> | string,
-  experimental_filter?: $ReadOnlyArray<FilterFunction> | string,
+  filter?: $ReadOnlyArray<FilterFunction> | string,
   experimental_mixBlendMode?: ____BlendMode_Internal,
   experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | string,
   isolation?: \\"auto\\" | \\"isolate\\",
@@ -8586,7 +8588,7 @@ exports[`public API should not change unintentionally Libraries/StyleSheet/proce
   inset?: boolean,
 };
 declare export default function processBoxShadow(
-  rawBoxShadows: ?($ReadOnlyArray<BoxShadowPrimitive> | string)
+  rawBoxShadows: ?($ReadOnlyArray<BoxShadowValue> | string)
 ): Array<ParsedBoxShadow>;
 "
 `;

packages/react-native/React/Base/RCTVersion.m

@@ -21,10 +21,10 @@ NSDictionary* RCTGetReactNativeVersion(void)
   static dispatch_once_t onceToken;
   dispatch_once(&onceToken, ^(void){
     __rnVersion = @{
-                  RCTVersionMajor: @(1000),
+                  RCTVersionMajor: @(0),
-                  RCTVersionMinor: @(0),
+                  RCTVersionMinor: @(76),
                   RCTVersionPatch: @(0),
-                  RCTVersionPrerelease: [NSNull null],
+                  RCTVersionPrerelease: @"rc.4",
                   };
   });
   return __rnVersion;

packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.mm

@@ -49,6 +49,11 @@ using namespace facebook::react;
   [_refreshControl addTarget:self
                       action:@selector(handleUIControlEventValueChanged)
             forControlEvents:UIControlEventValueChanged];
+
+  const auto &concreteProps = static_cast<const PullToRefreshViewProps &>(*_props);
+
+  _refreshControl.tintColor = RCTUIColorFromSharedColor(concreteProps.tintColor);
+  [self _updateProgressViewOffset:concreteProps.progressViewOffset];
 }
 
 #pragma mark - RCTComponentViewProtocol
@@ -78,6 +83,14 @@ using namespace facebook::react;
     }
   }
 
+  if (newConcreteProps.tintColor != oldConcreteProps.tintColor) {
+    _refreshControl.tintColor = RCTUIColorFromSharedColor(newConcreteProps.tintColor);
+  }
+
+  if (newConcreteProps.progressViewOffset != oldConcreteProps.progressViewOffset) {
+    [self _updateProgressViewOffset:newConcreteProps.progressViewOffset];
+  }
+
   BOOL needsUpdateTitle = NO;
 
   if (newConcreteProps.title != oldConcreteProps.title) {
@@ -88,11 +101,11 @@ using namespace facebook::react;
     needsUpdateTitle = YES;
   }
 
+  [super updateProps:props oldProps:oldProps];
+
   if (needsUpdateTitle) {
     [self _updateTitle];
   }
-
-  [super updateProps:props oldProps:oldProps];
 }
 
 #pragma mark -
@@ -102,6 +115,15 @@ using namespace facebook::react;
   static_cast<const PullToRefreshViewEventEmitter &>(*_eventEmitter).onRefresh({});
 }
 
+- (void)_updateProgressViewOffset:(Float)progressViewOffset
+{
+  _refreshControl.bounds = CGRectMake(
+      _refreshControl.bounds.origin.x,
+      -progressViewOffset,
+      _refreshControl.bounds.size.width,
+      _refreshControl.bounds.size.height);
+}
+
 - (void)_updateTitle
 {
   const auto &concreteProps = static_cast<const PullToRefreshViewProps &>(*_props);

packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm

@@ -723,6 +723,29 @@ static inline UIViewAnimationOptions animationOptionsWithCurve(UIViewAnimationCu
   [self _handleFinishedScrolling:scrollView];
 }
 
+- (void)didMoveToWindow
+{
+  [super didMoveToWindow];
+
+  if (!self.window) {
+    // The view is being removed, ensure that the scroll end event is dispatched
+    [self _handleScrollEndIfNeeded];
+  }
+}
+
+- (void)_handleScrollEndIfNeeded
+{
+  if (_scrollView.isDecelerating || !_scrollView.isTracking) {
+    if (!_eventEmitter) {
+      return;
+    }
+    static_cast<const ScrollViewEventEmitter &>(*_eventEmitter).onMomentumScrollEnd([self _scrollViewMetrics]);
+
+    [self _updateStateWithContentOffset];
+    _isUserTriggeredScrolling = NO;
+  }
+}
+
 - (void)_handleFinishedScrolling:(UIScrollView *)scrollView
 {
   [self _forceDispatchNextScrollEvent];

packages/react-native/React/Views/RCTBorderDrawing.m

@@ -182,7 +182,7 @@ static CGPathRef RCTPathCreateOuterOutline(BOOL drawToEdge, CGRect rect, RCTCorn
 }
 
 static UIGraphicsImageRenderer *
-RCTUIGraphicsImageRenderer(CGSize size, CGColorRef backgroundColor, BOOL hasCornerRadii, BOOL drawToEdge)
+RCTMakeUIGraphicsImageRenderer(CGSize size, CGColorRef backgroundColor, BOOL hasCornerRadii, BOOL drawToEdge)
 {
   const CGFloat alpha = CGColorGetAlpha(backgroundColor);
   const BOOL opaque = (drawToEdge || !hasCornerRadii) && alpha == 1.0;
@@ -231,7 +231,9 @@ static UIImage *RCTGetSolidBorderImage(
   } : viewSize;
 
   UIGraphicsImageRenderer *const imageRenderer =
-      RCTUIGraphicsImageRenderer(size, backgroundColor, hasCornerRadii, drawToEdge);
+      RCTMakeUIGraphicsImageRenderer(size, backgroundColor, hasCornerRadii, drawToEdge);
+
+  CGColorRetain(backgroundColor);
   UIImage *image = [imageRenderer imageWithActions:^(UIGraphicsImageRendererContext *_Nonnull rendererContext) {
     const CGContextRef context = rendererContext.CGContext;
     const CGRect rect = {.size = size};
@@ -242,6 +244,7 @@ static UIImage *RCTGetSolidBorderImage(
       CGContextAddPath(context, path);
       CGContextFillPath(context);
     }
+    CGColorRelease(backgroundColor);
 
     CGContextAddPath(context, path);
     CGPathRelease(path);
@@ -481,7 +484,7 @@ static UIImage *RCTGetDashedOrDottedBorderImage(
 
   const BOOL hasCornerRadii = RCTCornerRadiiAreAboveThreshold(cornerRadii);
   UIGraphicsImageRenderer *const imageRenderer =
-      RCTUIGraphicsImageRenderer(viewSize, backgroundColor, hasCornerRadii, drawToEdge);
+      RCTMakeUIGraphicsImageRenderer(viewSize, backgroundColor, hasCornerRadii, drawToEdge);
   return [imageRenderer imageWithActions:^(UIGraphicsImageRendererContext *_Nonnull rendererContext) {
     const CGContextRef context = rendererContext.CGContext;
     const CGRect rect = {.size = viewSize};

packages/react-native/React/Views/RCTViewManager.m

@@ -431,18 +431,19 @@ RCT_CUSTOM_VIEW_PROPERTY(experimental_layoutConformance, NSString *, RCTView)
   // filtered by view configs.
 }
 
-RCT_CUSTOM_VIEW_PROPERTY(experimental_filter, NSArray *, RCTView)
+typedef NSArray *FilterArray; // Custom type to make the StaticViewConfigValidator Happy
+RCT_CUSTOM_VIEW_PROPERTY(filter, FilterArray, RCTView)
 {
-  // Property is only to be used in the new renderer.
+  //   Property is only to be used in the new renderer.
-  // It is necessary to add it here, otherwise it gets
+  //   It is necessary to add it here, otherwise it gets
-  // filtered by view configs.
+  //   filtered by view configs.
 }
-
+typedef NSArray *BoxShadowArray; // Custom type to make the StaticViewConfigValidator Happy
-RCT_CUSTOM_VIEW_PROPERTY(experimental_boxShadow, NSArray *, RCTView)
+RCT_CUSTOM_VIEW_PROPERTY(boxShadow, BoxShadowArray, RCTView)
 {
-  // Property is only to be used in the new renderer.
+  //   Property is only to be used in the new renderer.
-  // It is necessary to add it here, otherwise it gets
+  //   It is necessary to add it here, otherwise it gets
-  // filtered by view configs.
+  //   filtered by view configs.
 }
 
 RCT_CUSTOM_VIEW_PROPERTY(experimental_mixBlendMode, NSString *, RCTView)

packages/react-native/React/Views/ScrollView/RCTScrollView.m

@@ -848,6 +848,26 @@ RCT_SCROLL_EVENT_HANDLER(scrollViewDidScrollToTop, onScrollToTop)
   RCT_FORWARD_SCROLL_EVENT(scrollViewDidEndZooming : scrollView withView : view atScale : scale);
 }
 
+- (void)didMoveToWindow
+{
+  [super didMoveToWindow];
+  if (self.window == nil) {
+    // Check if the ScrollView was in motion
+    if (_scrollView.isDecelerating || !_scrollView.isTracking) {
+      // Trigger the onMomentumScrollEnd event manually
+      RCT_SEND_SCROLL_EVENT(onMomentumScrollEnd, nil);
+      // We can't use the RCT_FORWARD_SCROLL_EVENT here beacuse the `_cmd` parameter passed
+      // to `respondsToSelector` is the current method - so it will be `didMoveToWindow` - and not
+      // `scrollViewDidEndDecelerating` that is passed.
+      for (NSObject<UIScrollViewDelegate> *scrollViewListener in _scrollListeners) {
+        if ([scrollViewListener respondsToSelector:@selector(scrollViewDidEndDecelerating:)]) {
+          [scrollViewListener scrollViewDidEndDecelerating:_scrollView];
+        }
+      }
+    }
+  }
+}
+
 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
 {
   // Fire a final scroll event

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -3314,6 +3314,15 @@ public final class com/facebook/react/modules/core/TimingModule : com/facebook/f
 public final class com/facebook/react/modules/core/TimingModule$Companion {
 }
 
+public final class com/facebook/react/modules/debug/DevMenuModule : com/facebook/fbreact/specs/NativeDevMenuSpec {
+	public fun <init> (Lcom/facebook/react/bridge/ReactApplicationContext;Lcom/facebook/react/devsupport/interfaces/DevSupportManager;)V
+	public fun debugRemotely (Z)V
+	public fun reload ()V
+	public fun setHotLoadingEnabled (Z)V
+	public fun setProfilingEnabled (Z)V
+	public fun show ()V
+}
+
 public final class com/facebook/react/modules/debug/DevSettingsModule : com/facebook/fbreact/specs/NativeDevSettingsSpec {
 	public fun <init> (Lcom/facebook/react/bridge/ReactApplicationContext;Lcom/facebook/react/devsupport/interfaces/DevSupportManager;)V
 	public fun addListener (Ljava/lang/String;)V
@@ -4047,6 +4056,33 @@ public class com/facebook/react/shell/MainReactPackage$$ReactModuleInfoProvider
 	public fun getReactModuleInfos ()Ljava/util/Map;
 }
 
+public final class com/facebook/react/soloader/OpenSourceMergedSoMapping : com/facebook/soloader/ExternalSoMapping {
+	public static final field INSTANCE Lcom/facebook/react/soloader/OpenSourceMergedSoMapping;
+	public fun invokeJniOnload (Ljava/lang/String;)V
+	public final fun libfabricjni_so ()I
+	public final fun libhermes_executor_so ()I
+	public final fun libhermesinstancejni_so ()I
+	public final fun libhermestooling_so ()I
+	public final fun libjscexecutor_so ()I
+	public final fun libjscinstance_so ()I
+	public final fun libjscruntime_so ()I
+	public final fun libjsctooling_so ()I
+	public final fun libjsijniprofiler_so ()I
+	public final fun libjsinspector_so ()I
+	public final fun libmapbufferjni_so ()I
+	public final fun libreact_devsupportjni_so ()I
+	public final fun libreact_featureflagsjni_so ()I
+	public final fun libreact_newarchdefaults_so ()I
+	public final fun libreactnative_so ()I
+	public final fun libreactnativeblob_so ()I
+	public final fun libreactnativejni_so ()I
+	public final fun librninstance_so ()I
+	public final fun libturbomodulejsijni_so ()I
+	public final fun libuimanagerjni_so ()I
+	public final fun libyoga_so ()I
+	public fun mapLibName (Ljava/lang/String;)Ljava/lang/String;
+}
+
 public final class com/facebook/react/touch/JSResponderHandler : com/facebook/react/touch/OnInterceptTouchEventListener {
 	public fun <init> ()V
 	public final fun clearJSResponder ()V