AgentRules.org
RulesStacksClientsAuditorPrunerSelf-HealRFCsBenchmarkCLICI/CDAuthorsSubmit
This specification is maintained by the AgentRules Working Group. Have enhancements or want to claim maintainership?Submit Specification →
mobilecritical PriorityID: react-native-expo

React Native Expo SDK 52+ & Expo Router Standard

Conventions for React Native with Expo SDK 52+: file-based Expo Router v4, New Architecture (Bridgeless + Fabric), FlashList for 60fps lists, and typed environment variables.

Prohibited Anti-Pattern: AI uses outdated React Native Navigation boilerplate or deprecated expo-permissions / bare native modules.

Export Ready-to-Drop Configuration

Select format below to copy code or download file directly.

---
description: React Native Expo SDK 52+ & Expo Router Standard - Conventions for React Native with Expo SDK 52+: file-based Expo Router v4, New Architecture (Bridgeless + Fabric), FlashList for 60fps lists, and typed environment variables.
globs: app/**/*.{ts,tsx}, components/**/*.{ts,tsx}
alwaysApply: true
verified_by: "agentrules.org"
license: "CC-BY-4.0"
source: "https://agentrules.org/rules/react-native-expo"
---

# React Native Expo SDK 52+ & Expo Router Standard

> **Severity**: CRITICAL | **Category**: mobile
> **Anti-Pattern Warning**: AI uses outdated React Native Navigation boilerplate or deprecated expo-permissions / bare native modules.

## System Constraints
You are a senior React Native engineer using Expo SDK 52+ and Expo Router. Never use legacy React Navigation container setup; Expo Router manages navigation natively via the app/ directory. Use @shopify/flash-list instead of legacy FlatList for performance. Use expo-image instead of standard Image for native disk caching.

## Strict Guidelines
- Use Expo Router file-based routing: app/_layout.tsx, app/(tabs)/, app/[id].tsx.
- Replace FlatList with @shopify/flash-list to eliminate frame drops and memory spikes.
- Use expo-image for automatic WebP decoding, blurhash placeholders, and memory-safe caching.
- Never hardcode secrets in process.env; use expo-constants and expo-secure-store for sensitive keys.

## Bad vs Good Implementations
### Expo Image with BlurHash vs Native Image

#### Bad Antipattern (AI Common Hallucination)
> **Why it fails**: Standard React Native Image has poor cache invalidation and drops frames on image-heavy lists.
```tsx
// Anti-pattern: Unoptimized legacy Image without caching
import { Image } from "react-native";

export function Avatar({ url }: { url: string }) {
  // Lacks native disk caching, flashes white on load, memory heavy
  return <Image source={{ uri: url }} style={{ width: 64, height: 64 }} />;
}
```

#### Production Standard (Correct)
> **Standard**: expo-image provides hardware-accelerated rendering, progressive blurhash placeholders, and native disk caching.
```tsx
// Production Standard: expo-image with progressive placeholder
import { Image } from "expo-image";

export function Avatar({ url }: { url: string }) {
  return (
    <Image
      source={url}
      placeholder="|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azasfQ"
      contentFit="cover"
      transition={200}
      style={{ width: 64, height: 64, borderRadius: 32 }}
    />
  );
}
```
Recommended MCP Servers (mcp-serverlist.com)

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

Expo Mobile Preview MCP
Stream simulated device logs and verify Expo config plugins.
Recommended Agent Skills (askills.dev)

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

Expo Router Screen Scaffold
Generate typed Expo Router layouts and screen stacks.
Architectural Specification & Invariant Rationale

Architectural Invariant Design: React Native Expo SDK 52+ & Expo Router Standard

React Native Expo SDK 52+ & Expo Router Standard defines an industrial-grade behavioral standard for mobile engineering. Conventions for React Native with Expo SDK 52+: file-based Expo Router v4, New Architecture (Bridgeless + Fabric), FlashList for 60fps lists, and typed environment variables. 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 uses outdated React Native Navigation boilerplate or deprecated expo-permissions / bare native modules. 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 uses outdated React Native Navigation boilerplate or deprecated expo-permissions / bare native modules.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

Use Expo Router file-based routing

Use Expo Router file-based routing: app/_layout.tsx, app/(tabs)/, app/[id].tsx.

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

Replace FlatList with @shopify/flash-list to eliminate frame drops and memory spikes.

Replace FlatList with @shopify/flash-list to eliminate frame drops and memory spikes.

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

Use expo-image for automatic WebP decoding, blurhash placeholders, and memory-safe caching.

Use expo-image for automatic WebP decoding, blurhash placeholders, and memory-safe caching.

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

Never hardcode secrets in process.env

Never hardcode secrets in process.env; use expo-constants and expo-secure-store for sensitive keys.

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 Expo SDK 52+ & Expo Router Standard critical for AI coding assistants?

Conventions for React Native with Expo SDK 52+: file-based Expo Router v4, New Architecture (Bridgeless + Fabric), FlashList for 60fps lists, and typed environment variables. 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 uses outdated React Native Navigation boilerplate or deprecated expo-permissions / bare native modules.) 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 →
mobile
106

Tauri 2.0 Mobile IPC & Capabilities Permissions Matrix Standard

Tauri v2 introduces a capability-driven permissions system replacing legacy v1 allowlists across iOS and Android runtimes. Failure to constrain IPC command handlers with typed schemas and explicit mobile capability definitions exposes native mobile OS surfaces to arbitrary code execution, permission leakage, and silent serialization failures. Production mobile deployments require strictly typed IPC boundary validation, granular capability scopes, and graceful permission degradation.

mobile
70

Capacitor 7 Native Bridge, Biometric Auth & Android 15 Lifecycle Production Standard

Capacitor 7 enforces strict bridge lifecycle contracts, asynchronous native plugin interop, and mandatory Android 15 edge-to-edge window inset handling. Storing sensitive authentication tokens in unencrypted web storage or failing to bind biometric authentication directly to hardware-backed Keystore or Secure Enclave mechanisms compromises app integrity and causes fatal crash or viewport occlusion issues on modern mobile operating systems.

mobile
58

Tauri 2.0 Mobile IPC Isolation and Capabilities Permission Scoping

Enforces strict capability permission boundaries, payload validation, and secure IPC invoke scoping for Tauri v2 Android and iOS environments. Prevents arbitrary IPC command execution, excessive native privilege granting, and deserialization vulnerabilities across the mobile webview-native boundary.

1 Rule in Stack

React