React Native has undergone its most significant transformation since launch. The new architecture — built on JSI, Fabric, and TurboModules — ditches the async bridge entirely, unlocking synchronous native calls, concurrent rendering, and dramatically faster apps.
React Native's new architecture is the most significant overhaul the framework has seen since its release in 2015. After years of community frustration with the asynchronous bridge, the React Native team at Meta has shipped a ground-up redesign — and in React Native 0.74+, it's enabled by default. Here's what changed, why it matters, and what it means for your apps.
The Problem with the Old Architecture
The original React Native architecture relied on an asynchronous, serialised bridge between JavaScript and native code. Every interaction — a button press, a scroll event, a native module call — had to be serialised to JSON, passed across the bridge, deserialised, and acted upon. This made the bridge a notorious bottleneck for anything requiring tight coordination between JS and native.
What Was the Bridge?
The bridge was a single asynchronous queue connecting the JavaScript thread and the native (UI) thread. All messages were serialised as JSON, which meant no shared memory, no synchronous calls, and unavoidable latency — particularly painful for gestures, animations, and high-frequency events.
The consequences were real: jank during list scrolling, laggy gesture responses, and a hard ceiling on how tightly JS and native could be coupled. Workarounds like Animated's native driver and Reanimated's worklets existed precisely because the bridge couldn't keep up with demanding UIs.
Enter the New Architecture
The new architecture is not one change — it's four interrelated pieces that together eliminate the bridge entirely. Each solves a specific failure mode of the old system.
JSI
JavaScript Interface
Fabric
New Renderer
TurboModules
Native Modules
Codegen
Type Safety Layer
JSI — The JavaScript Interface
JSI (JavaScript Interface) is the foundation of everything else. It's a lightweight C++ API that lets JavaScript hold direct references to native host objects — and call methods on them synchronously. No serialisation. No queue. No bridge. A JS function can invoke native code and get a return value in the same call frame.
Why JSI is a Game Changer
With JSI, JavaScript can hold a reference to a native C++ object and call its methods directly — just like calling a regular JS function. This enables synchronous reads of native state, true shared memory between threads, and the removal of JSON serialisation overhead entirely.
JSI also makes React Native engine-agnostic. The old architecture was tightly coupled to JavaScriptCore. JSI abstracts the JS engine behind a clean interface, which is why Hermes — Meta's purpose-built JS engine — can now be swapped in (and is the default), with V8 or QuickJS possible too.
Fabric — The New Rendering System
Fabric is the complete rewrite of React Native's UI layer. The old renderer created a shadow tree on the JS thread, calculated layout via Yoga (the cross-platform CSS flexbox engine), then asynchronously applied the diff to native views. Fabric moves this entire pipeline into C++, with the shadow tree living in shared memory accessible from both JS and native threads.
Concurrent Features Come to Mobile
Because Fabric is built on the same renderer architecture as React DOM's concurrent mode, React Native now supports concurrent rendering features: startTransition, useTransition, and Suspense with streaming. Low-priority updates can be interrupted by high-priority ones — meaning a heavy list render won't block a user's tap response.
Synchronous Layout and Effects
Fabric also enables synchronous layout measurements. Previously, useLayoutEffect in React Native was a lie — it ran asynchronously because native layout happened on a different thread. With Fabric, useLayoutEffect fires synchronously after layout, making it behave exactly as it does on the web. This fixes a whole class of layout flicker bugs that plagued complex navigation and measurement-dependent UIs.
TurboModules — Lazy Native Modules
In the old architecture, all native modules were loaded eagerly at startup — even ones you never used. On a large app, this contributed significantly to slow time-to-interactive. TurboModules replaces this with lazy loading: a native module is only initialised when JS first calls into it.
- Lazy initialisation — modules load on first use, not at startup
- JSI-powered — calls are synchronous, no bridge serialisation
- Type-safe — Codegen generates native interface definitions from TypeScript specs
- C++ core — the module logic lives in C++, callable from both iOS and Android
- Backwards compatible — old NativeModules API still works during migration
For apps with many native modules — Bluetooth, biometrics, camera, payments — TurboModules can meaningfully reduce cold start time because the native initialisation cost is deferred and spread across the session rather than paid upfront.
Codegen — Type Safety at the Native Boundary
Codegen is the build-time tool that generates native (Objective-C/Swift/Kotlin) interface code from TypeScript spec files. You write your native module's API once in TypeScript, and Codegen produces the boilerplate that ensures JS and native agree on types, method signatures, and argument shapes.
Why Codegen Matters
Without Codegen, JS↔Native type mismatches were silent runtime crashes. With Codegen, any mismatch between your TypeScript spec and native implementation becomes a build-time error — caught before the app ships, not in production. It also eliminates hand-written boilerplate, which was a major source of errors in third-party native modules.
Hermes — The Default JavaScript Engine
Hermes has been available since React Native 0.60, but with the new architecture it becomes the default engine on both iOS and Android. Hermes is an ahead-of-time (AOT) compiled JavaScript engine built by Meta specifically for React Native — optimised for fast startup, low memory, and small binary size rather than peak throughput.
~30%
Faster TTI
~40%
Less Memory
~15%
Smaller APK
AOT
Bytecode Compilation
Rather than parsing and compiling JavaScript at startup (like V8 or JSC), Hermes pre-compiles your bundle to bytecode at build time. The engine ships the bytecode, not the source — so startup is reading bytecode off disk, not JIT compiling JS. On low-end Android devices, this is a transformative improvement.
Bridgeless Mode
Bridgeless mode is the final form of the new architecture — when JSI, Fabric, and TurboModules are all active and the bridge is completely disabled. As of React Native 0.74, bridgeless mode is the default for new projects. The bridge code still exists for backwards compatibility, but in a fully migrated app it is never initialised.
“The new architecture is not just an optimisation — it's a correctness fix. The old bridge made certain patterns impossible. Bridgeless mode makes React Native behave the way developers always expected it to.”
— React Native Team, Meta
Should You Migrate Today?
For new projects starting on React Native 0.74+, the new architecture is enabled by default — there's nothing to do. For existing apps, migration depends on your dependency tree. Most major libraries (React Navigation, Reanimated 3, MMKV, Vision Camera) already support the new architecture. The main blocker is usually obscure native modules that haven't been updated.
- Check your native dependencies at reactnative.directory — filter by New Architecture support
- Enable the new architecture in android/gradle.properties: newArchEnabled=true
- Enable on iOS via RCT_NEW_ARCH_ENABLED=1 in your Podfile
- Run your test suite — most regressions are in third-party native modules, not your own code
- Use the interop layer for unmigrated libraries — it wraps old modules automatically
Migration Gotcha
The interop layer (which lets old-style native modules work in new architecture mode) is enabled by default but is not a permanent solution. Libraries relying on the interop layer may show subtle behavioural differences. Always test thoroughly, especially around native module calls, gesture handlers, and animations.
The new architecture represents years of engineering effort to fix fundamental limitations that have constrained React Native since its launch. JSI removes the serialisation bottleneck, Fabric brings concurrent rendering to mobile, TurboModules eliminate startup overhead, and Codegen catches type mismatches at build time. Together, they make React Native a genuinely competitive target for high-performance mobile apps — not just a convenient cross-platform shortcut.
Bipin Phaiju
Software engineer & MSc Data Science student based in Coventry, UK. Passionate about machine learning, audio processing, and building beautiful web experiences.
