@react-native/dev-middleware

@react-native/dev-middleware

Dev server middleware supporting core React Native development features. This package is preconfigured in all React Native projects.

Usage

Middleware can be attached to a dev server (e.g. Metro) using the createDevMiddleware API.

import { createDevMiddleware } from '@react-native/dev-middleware';

function myDevServerImpl(args) {
  ...

  const {middleware, websocketEndpoints} = createDevMiddleware({
    projectRoot: metroConfig.projectRoot,
    serverBaseUrl: `http://${args.host}:${args.port}`,
    logger,
  });

  await Metro.runServer(metroConfig, {
    host: args.host,
    ...,
    unstable_extraMiddleware: [
      middleware,
      // Optionally extend with additional HTTP middleware
    ],
    websocketEndpoints: {
      ...websocketEndpoints,
      // Optionally extend with additional WebSocket endpoints
    },
  });
}

Included middleware

@react-native/dev-middleware is designed for integrators such as @expo/dev-server and @react-native/community-cli-plugin. It provides a common default implementation for core React Native dev server responsibilities.

We intend to keep this to a narrow set of functionality, based around:

• Debugging — The Chrome DevTools protocol (CDP) endpoints supported by React Native, including the Inspector Proxy, which facilitates connections with multiple devices.
• Dev actions — Endpoints implementing core Dev Menu actions, e.g. reloading the app, opening the debugger frontend.

HTTP endpoints

DevMiddlewareAPI.middleware

These are exposed as a connect middleware handler, assignable to Metro.runServer or other compatible HTTP servers.

GET /json/list, /json (CDP)

Returns the list of available WebSocket targets for all connected React Native app sessions.

GET /json/version (CDP)

Returns version metadata used by Chrome DevTools.

GET /debugger-frontend

Subpaths of this endpoint are reserved to serve the JavaScript debugger frontend.

POST /open-debugger

Open the JavaScript debugger for a given CDP target (direct Hermes debugging).

Example

curl -X POST 'http://localhost:8081/open-debugger?appId=com.meta.RNTester'

WebSocket endpoints

DevMiddlewareAPI.websocketEndpoints

/inspector/device

WebSocket handler for registering device connections.

/inspector/debug

WebSocket handler that proxies CDP messages to/from the corresponding device.

Contributing

Changes to this package can be made locally and tested against the rn-tester app, per the Contributing guide. During development, this package is automatically run from source with no build step.

Changelog

v0.76.7

Changed

iOS specific

• Deps: Pin 'concurrent-ruby' to a working version (198adb47af by @cipolleschi)

Fixed

• Text Fix maxFontSizeMultiplier prop on Text and TextInput components in Fabric / New Architecture (ea49d4d1b01107a5ecbbbd4904f1d935e51d6b32 by @RickardZrinski)
• Appearance: Fix Appearance.setColorScheme(null) not resetting color scheme value (7d63235086 by @sangonz193)

Android specific

• Deps: Add missing invariant dependency (ee8088b615 by @tido64)
• Turbomodule Fix execution of early InteropEvents (4ed2b35bf6 by @mdvacca)
• Deps: Bump Kotlin to 1.9.25 to mitigate #49115 (f8857ba3b5 by @cortinico)

iOS specific

• runtime: RCTSurfaceHostingProxyRootView no longer has different behavior (whether it calls start on the provided surface) depending on which initializer is used. Call start yourself on the surface instead. (13b93cfdda by Nolan O'Brien)
• Be less strict with method parsing of TurboModule Interop Layer
• Turbomodule: Avoid crashing the app when the InteropLayer can't find some methods in the native implementation. (3bd3f101b9 by @cipolleschi)
• Runtime: Fix applicationDidEnterBackground not being called (adaceba546 by @alextoudic)