React Native's New Architecture Interop Layer

WHY IT EXISTS React Native's New Architecture is a fundamental shift away from the original Bridge-based system. Rewriting every existing native library for the new TurboModule and Fabric APIs overnight is impossible. The Interop Layer was created to provide a migration path, allowing the ecosystem to adopt the New Architecture gradually without breaking thousands of apps that depend on legacy modules.

THE MENTAL MODEL The Interop Layer is like a universal power adapter for your old electronics. It lets you plug a legacy native module (an old plug) into the New Architecture's system (a new socket). It translates the calls so the new system can understand the old module, and vice-versa, without you needing to re-wire the old device immediately.

HOW IT WORKS Starting with React Native 0.74, the Interop Layer is enabled by default whenever the New Architecture is active. It automatically finds and wraps legacy native modules, making them compatible. For most simple libraries, this process is seamless and requires no code changes. The system provides a compatibility shim that mimics the old Bridge environment, allowing the legacy module to function as it always has.

WHEN TO USE IT As a library author, you don't actively "use" the Interop Layer; you ensure your library is compatible with it. This is the mandatory first step for any library not yet fully converted to TurboModules and Fabric. Your goal is to test your library within an app that has the New Architecture enabled and fix any issues that arise, ensuring a smooth experience for your users.

WHEN NOT TO USE IT You can and should bypass the Interop Layer once your library is fully migrated to the New Architecture. A fully migrated library has its own Codegen spec and implements the generated native interfaces for TurboModules or Fabric. The Interop Layer is a transitional tool, not a permanent solution.

ONE CANONICAL EXAMPLE A library author has native code using the old RCTBridgeModule API. To support users on RN 0.74+, they test their library with the New Architecture enabled. It fails. The cause: they had previously added a MyModuleSpec.js file during an early experiment with TurboModules. The presence of this spec file prevents the Interop Layer from activating. The fix is to delete the spec file, which allows the Interop Layer to correctly wrap the legacy module.