CLAUDE.MDReact Native & Expo Router CLAUDE.md Generator | Free & Offline
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.
CLAUDE.mdFailure 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 CLAUDE.md Repository Guidelines via Terminal
Step 1: Open Project Directory & Verify Target Placement
Open your terminal and navigate to your project root folder where the CLAUDE.md 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 CLAUDE.md:
Terminal One-Liner Install
Run directly in your project root to stream and write this rule file with one command.
curl -fsSL "https://www.devscratchpad.tech/api/raw/claude-md/react-native-expo" -o "CLAUDE.md"Step 3: Verify and Activate with AI Agent
Launch your AI coding assistant (Claude Code & Agent Workflows). The assistant will automatically discover CLAUDE.md in your repository and apply the architectural guardrails, type constraints, and verification protocols during code generation.
CLAUDE.md Repository Guidelines Directory
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.