React Native Cursor Rules Template

---
description: "Component Structure"
alwaysApply: false
---
- Use functional components with hooks.
- Use    spaces for indentation.
- Use camelCase for variables and functions.
- Use StyleSheet.create() for static styles.
- Keep platform-specific code isolated with Platform.OS checks.
- Use .native.tsx and .web.tsx extensions for platform-specific files.

---
description: "Performance"
alwaysApply: false
---
- Use FlatList instead of ScrollView for long lists.
- Implement getItemLayout for fixed-height list items.
- Use React.memo and useCallback for expensive re-renders.
- Use InteractionManager for heavy operations after animations.
- Optimize images: use proper dimensions and caching.
- Use Hermes engine for better startup performance.

---
description: "Navigation"
alwaysApply: false
---
- Use React Navigation for screen-based navigation.
- Use Stack Navigator for push/pop navigation flows.
- Use Tab Navigator for bottom tab navigation.
- Use type-safe navigation with TypeScript generics.
- Pass minimal data through route params — use context or state management.
- Handle deep linking with linking configuration.

---
description: "State Management"
alwaysApply: false
---
- Use React Context for simple shared state.
- Use Zustand or Redux Toolkit for complex global state.
- Use React Query (TanStack Query) for server state.
- Use MMKV for fast local key-value storage.
- Persist important state with AsyncStorage or MMKV.
- Handle app state changes (foreground/background) with AppState API.