React Native Skills
Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations.
When to Apply
Reference these guidelines when:
- •Building React Native or Expo apps
- •Optimizing list and scroll performance
- •Implementing animations with Reanimated
- •Working with images and media
- •Configuring native modules or fonts
- •Structuring monorepo projects with native dependencies
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | List Performance | CRITICAL | list-performance- |
| 2 | Animation | HIGH | animation- |
| 3 | Navigation | HIGH | navigation- |
| 4 | UI Patterns | HIGH | ui- |
| 5 | State Management | MEDIUM | react-state- |
| 6 | Rendering | MEDIUM | rendering- |
| 7 | Monorepo | MEDIUM | monorepo- |
| 8 | Configuration | LOW | fonts-, imports- |
Quick Reference
1. List Performance (CRITICAL)
- •
list-performance-virtualize- Use FlashList for large lists - •
list-performance-item-memo- Memoize list item components - •
list-performance-callbacks- Stabilize callback references - •
list-performance-inline-objects- Avoid inline style objects - •
list-performance-function-references- Extract functions outside render - •
list-performance-images- Optimize images in lists - •
list-performance-item-expensive- Move expensive work outside items - •
list-performance-item-types- Use item types for heterogeneous lists
2. Animation (HIGH)
- •
animation-gpu-properties- Animate only transform and opacity - •
animation-derived-value- Use useDerivedValue for computed animations - •
animation-gesture-detector-press- Use Gesture.Tap instead of Pressable
3. Navigation (HIGH)
- •
navigation-native-navigators- Use native stack and native tabs over JS navigators
4. UI Patterns (HIGH)
- •
ui-expo-image- Use expo-image for all images - •
ui-image-gallery- Use Galeria for image lightboxes - •
ui-pressable- Use Pressable over TouchableOpacity - •
ui-safe-area-scroll- Handle safe areas in ScrollViews - •
ui-scrollview-content-inset- Use contentInset for headers - •
ui-menus- Use native context menus - •
ui-native-modals- Use native modals when possible - •
ui-measure-views- Use onLayout, not measure() - •
ui-styling- Use StyleSheet.create or Nativewind
5. State Management (MEDIUM)
- •
react-state-minimize- Minimize state subscriptions - •
react-state-dispatcher- Use dispatcher pattern for callbacks - •
react-state-fallback- Show fallback on first render - •
react-compiler-destructure-functions- Destructure for React Compiler - •
react-compiler-reanimated-shared-values- Handle shared values with compiler
6. Rendering (MEDIUM)
- •
rendering-text-in-text-component- Wrap text in Text components - •
rendering-no-falsy-and- Avoid falsy && for conditional rendering
7. Monorepo (MEDIUM)
- •
monorepo-native-deps-in-app- Keep native dependencies in app package - •
monorepo-single-dependency-versions- Use single versions across packages
8. Configuration (LOW)
- •
fonts-config-plugin- Use config plugins for custom fonts - •
imports-design-system-folder- Organize design system imports - •
js-hoist-intl- Hoist Intl object creation
How to Use
Read individual rule files for detailed explanations and code examples:
code
rules/list-performance-virtualize.md rules/animation-gpu-properties.md
Each rule file contains:
- •Brief explanation of why it matters
- •Incorrect code example with explanation
- •Correct code example with explanation
- •Additional context and references
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md