React Native New Architecture 2025: Fabric & TurboModules Guide

React Native New Architecture is the biggest evolution of the framework since the original bridge. In 2025, teams move to Fabric (the new renderer) and TurboModules (the new native module system) to unlock smoother rendering, lower latency, and modern React patterns. This guide explains how Fabric and TurboModules work, when to migrate, and a step-by-step plan to enable the new architecture safely—plus real code samples, debugging tips, and a two‑sprint rollout blueprint.

React Native New Architecture: Fabric & TurboModules explained

The new architecture replaces the classic Batched Bridge with a JSI-based runtime that lets JavaScript and native code talk through direct, synchronous and asynchronous calls without JSON serialization overhead. Two pillars make this possible:

• Fabric – a modern renderer that integrates with Concurrent React, streamlines layout/mounting, and reduces UI latency.
• TurboModules – a native module system built on JSI and Codegen for fast calls and type‑safe interfaces.

Together, they improve startup time, reduce frame drops during heavy interactions, and simplify the path to advanced React features.

What changed vs the classic bridge

• No JSON serialization tax: JSI exposes native objects to JS directly, reducing overhead.
• Direct method calls: JS ↔︎ Native interactions can be synchronous or async where appropriate.
• Type‑safe boundaries: Codegen generates native stubs from your TS/Flow specs.
• Renderer re-think: Fabric integrates with React’s concurrent features for more responsive UI updates.
• Better memory and startup profiles: Less glue code and faster module loading in production builds.

How Fabric works (renderer fundamentals)

Fabric is a cross‑platform renderer that reimplements how React Native constructs and updates native views.

• Concurrent React friendly: Better interruptible work and prioritization for smoother gestures and transitions.
• Shadow tree + Mounting: Fabric builds a platform-agnostic shadow tree and performs efficient mount/unmount operations.
• Layout: Still driven by Yoga; Fabric streamlines how layout results map to native views.
• Bridgeless-ready: Fabric does not depend on the old bridge. Apps can run in a bridgeless mode where supported.

How TurboModules work (JSI + Codegen)

TurboModules are native modules defined by an interface (TS/Flow) that codegen turns into platform bindings.

• JSI host objects: Native implementations are exposed to JS as first‑class objects—no bridge marshalling.
• Lazy loading: Modules can initialize on first use for faster startup.
• Codegen: Generates strongly‑typed headers and source for iOS/Android from your JS spec.
• Hermes synergy: With Hermes as the default engine in most setups, TurboModules get low‑latency calls.

Code example: a minimal TurboModule (TypeScript → native)

1) Define the module spec (TypeScript):

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

export interface Spec extends TurboModule {
  readonly getConstants: () => { appName: string };
  getDeviceName(): Promise<string>;
}

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

2) Implement natively (high-level sketch):

// iOS (ObjC/Swift) - MyDeviceInfoSpec-generated files provide interfaces
// Android (Kotlin) - Codegen creates the interface to implement
// Implement getDeviceName() and getConstants() using platform APIs

3) Use from JS:

import MyDeviceInfo from './MyDeviceInfo';

const { appName } = MyDeviceInfo.getConstants();
const name = await MyDeviceInfo.getDeviceName();

Code example: a Fabric component (codegenNativeComponent)

1) Define the component interface:

// MyBadgeNativeComponent.tsx
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps } from 'react-native';

type Props = ViewProps & {
  label: string;
  color?: string;
};

export default codegenNativeComponent<Props>('MyBadge');

2) Implement the platform view with the generated interfaces (Android/iOS). Fabric mounts/unmounts it like any other RN view with type‑safe props and events.

Migration strategy (2025) in 8 steps

Every codebase is different. Treat this as a safe default plan; always verify against the official docs for your RN version.

1. Upgrade React Native to a version that supports the new architecture well in your ecosystem. Read the RN release notes for breaking changes.
2. Turn on the flags in your app template (platform‑specific):
   • Android: set newArchEnabled=true in gradle.properties.
   • iOS: enable new architecture via build settings or your Pod configuration according to RN docs.
3. Adopt Hermes if you haven’t already. Hermes is the default engine in modern RN templates and pairs well with JSI.
4. Run Codegen. Ensure your package scripts and Pod install steps run RN Codegen for components/modules.
5. Migrate native modules on the hot path first. Convert high‑traffic Bridge modules into TurboModules with TS specs.
6. Replace legacy UI pieces that rely on imperative Bridge lifecycles with Fabric components. Start with isolated widgets.
7. Profile and fix regressions. Use Flipper, React DevTools Profiler, and platform tools (Xcode Instruments, Android Studio Profiler) to measure render commits, layout time, and jank.
8. Iterate and document. Capture patterns in your internal docs: module specs, codegen conventions, and testing strategy.

