Add NativeWind and Expo Router cursorrules under Mobile Development#298
Add NativeWind and Expo Router cursorrules under Mobile Development#298sanketsahu wants to merge 1 commit into
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds two Cursor rules documentation files for Expo Router and NativeWind and updates the README Mobile Development list to include Expo Router; files provide detailed guidance for routing, layouts, styling, platform differences, and common pitfalls. ChangesMobile Development Cursor Rules
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@rules/nativewind-cursorrules-prompt-file.mdc`:
- Line 34: The current line conflates opacity and shadow as "web only"; update
the text so that platform scope applies only to shadow semantics/utilities:
create separate bullets or clauses where `opacity-*` is described as supported
on React Native (keep `opacity-*` as platform-appropriate) and qualify
shadow-specific items (e.g., `shadow-inner`, arbitrary `shadow-[...]` and shadow
semantics) as "web only" for NativeWind; reference the terms `opacity-*`,
`shadow`, `shadow-inner`, and `shadow-[...]` when editing so the web-only note
is scoped to shadow only.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 107580c0-9ee5-4773-8500-e9a9ec6b7c02
📒 Files selected for processing (3)
README.mdrules/expo-router-cursorrules-prompt-file.mdcrules/nativewind-cursorrules-prompt-file.mdc
| - Sizing: `w-*`, `h-*`, `w-full`, `max-w-md` | ||
| - Colors and typography: `bg-*`, `text-*`, `font-bold`, `text-lg` | ||
| - Borders and radius: `border`, `border-2`, `rounded-md`, `border-border` | ||
| - Opacity, shadow (web only — for native use `shadow-*` with explicit color) |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In current NativeWind docs, are opacity utilities supported on React Native, and which shadow utilities/behaviors differ between native and web?
💡 Result:
In current NativeWind documentation, opacity utilities (e.g., opacity-{n}, opacity-[n]) are supported on React Native [1]. Regarding shadow utilities, there are distinct differences between native and web behaviors due to React Native's underlying styling constraints [2][3][4]: 1. Supported Utilities: Standard shadow utilities such as shadow, shadow-{n}, and shadow-none are supported [2]. 2. Web-Only Utilities: Certain complex shadow utilities, including shadow-inner and arbitrary values (shadow-[n]), are explicitly marked as web-only in the documentation [2]. 3. Native-Specific Behavior: - Shadows on native platforms often require an explicit background color to render correctly [2][3]. - NativeWind maps Tailwind shadow classes to React Native-specific properties, primarily utilizing shadowOffset, shadowColor, and shadowOpacity on iOS, and elevation on Android [5][3][6]. - Users are advised that shadow inconsistencies across platforms can occur [7][6]. While newer React Native versions (0.79+) have introduced a cross-platform boxShadow prop, NativeWind's integration of these features is evolving as the ecosystem transitions toward the new architecture [5][6].
Citations:
- 1: https://www.nativewind.dev/docs/tailwind/effects/opacity
- 2: https://www.nativewind.dev/docs/tailwind/effects/box-shadow
- 3: shadow or drop-shadow wont work on Android or iOS nativewind/nativewind#130
- 4: https://www.nativewind.dev/v5
- 5: boxShadow support on New Architecture nativewind/nativewind#1442
- 6: boxShadow support on New Architecture nativewind/nativewind#1512
- 7: https://dev.to/sapotacorp/mobile-stack-decision-flutterflow-vs-react-native-vs-flutter-18h8
Fix misleading “web only” wording on line 34 (scope it to shadow, not opacity).
Line 34 currently reads as if both opacity and shadow are web-only; NativeWind opacity utilities are supported on React Native. Split/reword so “web only” applies to shadow-specific semantics/utilities (e.g., shadow-inner / arbitrary shadow-[...]), while keeping opacity-* platform-appropriate (e.g., its own bullet).
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@rules/nativewind-cursorrules-prompt-file.mdc` at line 34, The current line
conflates opacity and shadow as "web only"; update the text so that platform
scope applies only to shadow semantics/utilities: create separate bullets or
clauses where `opacity-*` is described as supported on React Native (keep
`opacity-*` as platform-appropriate) and qualify shadow-specific items (e.g.,
`shadow-inner`, arbitrary `shadow-[...]` and shadow semantics) as "web only" for
NativeWind; reference the terms `opacity-*`, `shadow`, `shadow-inner`, and
`shadow-[...]` when editing so the web-only note is scoped to shadow only.
PatrickJS
force-pushed
the
add-nativewind-expo-router-rules
branch
from
8624255 to
63dce1d
Compare
PatrickJS
force-pushed
the
add-nativewind-expo-router-rules
branch
from
63dce1d to
1ce0819
Compare
1 participant
Add NativeWind and Expo Router cursorrules
Adds two related
.mdcrules for the React Native / Expo stack. Both filled gaps I hit repeatedly when agents (Cursor and Claude Code) work on Expo apps.NativeWind (rules/nativewind-cursorrules-prompt-file.mdc)
NativeWind ships Tailwind classes into RN. The repo has many web-Tailwind rules but no dedicated NativeWind rule. Coverage:
withNativeWind,global.css,nativewind-env.d.ts)classNamevsstylediscipline and when to use which:hover/:focus-visible, no grid, noanimate-*)useColorScheme()fromnativewindios:,android:,web:)Expo Router (rules/expo-router-cursorrules-prompt-file.mdc)
The existing
react-native-expo-router-typescript-windowsrule is broad (mixes RN, Expo, Windows setup) and dated (pins NativeWind 2.x). A focused, modern Expo Router rule is additive. Coverage:app/,_layout.tsx, route groups(name), dynamic[id]/ catch-all[...slug])useLocalSearchParams, typed routes viaexperiments.typedRoutes<Link>vs imperativeuseRouter()— when each is correct<Redirect>overuseEffectfor SSR-safety<Stack.Screen options={{ title }} />Both entries added under
### Mobile Developmentin alphabetical position.Format follows the modern Cursor Project Rules spec (
description,globs,alwaysApplyfrontmatter) per CONTRIBUTING.md.Summary by CodeRabbit