Migrating to React Native's New Architecture: Fabric, TurboModules and the Bridgeless Future

What changed and why it matters

Three things ship together under the New Architecture banner. Fabric replaces the legacy UI manager with a rendering pipeline that supports concurrent React. TurboModules replaces native modules with a typed, lazy-loaded interface that uses JSI to make synchronous calls. Bridgeless mode removes the JSON message bridge entirely — JavaScript and native talk directly through C++ JSI.

The visible result for users is faster cold starts (we measured 18 to 35 percent improvements on real apps), smoother list scrolling under pressure, and fewer race conditions on rapid native interactions. The visible result for engineers is a stricter type contract between JS and native — and a much shorter feedback loop when something is wrong.

Preflight: the audit you should run before you start

1. Pin to React Native 0.76 or later. Do not migrate from a 0.6x version directly — upgrade in steps.
2. Inventory every native module and library. Mark each as: New Arch ready, supports interop layer, or requires patching.
3. Run the official New Architecture compatibility check (npx @react-native-community/cli doctor) and capture warnings.
4. Switch the JS engine to Hermes if you have not already. The New Architecture's interop story is best on Hermes.
5. Establish a baseline: cold start, hot reload time, JS bundle size, memory at idle, key user-flow latencies.

Stage 1 — turn it on for development

Enable the New Architecture in development by setting newArchEnabled=true in gradle.properties (Android) and RCT_NEW_ARCH_ENABLED=1 in your Podfile (iOS), then re-running pod install. Your app should boot. The libraries that do not survive the boot are the ones to migrate first.

Stage 2 — codegen for your own modules

If you maintain custom native modules, the migration cost is concentrated here. The shape of the work is the same on both platforms: write a TypeScript spec describing the module's API, place it in a designated specs folder, and let codegen produce typed C++ bindings, Java/Kotlin and Objective-C/Swift glue. You then implement the generated interface on each platform.

// specs/NativeBiometricAuth.ts
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  isAvailable(): Promise<boolean>;
  authenticate(reason: string): Promise<{ ok: boolean; error?: string }>;
}

export default TurboModuleRegistry.getEnforcing<Spec>('NativeBiometricAuth');

Codegen runs as part of the build. The generated C++ enforces your TypeScript spec at compile time on the native side — a real win for the kind of subtle JS/native type drift that has caused production incidents in older apps.

Stage 3 — third-party libraries

By April 2026 the main React Native ecosystem (react-native-screens, react-native-reanimated, react-native-gesture-handler, react-native-svg, react-navigation, expo modules, the major animation and chart libraries) supports the New Architecture natively. Hold-outs are typically domain-specific SDKs (older fintech, mapping, payments providers) that ship as static frameworks. The interop layer carries them transparently in most cases; verify by exercising every native surface in your app.

Stage 4 — production rollout

1. Internal alpha to your team for at least one sprint. Watch crash-free sessions and ANRs daily.
2. Public beta to a 1 to 5 percent cohort via TestFlight and Play Console internal testing tracks.
3. Server-side feature flag to ramp from 10 to 25 to 50 to 100 percent over two weeks.
4. Kill switch: keep the legacy build path available for one full release. Do not delete it on the same day you go to 100 percent.
5. Compare baseline metrics weekly. Roll back any release where p95 cold start regresses by more than 10 percent.

Common migration bugs and their fixes

• Layout snaps on first render — usually a measurement reading from the legacy ShadowTree. Replace with onLayout or useWindowDimensions.
• Missing event handlers — Fabric uses the new events architecture; ensure custom event emitters extend RCTEventEmitter and are registered correctly.
• TurboModule is null at startup — the module's autolinking metadata is missing. Re-run autolinking, then pod install.
• Crashes on Android only — most often a Kotlin nullability mismatch the New Arch now enforces. Fix the type, not the symptom.
• Hermes crashes on a specific JS feature — update Hermes via the React Native upgrade. Hermes ships pinned to the RN version.

Performance numbers from real migrations

These are from a financial-services app with roughly 80 screens and 26 native modules. The list scrolling number reflects Fabric's concurrent rendering; the native module number reflects the move from bridge messaging to direct JSI calls.