React Native Architecture - Old Bridge vs New

Old Architecture (Legacy Bridge)

• Three threads: JS Thread (your app code), Native Thread (UI rendering), Shadow Thread (Yoga layout engine)
• JavaScript and native code communicate via the **Bridge** - an asynchronous message queue that serializes all data to JSON
• Every interaction (touch → JS → layout → native) crosses the bridge at least twice, adding latency
• Bridge is asynchronous and batched - you cannot call native synchronously, which ruled out many APIs
• Metro bundles JS → app loads JSC (JavaScriptCore) engine → bridge ferry messages → native renders
• Limitation: UI updates could not happen synchronously, causing jank on fast interactions like pan gestures

New Architecture (JSI + Fabric + Hermes)

• **JSI (JavaScript Interface)**: C++ layer that lets JavaScript hold direct references to native objects - no serialization, no JSON, no async bridge for native calls
• **Fabric**: New concurrent renderer - native UI components can be created synchronously from the JS thread using JSI. Enables React 18 concurrent features on mobile
• **Turbo Modules**: Native modules are lazily loaded on demand (not all at startup) - faster cold start, lower memory
• **Codegen**: TypeScript/Flow type definitions auto-generate type-safe C++ glue code between JS and native at build time
• **Hermes**: Meta's JS engine optimized for React Native - AOT (ahead-of-time) compilation of bytecode, faster startup, lower memory, better GC
• End result: synchronous native calls, concurrent rendering, smaller startup footprint, better battery efficiency

Enabling the New Architecture

// For Expo (SDK 50+) - enabled by default in new projects
// Check app.json:
{
  "expo": {
    "newArchEnabled": true
  }
}

// For React Native CLI (0.73+) - opt in via android/gradle.properties
// android/gradle.properties
newArchEnabled=true

// iOS - Podfile
# Already opt-in by default in RN 0.73+
# To force: in ios/Podfile set ENV['RCT_NEW_ARCH_ENABLED'] = '1'

// Verify Hermes is active at runtime
import { HermesInternal } from 'react-native';
const isHermes = () => !!HermesInternal;
console.log('Hermes:', isHermes()); // true on most modern setups

Common Mistakes

• Assuming all third-party libraries support New Architecture - check NativeModules compatibility before upgrading; use the interop layer during migration
• Keeping JSC engine when you can use Hermes - Hermes gives 20-40% smaller JS bundle and faster TTI (time to interactive) at zero cost for most apps
• Writing native module code expecting bridge async behavior - with JSI, native calls can be synchronous; not accounting for this causes subtle ordering bugs

Tip

Practice Task

Quick Quiz

Common Mistake