React Native's New Architecture Interop Layer
The Interop Layer is a compatibility bridge, letting legacy native modules run in React Native's New Architecture without a full rewrite. Library maintainers must ensure compatibility for users on RN 0.74+. The footgun: remove partial Codegen specs.
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.
Interview question
A library author is testing a legacy native module with React Native's New Architecture enabled. What would most likely prevent the Interop Layer from properly wrapping this module?
- a.A Codegen spec file (e.g., MyModuleSpec.js) exists for the module.Correct
- b.The module's native code still uses the old RCTBridgeModule API.
- c.The application's build configuration explicitly disables the Interop Layer.
- d.The React Native version used in the project is 0.73 or earlier.
Why? this is the answer
The presence of a Codegen spec file indicates to the New Architecture that the module is a TurboModule, which prevents the Interop Layer from activating to wrap it as a legacy module. The Interop Layer is specifically designed to handle modules using the RCTBridgeModule API, so option B is incorrect.
Just read this? Test yourself on what you have been reading.
Read the original → github.com
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react native — each one lists the topics its interview covers.
See open roles