What Changed and Why It Matters for AI
React Native's new architecture has been on by default since RN 0.74. It removes the async JavaScript bridge that caused most of the performance problems people complained about for years. For AI apps specifically, this means synchronous access to native inference modules, no serialization overhead for tensor data, and UI updates that don't stutter during inference.
It's four separate changes that work together. Understanding each one matters when you're debugging native module issues or optimizing AI performance.
The Four Pillars of the New Architecture
JSI (JavaScript Interface)
Replaces the old JSON message-passing bridge with direct C++ function calls from JavaScript. Native modules can now expose synchronous methods that JavaScript calls as if they were local functions.
AI impact: Native AI inference modules (llama.cpp, TFLite, Core ML) can now accept input and return results synchronously with zero serialization overhead.
TurboModules
Lazy-loaded native modules that are only initialized when first called, not at app startup. They use JSI under the hood for synchronous access.
AI impact: Large AI libraries (ML Kit, speech, vision) don't slow app startup, they load only when needed. Cold starts improve by 100–300ms.
Fabric (New Renderer)
The new C++ rendering pipeline replaces the old async UIManager. Layout calculations now happen synchronously and can be interrupted for higher-priority updates.
AI impact: Streaming AI responses update the UI at full 60/120 FPS without dropped frames, even under CPU load from inference.
Bridgeless Mode
The complete elimination of the legacy bridge. All native communication goes through JSI + TurboModules. There is no message queue, no serialization, no asynchronous hop.
AI impact: Time-to-first-token for native AI modules drops by 10–40ms. Real-time voice and streaming feel genuinely native.
Performance Benchmarks: Old vs New Architecture
| Operation | Old Architecture | New Architecture | Improvement |
|---|---|---|---|
| Native module call overhead | ~2ms (async, serialized) | <0.1ms (sync JSI) | 20× faster |
| App cold start (medium app) | ~680ms | ~420ms | 38% faster |
| AI streaming UI update (FPS) | 45–55 FPS | 59–60 FPS | Jank-free |
| LLM token → screen latency | 32–48ms | 8–16ms | 3× faster |
| Large list render (100 items) | ~180ms | ~95ms | 47% faster |
Is Your App Already on the New Architecture?
For new projects created with React Native 0.74+, the new architecture is enabled by default. Check your project:
# Check React Native version
npx react-native --version
# Check if new arch is enabled in Android
grep -r "newArchEnabled" android/gradle.properties
# Should show: newArchEnabled=true
# Check iOS, look for this in ios/YourApp/AppDelegate.mm or .swift
# RCTAppSetupUtils.enableNewArchitecture(true) or
# The absence of bridge setup code in 0.74+If you're on RN 0.71 or earlier, you're on the old architecture. For projects between 0.71 and 0.73, new arch was opt-in. Upgrade to 0.74+ to get it by default.
Migrating an Existing App to New Architecture
For most apps, the migration is not dramatic. The usual blockers are third-party native modules that still rely on the old bridge:
Step 1: Upgrade React Native
# Use the upgrade helper
npx react-native upgrade
# Or use the community tool
npx @react-native-community/upgrade-supportStep 2: Enable New Architecture
# Android: android/gradle.properties
newArchEnabled=true
# iOS: run pod install after adding to Podfile
# In ios/Podfile:
# ENV['RCT_NEW_ARCH_ENABLED'] = '1'
cd ios && pod installStep 3: Audit Native Dependencies
# Check which packages support new arch
npx react-native-community/rn-diff-purge
# Or use this community checker
npx react-native-compatibility-checkFor native modules that don't support the new architecture yet, two options:
- Interop Layer: RN 0.74+ includes an interop layer that lets old bridge modules work temporarily, enable per-module in your app config
- Replace: Most popular packages have new-arch compatible versions or alternatives. Check
reactnative.directoryfor compatibility status
Writing AI-Optimized TurboModules
If you're integrating a native AI library like Core ML, TFLite, or ONNX Runtime, write it as a TurboModule. The key pattern: synchronous returns for fast operations, async for anything that could take more than a few milliseconds:
// NativeAIModule.ts, TypeScript spec for your TurboModule
import type { TurboModule } from 'react-native'
import { TurboModuleRegistry } from 'react-native'
export interface Spec extends TurboModule {
// Synchronous: for fast operations (< 5ms)
isModelLoaded(): boolean
getModelVersion(): string
// Async: for inference (could take 50ms-2s)
loadModel(modelPath: string): Promise<void>
runInference(input: string, maxTokens: number): Promise<string>
runInferenceStream(
input: string,
onToken: (token: string) => void
): Promise<void>
}
export default TurboModuleRegistry.getEnforcing<Spec>('AIModule')Common New Architecture Issues (and Fixes)
"Module not found" after enabling new arch
Some older native modules aren't registered for the new architecture. Enable the interop layer in your AppDelegate:
// AppDelegate.swift, enable legacy interop
RCTBridge.requiresMainQueueSetup = true
// For specific modules:
RCTBridge.setModuleProvider { [MyLegacyModule()] }Reanimated worklet crashes
You need Reanimated 3.6 or later. Older versions crash with JSI-related errors that aren't obvious to diagnose.
Expo projects
Expo SDK 51+ enables new architecture by default for new projects. For existing Expo projects: set "newArchEnabled": true in app.json under the expo key, then run npx expo prebuild --clean.
Migrating to the New Architecture?
CasaInnov handles React Native architecture migrations and AI module integration. We've migrated 15+ production apps to the new architecture without shipping regressions.
Trusted by 10+ companies | Free first call | Kept confidential