React Native's New Architecture Explained: Fabric, TurboModules, JSI
React Native's New Architecture in plain English: Fabric, TurboModules, JSI and Codegen, the release timeline to 0.82, and what it means for your app.
Full-Stack, Mobile & AI Engineer
For years, React Native's biggest weakness had a name: the bridge. Every message between JavaScript and native code was serialised to JSON, sent asynchronously and processed later. It worked, but it made some interactions laggy and some features impossible to build cleanly.
The New Architecture replaced it. It became the default in React Native 0.76 and, since 0.82, it's the only architecture React Native runs. Here's what it is, piece by piece, in plain English: what changed, why it matters for performance and features, and what it means if you're building or maintaining an app in 2026.
Key takeaways
- The old bridge is gone. JavaScript and native code now talk directly through JSI (JavaScript Interface).
- Fabric is the new rendering system: synchronous where needed, built for React's concurrent features.
- TurboModules are native modules that load lazily and are called directly, with types generated by Codegen.
- Timeline: default in 0.76 (October 2024), the only architecture from 0.82 (October 2025), and Hermes V1 as the default engine in 0.84.
- For app owners: better responsiveness and startup, access to modern React features, and libraries (like Reanimated 4 and FlashList v2) that now require it.
The old architecture, briefly
In the legacy design, JavaScript ran on its own thread and communicated with native code through the bridge:
- JavaScript wanted something (render a view, read a value, call a native module).
- The request was serialised to JSON and queued.
- Native code processed the queue later and replied the same way.
Everything was asynchronous and batched. That made some things hard: measuring a view and responding in the same frame, synchronous calls to native APIs, and smooth gesture-driven UI without workarounds.
The pieces of the New Architecture
| Piece | What it replaces | What it does |
|---|---|---|
| JSI | The JSON bridge | Lets JavaScript hold references to C++ objects and call native functions directly |
| Fabric | The old renderer ("Paper") | A new rendering system with a shared C++ core, supporting synchronous layout and concurrent React |
| TurboModules | Legacy native modules | Native modules loaded on first use and called directly through JSI |
| Codegen | Hand-written glue code | Generates type-safe native interfaces from TypeScript or Flow specs |
| Bridgeless mode | The bridge's remaining infrastructure | Runs the app without the bridge at all |
JSI: direct calls
JSI is the foundation. Instead of sending messages, JavaScript can call a native function and get a result directly, synchronously when that's appropriate. Libraries like MMKV (storage) and Reanimated rely on this for their speed.
Fabric: the new renderer
Fabric renders your React components into native views using a C++ core shared by iOS and Android. It can measure and lay out synchronously when needed, which helps with things like tooltips and gesture-driven UI, and it supports React's concurrent features such as transitions and Suspense.
TurboModules and Codegen
TurboModules are the new native modules. They're initialised lazily, when first used, instead of all at launch, and calls go through JSI. Codegen reads a typed specification of the module and generates the native interface, so mismatches between JavaScript and native types are caught at build time rather than as runtime crashes.
The timeline
| Version | Date | What happened |
|---|---|---|
| 0.68 | 2022 | New Architecture available as an opt-in |
| 0.74 | 2024 | Bridgeless mode on by default when the New Architecture is enabled |
| 0.76 | October 2024 | New Architecture enabled by default |
| 0.82 | October 2025 | New Architecture is the only architecture; legacy opt-outs are ignored |
| 0.84 | February 2026 | Hermes V1 becomes the default engine; more legacy code removed |
For Expo users, SDK 54 was the last SDK to support the legacy architecture.
Old vs new architecture at a glance
| Old architecture | New Architecture | |
|---|---|---|
| JavaScript to native | Asynchronous bridge, messages serialised as JSON | JSI: direct calls into C++ host objects |
| Native modules | Loaded at startup, untyped | Turbo Modules: loaded on demand, typed through Codegen |
| Rendering | Asynchronous, with a separate shadow tree per platform | Fabric: a shared C++ renderer with synchronous layout when needed |
| React features | No concurrent rendering | Concurrent features such as transitions and Suspense |
| Status in 2026 | Removed (from 0.82) | The only architecture |
Is it stable? Yes: it has been the default since 0.76 in October 2024 and the only option since 0.82 in October 2025. On a current React Native or Expo version there's nothing to switch on; the work, where there is any, is making sure every library you depend on supports it. Library authors and app teams coordinated that transition in the public React Native New Architecture working group on GitHub.
What it means for your app
- Responsiveness: fewer frame drops in gesture-heavy and animation-heavy screens, because work no longer queues across a bridge.
- Startup: lazy TurboModules mean native modules you don't use at launch aren't initialised at launch.
- Modern React: concurrent rendering features work properly.
- Library ecosystem: current versions of key libraries are New-Architecture-only. Reanimated 4 and FlashList v2 both require it.
- Maintenance: apps still on the old architecture can't move to current React Native versions without migrating.
From the field: I migrated eight apps to the New Architecture and, alongside Hermes, image optimisation and cache-first fetching, cut load time by about 60% (3.8 seconds to 1.5) while holding stable 60fps animation. The architecture alone isn't a magic switch, but it removes the ceiling the bridge used to impose.
Common misconceptions
- "It's a rewrite of my app." No. Your React components and JavaScript stay the same; the change is underneath, in how they reach native code.
- "It makes every app faster automatically." It removes bottlenecks, but slow apps are usually slow because of their own startup work, images and data fetching.
- "Expo apps don't have it." They do. Expo SDKs adopted it and, from SDK 55 onward, it's the only option, just like bare React Native.
Do you need to do anything?
- New apps use the New Architecture automatically. Nothing to decide.
- Apps on React Native 0.76 to 0.81 with the New Architecture already enabled are in good shape; keep upgrading.
- Apps on older versions, or with it disabled, need a migration before they can upgrade past 0.81. That usually means checking every native library for compatibility, replacing abandoned ones, and testing layout and native views carefully.
FAQ
What is the React Native New Architecture?
It's the modern internal design of React Native, made up of JSI (direct calls between JavaScript and native code), Fabric (the new renderer), TurboModules (lazily loaded native modules) and Codegen (generated type-safe interfaces). It replaced the old asynchronous bridge and is the only architecture since React Native 0.82.
Which React Native version made the New Architecture the default?
React Native 0.76, released in October 2024, enabled it by default. React Native 0.82, in October 2025, made it the only option, ignoring attempts to switch back to the legacy architecture.
Is the New Architecture faster?
Generally yes, for responsiveness and startup, because calls no longer go through an asynchronous bridge and native modules load lazily. The size of the improvement depends on your app; slow startup or janky lists usually also need app-level fixes.
Do I have to migrate my app to the New Architecture?
If you want to stay on supported React Native and Expo versions, yes. Versions after 0.81 (and Expo SDKs after 54) only run the New Architecture, and current versions of major libraries require it.
Next steps
If your app is still on the old architecture, or stuck on an old React Native version, I can assess what a migration involves and do it with you, one safe step at a time. Get in touch, or see how I work as a React Native developer.
Sources
- About the New Architecture, React Native docs
- React Native 0.76: New Architecture by default, React Native blog
- React Native 0.82, React Native blog
- React Native 0.84: Hermes V1 by default, React Native blog
- Turbo Native Modules, React Native docs
Related
How We Cut React Native Startup Time from 3.8s to 1.5s
The levers that cut React Native startup time by about 60%: measuring cold start properly, Hermes, image optimisation and cache-first fetching.
Migrating to the New Architecture: A Field Guide from 8 Migrations
A step-by-step guide to migrating a React Native app to the New Architecture in 2026: auditing libraries, the 0.81 path, common breakages and testing.
React Native Performance in 2026: The Checklist That Matters
A practical React Native performance optimization checklist for 2026: measuring, startup, re-renders, lists, images, animations, memory and monitoring.
