Add React Native Expo Router TypeScript Windows .cursorrules File

[ajhous44]

Add React Native Expo Router TypeScript Windows .cursorrules File

This pull request introduces a .cursorrules file designed for a React Native Expo project utilizing Expo Router, TypeScript, and development on Windows. It provides detailed guidelines and best practices tailored to this setup, ensuring consistency and addressing specific library configurations and issues.

Key Highlights:

Best Practices

• Emphasizes the use of functional components, TypeScript, and Expo Router for navigation.
• Includes guidance for styling using StyleSheet and NativeWind, asset management with Expo's asset system, and push notification integration.

Folder Structure

• Recommends an organized directory layout with: assets/ src/ components/ screens/ hooks/ utils/ app/ _layout.tsx index.tsx

Specific Library Compatibility Notes

• NativeWind and Tailwind CSS:
• Specifies using [email protected] and [email protected] due to known issues with higher versions (e.g., "process(css).then(cb)" errors).
• Provides clear steps for uninstalling incompatible versions and installing the correct versions:

  npm remove nativewind tailwindcss
  npm install [email protected] [email protected]
  

• Babel Configuration:
• Includes instructions to configure nativewind/babel in the Babel plugins array:
  • Ensure the plugin is properly ordered with react-native-reanimated/plugin following nativewind/babel.
• Avoids using jsxImportSource in presets.

Additional Instructions

• Details PowerShell commands for project management:

• Checking installed packages:

  Get-ChildItem -Recurse -Filter package-name
  

• Renaming/moving files:

  Move-Item -Path .\old\path\file.txt -Destination .\new\path\newname.txt
  

• Listing directory structures:

  Get-ChildItem -Recurse
  

• Encourages using Expo's official libraries and upgrading with Expo commands: expo upgrade <package-name>

• Provides practical tips for maintaining project scalability and readability.

Summary

This .cursorrules file directly addresses common setup challenges for projects using nativewind, tailwindcss, and Expo Router, ensuring developers can resolve issues efficiently and maintain a clean, organized codebase.