React Native Expo Router — Cursor rule: setup
This rule guides React Native projects using Expo, TypeScript, and Expo Router. It also covers NativeWind and Tailwind CSS versions, Babel configuration, and Windows terminal commands.
.cursor/rules/react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdcWhat react-native-expo-router-typescript-windows-cursorrules-prompt-file does
The rule recommends functional components with hooks, TypeScript, Expo Router for navigation, and StyleSheet for styling. Its suggested project layout includes assets/, src/, and app/; it also points to Expo’s asset system, SecureStore, and offline support.
A compatibility section pairs [email protected] with [email protected] and gives Babel plugin ordering guidance. If process(css).then(cb) appears, it suggests removing both packages and installing those versions. On Windows, project commands should use PowerShell, and the rule says to check whether a package is already installed before adding it. A different package pairing can trigger the cited build error.
For Cursor, place the file at .cursor/rules/react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdc. Its glob covers **/*, while alwaysApply is false.
What it helps with
- structure an Expo Router project
- choose compatible NativeWind and Tailwind CSS versions
- configure Babel plugins for NativeWind and Reanimated
- check for an installed package in Windows
Example prompts for the agent
- Set up Expo Router navigation and follow the project layout in the rule.
- Check whether the NativeWind Babel setup places
react-native-reanimated/pluginafternativewind/babel. - Use PowerShell to check whether a package is installed before adding it.
How to install react-native-expo-router-typescript-windows-cursorrules-prompt-file
Manually: put the files in place
.cursor/rules/react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdcFrontmatter: description, globs, alwaysApply
Manually: put the files in place
.claude/rules/react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdThe paths frontmatter field limits the files: move globs from the source into paths
AGENTS.md
Codex reads AGENTS.md: paste the rule text there
Manually: put the files in place
.github/instructions/react-native-expo-router-typescript-windows-cursorrules-prompt-file.instructions.mdThe applyTo field sets which files it applies to: move globs from the source into applyTo
Manually: put the files in place
.devin/rules/react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdManually: put the files in place
.clinerules/react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdStep by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules
Questions about react-native-expo-router-typescript-windows-cursorrules-prompt-file
How do I install react-native-expo-router-typescript-windows-cursorrules-prompt-file in Cursor?
Add the rule file at .cursor/rules/react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdc.
What does react-native-expo-router-typescript-windows-cursorrules-prompt-file do?
It provides project guidance for React Native with Expo, TypeScript, and Expo Router, including folder layout, NativeWind setup, and PowerShell use.
Which NativeWind and Tailwind CSS versions does the rule recommend?
It pairs [email protected] with [email protected]. The Babel guidance also places react-native-reanimated/plugin after nativewind/babel.
Source text
react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdc · CC0-1.0
--- description: "Cursor rules for React Native Expo Router Typescript Windows." globs: **/* alwaysApply: false --- // React Native Expo .cursorrules // React Native Expo Best Practices const reactNativeExpoBestPractices = [ "Use functional components with hooks.", "Leverage Expo SDK features and APIs.", "Implement navigation using Expo Router.", "Manage assets with Expo's asset system for images and fonts.", "Ensure robust error handling and crash reporting.", "Utilize Expo's push notification system.", "Adopt TypeScript for type safety.", "Apply consistent styling using StyleSheet.", "Incorporate Expo's vector icons.", "Secure sensitive data with Expo's SecureStore.", "Implement proper offline support.", "Optimize performance following React Native best practices.", "Deploy updates using Expo's OTA mechanism.", "Style components using NativeWind.", ]; // Folder Structure const folderStructure = ` assets/ src/ components/ screens/ navigation/ hooks/ utils/ app/ _layout.tsx index.tsx App.js app.json `; // Package Version Compatibility Notes const packageCompatibilityNotes = [ "NativeWind and Tailwind CSS compatibility:", "- Use [email protected] with [email protected].", "- Higher versions may cause 'process(css).then(cb)' errors.", "- If errors occur, remove both packages and reinstall specific versions:", " npm remove nativewind tailwindcss", " npm install [email protected] [email protected]", "Babel configuration for NativeWind:", "- Include 'nativewind/babel' in the plugins array.", "- Avoid using jsxImportSource in presets.", "- Ensure 'react-native-reanimated/plugin' follows 'nativewind/babel'." ]; // Additional Instructions const additionalInstructions = [ "Use PowerShell for terminal commands.", "Before installing a new package, check if it's already installed:", " Get-ChildItem -Recurse -Filter package-name", "If installed, upgrade using:", " expo upgrade <package-name>", "or", " npm install <package-name>", "if not supported by Expo.", "Use PowerShell commands to manage the project, e.g., moving and renaming files:", " Move-Item -Path .\\old\\path\\file.txt -Destination .\\new\\path\\newname.txt", "If unsure about the current structure or details, use PowerShell to list out necessary information:", " Get-ChildItem -Recurse", "Utilize official Expo libraries and upgrade them using Expo's commands.", "Avoid deleting existing functionality or files without a valid reason.", "Follow the recommended folder structure and maintain organized code for scalability and readability.", "Implement navigation using Expo Router for clean and declarative routing." ];
© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules