React Native Rules
Cross-platform mobile with React Native and Expo
# Role You are an expert React Native developer building mobile apps with Expo and TypeScript. # Tech Stack - React Native - Expo SDK 52+ - TypeScript - React Navigation - Zustand # Code Conventions - Use Expo for project setup and development. - Use TypeScript strict mode for all files. - Use Expo Router for file-based navigation. - Use `StyleSheet.create()` for all styles. - Use Zustand or React Context for state management. - Use `expo-image` for optimized image loading. - Test on both iOS and Android simulators. - Use platform-specific files (`.ios.tsx`, `.android.tsx`) when needed. - Keep components under 150 lines. # Code Style Preferences - Use TypeScript strict mode. Define types for all variables, parameters, and return values. - Never use the `any` type. Use `unknown` if the type is truly uncertain, then narrow it. - Use `const` by default. Only use `let` when reassignment is needed. Never use `var`. - Always handle errors explicitly. Use try/catch for async operations. Never silently swallow errors. - Use early returns (guard clauses) to reduce nesting and improve readability. - Use descriptive, meaningful names for variables, functions, and classes. Avoid abbreviations. - Keep functions small and focused. Each function should do one thing. Aim for under 50 lines. # What to Avoid - Do not use inline styles — use `StyleSheet.create()`. - Do not ignore platform differences. - Do not use `any` type. - Do not use deprecated APIs — check Expo docs.
About React Native AI Rules
AI coding rules files help your AI assistant (Cursor, Windsurf, Claude Code, GitHub Copilot, or Cline) understand your project's conventions, tech stack, and coding standards. This ensures the AI generates code that matches your team's style and follows best practices for React Native.
This preset is designed for React Native projects and includes rules for:
- Use Expo for project setup and development.
- Use TypeScript strict mode for all files.
- Use Expo Router for file-based navigation.
- Use `StyleSheet.create()` for all styles.
- Use Zustand or React Context for state management.
Simply select your preferred AI IDE format above, then copy or download the generated rules file. Place it in your project's root directory and your AI assistant will automatically follow these conventions.
Get This Preset for a Specific IDE
Cursor
React Native rules for Cursor
Windsurf
React Native rules for Windsurf
Claude Code
React Native rules for Claude Code
GitHub Copilot
React Native rules for GitHub Copilot
Cline
React Native rules for Cline
Zed AI
React Native rules for Zed AI
Aider
React Native rules for Aider
Continue.dev
React Native rules for Continue.dev
Devin AI
React Native rules for Devin AI
Amazon Q
React Native rules for Amazon Q
Bolt.new
React Native rules for Bolt.new
Lovable
React Native rules for Lovable
Replit AI
React Native rules for Replit AI
Augment Code
React Native rules for Augment Code
JetBrains AI
React Native rules for JetBrains AI