Part 4 · 1 chapters · ~8 min
React Native's New Architecture
The legacy bridge and its limits, Hermes, the JavaScript Interface (JSI), Fabric and the C++ shadow tree, TurboModules and Codegen, Expo and its development builds, and an honest Flutter versus React Native comparison on rendering, performance, team skills and ecosystem.
6
Old bridge, new architecture, and Flutter
| Flutter | React Native (new architecture) | |
|---|---|---|
| language and runtime | Dart, AOT-compiled to native code | TypeScript on Hermes (bytecode precompiled at build) |
| UI | draws its own widgets (Impeller) | real platform views via Fabric |
| native access | platform channels, Pigeon, FFI | TurboModules via JSI, Expo modules |
| look and feel | identical everywhere; Material and Cupertino widgets | platform-native by default |
| team fit | a dedicated mobile team | a React web team extending to mobile |
| over-the-air updates | limited (Shorebird for code push) | JS bundles via EAS Update and similar |
code
// a TurboModule spec: Codegen produces the native interfaces from this TypeScript
import type { TurboModule } from 'react-native'; import { TurboModuleRegistry } from 'react-native';
export interface Spec extends TurboModule { getBatteryLevel(): number; } // synchronous through JSI
export default TurboModuleRegistry.getEnforcing<Spec>('Battery');REACT NATIVE'S NEW ARCHITECTURE
JavaScript talking to native without the old bridge
swipe the figure sideways, or tap expand for full screen
1/4
the old bridge
The legacy architecture serialised every call to JSON and sent it asynchronously across a bridge: batching delays, no synchronous calls, and overhead on busy screens.
async JSON bridgethe old bottleneck