Vercel React Native Skills

# 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:

``` 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`