Skip to main content
rule

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.

Install into Cursor · Manually: put the files in place All methods and platforms ↓
.cursor/rules/react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdc
Open on GitHub

What 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/plugin after nativewind/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.mdc

Frontmatter: description, globs, alwaysApply

Step 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

Similar IDE rules

Everything for Mobile →

From the same set210

react-router-v7 Enforces React Router v7 conventions for route modules, deterministic loaders, action mutations, and typed routing in Cursor. ★ 41,024repo stars react-redux-typescript-cursorrules-prompt-file This Cursor rule guides React work with Redux and TypeScript, covering component style, state structure, and typed hooks. Use it in a matching project. ★ 41,024repo stars react-query-cursorrules-prompt-file A Cursor rule that tells the agent how to write React Query code: where QueryClient lives, how hooks and query keys are named. ★ 41,024repo stars react-nextjs-ui-development-cursorrules-prompt-fil Configures Cursor for React and Next.js App Router development. Forces the agent to outline pseudocode first and maintain dual Vercel and Replit support. ★ 41,024repo stars react-native-expo-cursorrules-prompt-file A Cursor rule that tells the agent how to write React Native code with Expo. Useful when you want new screens and components to follow one stack. ★ 41,024repo stars react-mobx-cursorrules-prompt-file Cursor rule for building React apps with MobX. It configures state stores, hook conventions, and strict MobX patterns for code generation. ★ 41,024repo stars react-graphql-apollo-client-cursorrules-prompt-file This rule guides React work with GraphQL and Apollo Client in Cursor. Use it when a project needs consistent patterns for operations, hooks, and error states. ★ 41,024repo stars react-formengine-ai-form-builder-cursorrules-prompt-file A Cursor rule that has the agent build React forms from a screenshot, PDF, HTML or text description and return a FormEngine JSON schema plus a runnable App.tsx. ★ 41,024repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor