This specification is maintained by the AgentRules Working Group. Have enhancements or want to claim maintainership?Submit Specification →
mobilecritical PriorityID: react-native-new-architecture-turbomodules

React Native New Architecture (TurboModules & Fabric) Migration Standard

Production standard for React Native 0.76+ New Architecture. Mandates C++ TurboModule interfaces using Codegen Specs, pure Fabric Native Component rendering, and eliminates legacy asynchronous JSON bridge calls that cause UI bridge thread locking.

Prohibited Anti-Pattern: AI writes legacy NativeModules bridging using NativeModules.MyModule, triggering runtime crashes and deprecation errors on React Native New Architecture builds.

Export Ready-to-Drop Configuration

Select format below to copy code or download file directly.

---
description: React Native New Architecture (TurboModules & Fabric) Migration Standard - Production standard for React Native 0.76+ New Architecture. Mandates C++ TurboModule interfaces using Codegen Specs, pure Fabric Native Component rendering, and eliminates legacy asynchronous JSON bridge calls that cause UI bridge thread locking.
globs: **/Native*.ts, **/specs/**/*.ts, **/ios/**/*.mm, **/android/**/*.kt
alwaysApply: true
verified_by: "agentrules.org"
license: "CC-BY-4.0"
source: "https://agentrules.org/rules/react-native-new-architecture-turbomodules"
---

# React Native New Architecture (TurboModules & Fabric) Migration Standard

> **Severity**: CRITICAL | **Category**: mobile
> **Anti-Pattern Warning**: AI writes legacy NativeModules bridging using NativeModules.MyModule, triggering runtime crashes and deprecation errors on React Native New Architecture builds.

## System Constraints
You are a React Native New Architecture and Cross-Platform Mobile Engineer. In React Native 0.76+, the legacy JSON bridge is disabled by default. NEVER use NativeModules.MyModule with manual bridging. You MUST define native module specifications using TypeScript TurboModuleRegistry.getEnforcing<Spec>() with Codegen spec interfaces.

## Strict Guidelines
- MUST define native interfaces extending TurboModule from 'react-native/Libraries/TurboModule/RCTExport'.
- MUST use TurboModuleRegistry.getEnforcing<Spec>('ModuleName') for type-safe synchronous native calls.
- MUST NOT import or call NativeModules from 'react-native' for new native modules.
- MUST declare strict typed method signatures without 'any' to allow React Native Codegen to generate C++ headers.
- SHOULD wrap Fabric components with codegenNativeComponent<NativeProps>.

## Bad vs Good Implementations
### Defining a C++ TurboModule Spec with Codegen in React Native

#### Bad Antipattern (AI Common Hallucination)
> **Why it fails**: Legacy NativeModules relies on the asynchronous JSON serialization bridge. In the New Architecture, the bridge is eliminated in favor of direct C++ JSI bindings.
```typescript
// FATAL: Deprecated legacy bridge NativeModules call
import { NativeModules } from 'react-native';

// CRASHES on React Native 0.76+ New Architecture: Bridge is disabled!
const { DeviceSecurity } = NativeModules;
export function checkJailbreak() {
  return DeviceSecurity.isJailbroken();
}
```

#### Production Standard (Correct)
> **Standard**: Declares an explicit TurboModule Spec. React Native Codegen automatically synthesizes type-safe C++ and Java/Obj-C JSI bindings, executing synchronously at native speeds.
```typescript
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

// 1. Codegen Specification Interface: Must extend TurboModule
export interface Spec extends TurboModule {
  readonly isJailbroken: () => boolean;
  readonly getHardwareIdentifier: () => Promise<string>;
}

// 2. Direct JSI binding without JSON serialization overhead
export default TurboModuleRegistry.getEnforcing<Spec>('DeviceSecurity');
```

Recommended MCP Servers (mcp-serverlist.com)

Equip agent with system tools to verify code for this stack.

Recommended Agent Skills (askills.dev)

Ready-to-use executable skill functions tailored to this stack.

Architectural Specification & Invariant Rationale

Architectural Invariant Design: React Native New Architecture (TurboModules & Fabric) Migration Standard

React Native New Architecture (TurboModules & Fabric) Migration Standard defines an industrial-grade behavioral standard for mobile engineering. Production standard for React Native 0.76+ New Architecture. Mandates C++ TurboModule interfaces using Codegen Specs, pure Fabric Native Component rendering, and eliminates legacy asynchronous JSON bridge calls that cause UI bridge thread locking. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: AI writes legacy NativeModules bridging using NativeModules.MyModule, triggering runtime crashes and deprecation errors on React Native New Architecture builds. Without an explicit system instruction file, developers spend hours debugging silent failures.
Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure ModeAI Symptom (The Anti-Pattern)SeverityProduction Impact & Remedy
AI Hallucination & Deprecation DriftAI writes legacy NativeModules bridging using NativeModules.MyModule, triggering runtime crashes and deprecation errors on React Native New Architecture builds.Critical
Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production.
Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture InconsistencyAI assistants produce mixed paradigms across files, creating fragmented codebase conventions.Medium
Increases cognitive load during code reviews and leads to maintenance debt across engineering teams.
Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.
Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

1

MUST define native interfaces extending TurboModule from 'react-native/Libraries/TurboModule/RCTExport'.

MUST define native interfaces extending TurboModule from 'react-native/Libraries/TurboModule/RCTExport'.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
2

MUST use TurboModuleRegistry.getEnforcing<Spec>('ModuleName') for type-safe synchronous native calls.

MUST use TurboModuleRegistry.getEnforcing<Spec>('ModuleName') for type-safe synchronous native calls.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
3

MUST NOT import or call NativeModules from 'react-native' for new native modules.

MUST NOT import or call NativeModules from 'react-native' for new native modules.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
4

MUST declare strict typed method signatures without 'any' to allow React Native Codegen to generate C++ headers.

MUST declare strict typed method signatures without 'any' to allow React Native Codegen to generate C++ headers.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
5

SHOULD wrap Fabric components with codegenNativeComponent<NativeProps>.

SHOULD wrap Fabric components with codegenNativeComponent<NativeProps>.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
Technical Questions & Answers

Frequently Asked Technical Questions

Common questions developers face when configuring AI coding assistants for this stack:

Q:Why is React Native New Architecture (TurboModules & Fabric) Migration Standard critical for AI coding assistants?

Production standard for React Native 0.76+ New Architecture. Mandates C++ TurboModule interfaces using Codegen Specs, pure Fabric Native Component rendering, and eliminates legacy asynchronous JSON bridge calls that cause UI bridge thread locking. Without explicit behavioral boundaries, AI coding assistants (Cursor, Claude Code, Windsurf, Codex) rely on training data averages, which frequently produce deprecated, inefficient, or vulnerable code patterns.

Q:How does adopting this rule prevent AI hallucinations?

This rule explicitly declares what the AI must avoid (AI writes legacy NativeModules bridging using NativeModules.MyModule, triggering runtime crashes and deprecation errors on React Native New Architecture builds.) and prescribes verified positive examples. Grounding the LLM with negative and positive pairs eliminates guesswork.

Q:Which AI coding environments are supported?

This specification is multi-platform compatible: Cursor (.cursor/rules/*.mdc & .cursorrules), Anthropic Claude Code (CLAUDE.md), Windsurf (.windsurfrules), Codex / Cline (AGENTS.md), and GitHub Copilot (.github/copilot-instructions.md).

Q:Can I combine this rule with other technology stacks?

Yes. Use the Interactive Stack Builder or download an Agent Pack to merge this rule with other frontend, backend, database, security, and DevOps rules without syntax collision.

Open Specification · CC BY 4.0·Free for Personal, Team & Commercial In-Repo Use

Citation & Open Source Attribution Guidelines

This specification is licensed under Creative Commons Attribution 4.0 International (CC BY 4.0). You are completely free to adapt and share this rule in your workspace. If citing, including in public AI benchmark datasets, or redistributing, attribution to AgentRules.org is required.

Related MOBILE Rules

View all rules →
1 Rule in Stack

React