Architecture & Performance· 5 min read

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.

By

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:

  1. JavaScript wanted something (render a view, read a value, call a native module).
  2. The request was serialised to JSON and queued.
  3. 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

PieceWhat it replacesWhat it does
JSIThe JSON bridgeLets JavaScript hold references to C++ objects and call native functions directly
FabricThe old renderer ("Paper")A new rendering system with a shared C++ core, supporting synchronous layout and concurrent React
TurboModulesLegacy native modulesNative modules loaded on first use and called directly through JSI
CodegenHand-written glue codeGenerates type-safe native interfaces from TypeScript or Flow specs
Bridgeless modeThe bridge's remaining infrastructureRuns 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

VersionDateWhat happened
0.682022New Architecture available as an opt-in
0.742024Bridgeless mode on by default when the New Architecture is enabled
0.76October 2024New Architecture enabled by default
0.82October 2025New Architecture is the only architecture; legacy opt-outs are ignored
0.84February 2026Hermes 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 architectureNew Architecture
JavaScript to nativeAsynchronous bridge, messages serialised as JSONJSI: direct calls into C++ host objects
Native modulesLoaded at startup, untypedTurbo Modules: loaded on demand, typed through Codegen
RenderingAsynchronous, with a separate shadow tree per platformFabric: a shared C++ renderer with synchronous layout when needed
React featuresNo concurrent renderingConcurrent features such as transitions and Suspense
Status in 2026Removed (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

Bhuwanesh Sisodia

Bhuwanesh Sisodia

Full-Stack, Mobile & AI Engineer

Bhuwanesh Sisodia is a Full-Stack, Mobile & AI Engineer based in Mumbai, with 7+ years of experience and 50+ apps shipped to the App Store and Google Play. He works independently with startups and product teams worldwide.

About meGitHubLinkedInX

Related