vercel-react-native-skills Checked

A skill from the GitHub repository vercel-labs/agent-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.

A skill from the GitHub repository vercel-labs/agent-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)