Beginner-Friendly Topic
Take your time — it's perfectly normal to re-read this topic 2–3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
React Native Architecture — Old Bridge vs New
Understanding how React Native actually renders your code to native UI is the most important foundation. The architecture has changed dramatically with React Native 0.71+ and the New Architecture release. Knowing the difference shapes every performance decision you make.
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 setupsCommon 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
Tip
Practice React Native Architecture Old Bridge vs New in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
React Native bridges JavaScript and native platform code
Practice Task
Note
Practice Task — (1) Write a working example of React Native Architecture Old Bridge vs New from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Quick Quiz
Common Mistake
Warning
A common mistake with React Native Architecture Old Bridge vs New is skipping edge case testing — empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready react native code.
Key Takeaways
- Understanding how React Native actually renders your code to native UI is the most important foundation.
- 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