Performance wins to expect (and how to measure)

• Lower interaction latency: Fewer dropped frames in high‑stress UI thanks to Fabric’s scheduling.
• Faster native calls: JSI bypasses serialization; hot modules feel snappier.
• Startup improvements: Lazy TurboModules defer work off the critical path.

Measure what matters:

• Use React Profiler to track commits and render durations for critical flows.
• Flipper for network, layout, and React performance plugins.
• Platform profilers (Instruments/Android Studio) for CPU, memory, and UI thread time.

Testing & debugging in the new architecture

• Unit tests: Keep component logic pure and testable; Fabric doesn’t change this.
• Integration tests: Validate that TurboModules return the right shapes/types across platforms.
• E2E: Tools like Detox or Appium continue to work; focus on user journeys that were janky under the bridge.
• Flipper: Use modern plugins; verify no regressions when enabling bridgeless or new arch flags.

When to migrate (decision framework)

• Yes now if your app suffers UI jank, relies on heavy native modules, or you’re planning big feature work that benefits from codegen and concurrent rendering.
• Plan a staged pilot if you have many custom native components/modules—migrate a feature slice first.
• Wait only if a critical third‑party dependency hasn’t released new‑arch support yet; track its roadmap.

Common pitfalls and how to avoid them

• Forgetting codegen: Wire up scripts so Codegen runs during install/build. Breakages often trace back to missing generated files.
• Mismatched types: Keep TS specs in sync with native implementations; let the compiler help you.
• Global side effects in render: Clean up components so Fabric can schedule work efficiently.
• Partial migrations without tests: Add targeted integration tests around migrated modules/components.

Implementation guide: your next steps this week

1. Create a branch and upgrade to a supported RN version in a sample app or a small feature module.
2. Enable new architecture flags and Hermes; run the app on both platforms.
3. Migrate one simple native module to a TurboModule via a TS spec and Codegen.
4. Build one Fabric component using codegenNativeComponent and replace an existing widget.
5. Profile a hot interaction (list scroll, gesture) before/after; document the delta.
6. Share a short internal doc: conventions for module/component specs, codegen commands, and troubleshooting.

Final recommendations

• Start small and measure. Move one module and one component, then expand.
• Lean on Codegen and types. Let your tooling enforce contracts.
• Use Hermes + Flipper + React Profiler as your default performance toolkit.
• Track third‑party library readiness; contribute fixes upstream where possible.

Recommended tools and deals

• Deploy RN backends and services easily: Railway
• UI kits, icons, and mockups for app polish: Envato
• Fast, affordable hosting for your APIs: Hostinger

Disclosure: Some links are affiliate links. If you click and purchase, we may earn a commission at no extra cost to you. We only recommend tools we’d use ourselves.

From our library (related guides)

• React 19 Compiler in 2025
• Google Sheets Named Functions
• Dependent Dropdowns in Sheets
• XLOOKUP vs VLOOKUP

Trusted sources and official docs

• React Native docs (New Architecture): reactnative.dev/architecture/intro
• Fabric renderer: reactnative.dev/architecture/fabric-renderer
• TurboModules: reactnative.dev/architecture/turbomodules
• JSI overview: reactnative.dev/architecture/jsi
• Codegen guide: reactnative.dev/docs/the-new-architecture/pillars-codegen
• Hermes engine: reactnative.dev/docs/hermes
• Flipper: fbflipper.com

Frequently Asked Questions

Is the new architecture required in 2025?

No—it’s strongly encouraged for performance and modern React features, but you can migrate incrementally.

Do I need to rewrite my app?

No. Most JS stays the same. You’ll migrate native modules to TurboModules and specific views to Fabric over time.

Which React Native version should I use?

Use a recent stable version that supports the new architecture well and matches your dependency ecosystem. Check the official release notes.

Is Hermes mandatory?

Not strictly, but it’s the recommended engine and pairs best with JSI, codegen, and performance goals.

Will third‑party libraries break?

Libraries that ship only classic Bridge modules may need updates. Track their new‑arch support and pin versions during migration.

How do I enable the new architecture?

Set platform flags (e.g., newArchEnabled=true on Android) and follow the RN docs for iOS configuration. Ensure Codegen runs in your build.

What performance gains are typical?

Lower interaction latency, faster native calls, and improved startup when using lazy TurboModules—results vary by app.

Does Fabric change styling or layout?

No code changes to styles are required for most components. Fabric improves the rendering pipeline, not style syntax.

Can I keep some components on the old path?

Yes. You can mix until you fully migrate; plan a progressive rollout per feature area.

How do I debug TurboModules?

Use Flipper, platform debuggers, and add targeted integration tests to validate type/shape and error paths.