CURSOR RULESExpo & React Native Cursor Rules (.mdc) | Modern Mobile Architecture
Production-grade architectural rulebook for React Native & Expo Router. Engineered to eliminate LLM hallucinations, enforce strict deterministic conventions, and prevent architectural drift across Cursor IDE, Claude Code CLI, and autonomous multi-agent pipelines.
.cursor/rules/expo.mdcFailure Patterns Prevented for React Native & Expo Router
Modern React Native uses Expo Router v3/v4 with file-based layout groups (app/(tabs)), typed routes, and React Native New Architecture (Fabric/TurboModules). LLMs constantly generate obsolete React Navigation Stack wrappers, deprecated AsyncStorage imports, and un-safe-area layout overflows.
- Invokes deprecated or removed APIs from older model training weights
- Generates conflicting configuration files and invalid imports
- Silently drops type-safety, boundaries, or transaction isolation
Code Standards: Anti-Pattern vs Verified Implementation
// Discouraged: Missing safe-area insets, slow standard Image component, obsolete navigation prop
export default function BadProfile({ navigation }: any) {
return (
<div style={{ marginTop: 50 }}>
<img src="avatar.png" />
<button onClick={() => navigation.navigate("Home")}>Go</button>
</div>
);
}import { View, Text, StyleSheet } from "react-native";
import { Image } from "expo-image";
import { useSafeAreaInsets } from "react-native-safe-area-context";
export default function ProfileScreen() {
const insets = useSafeAreaInsets();
return (
<View style={[styles.container, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
<Image
source={{ uri: "https://example.com/avatar.png" }}
style={styles.avatar}
contentFit="cover"
transition={200}
/>
<Text style={styles.title}>User Profile</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: "#fff", paddingHorizontal: 16 },
avatar: { width: 80, height: 80, borderRadius: 40 },
title: { fontSize: 20, fontWeight: "600", marginTop: 12 },
});How to Install React Native & Expo Router Cursor Rules (.mdc) via Terminal
Step 1: Open Project Directory & Verify Target Placement
Open your terminal and navigate to your project root folder where the .cursor/rules/expo.mdc file will reside. Ensure the file is placed at the exact path below relative to your project root so the AI engine automatically loads it:
Step 2: Fetch Rule File via Terminal Command
Run curl, PowerShell, or wget to stream the rule directly from the DevScratchpad raw API endpoint and write it to .cursor/rules/expo.mdc:
Terminal One-Liner Install
Run directly in your project root to stream and write this rule file with one command.
mkdir -p ".cursor/rules" && curl -fsSL "https://www.devscratchpad.tech/api/raw/cursor-rules/react-native-expo" -o ".cursor/rules/expo.mdc"Step 3: Verify and Activate with AI Agent
Launch your AI coding assistant (Cursor IDE & Composer). The assistant will automatically discover .cursor/rules/expo.mdc in your repository and apply the architectural guardrails, type constraints, and verification protocols during code generation.
Cursor Rules (.mdc) Directory & Generator
Inspect the complete specification manual, glob patterns, directory rules, and all available presets in our central directory.
Technical FAQ: React Native & Expo Router AI Rulebooks
Does this support Expo Router v3 and v4?
Yes, it enforces typed routes, layout groups (tabs), and useLocalSearchParams.
Why use expo-image over React Native Image?
expo-image provides hardware decoding, progressive loading, blurhash previews, and superior memory caching on iOS and Android.