Vercel React Native Skills

1---
2name: vercel-react-native-skills
3description:
4  React Native and Expo best practices for building performant mobile apps. Use
5  when building React Native components, optimizing list performance,
6  implementing animations, or working with native modules. Triggers on tasks
7  involving React Native, Expo, mobile performance, or native platform APIs.
8license: MIT
9metadata:
10  author: vercel
11  version: '1.0.0'
12---
13 
14# React Native Skills
15 
16Comprehensive best practices for React Native and Expo applications. Contains
17rules across multiple categories covering performance, animations, UI patterns,
18and platform-specific optimizations.
19 
20## When to Apply
21 
22Reference these guidelines when:
23 
24- Building React Native or Expo apps
25- Optimizing list and scroll performance
26- Implementing animations with Reanimated
27- Working with images and media
28- Configuring native modules or fonts
29- Structuring monorepo projects with native dependencies
30 
31## Rule Categories by Priority
32 
33| Priority | Category         | Impact   | Prefix               |
34| -------- | ---------------- | -------- | -------------------- |
35| 1        | List Performance | CRITICAL | `list-performance-`  |
36| 2        | Animation        | HIGH     | `animation-`         |
37| 3        | Navigation       | HIGH     | `navigation-`        |
38| 4        | UI Patterns      | HIGH     | `ui-`                |
39| 5        | State Management | MEDIUM   | `react-state-`       |
40| 6        | Rendering        | MEDIUM   | `rendering-`         |
41| 7        | Monorepo         | MEDIUM   | `monorepo-`          |
42| 8        | Configuration    | LOW      | `fonts-`, `imports-` |
43 
44## Quick Reference
45 
46### 1. List Performance (CRITICAL)
47 
48- `list-performance-virtualize` - Use FlashList for large lists
49- `list-performance-item-memo` - Memoize list item components
50- `list-performance-callbacks` - Stabilize callback references
51- `list-performance-inline-objects` - Avoid inline style objects
52- `list-performance-function-references` - Extract functions outside render
53- `list-performance-images` - Optimize images in lists
54- `list-performance-item-expensive` - Move expensive work outside items
55- `list-performance-item-types` - Use item types for heterogeneous lists
56 
57### 2. Animation (HIGH)
58 
59- `animation-gpu-properties` - Animate only transform and opacity
60- `animation-derived-value` - Use useDerivedValue for computed animations
61- `animation-gesture-detector-press` - Use Gesture.Tap instead of Pressable
62 
63### 3. Navigation (HIGH)
64 
65- `navigation-native-navigators` - Use native stack and native tabs over JS navigators
66 
67### 4. UI Patterns (HIGH)
68 
69- `ui-expo-image` - Use expo-image for all images
70- `ui-image-gallery` - Use Galeria for image lightboxes
71- `ui-pressable` - Use Pressable over TouchableOpacity
72- `ui-safe-area-scroll` - Handle safe areas in ScrollViews
73- `ui-scrollview-content-inset` - Use contentInset for headers
74- `ui-menus` - Use native context menus
75- `ui-native-modals` - Use native modals when possible
76- `ui-measure-views` - Use onLayout, not measure()
77- `ui-styling` - Use StyleSheet.create or Nativewind
78 
79### 5. State Management (MEDIUM)
80 
81- `react-state-minimize` - Minimize state subscriptions
82- `react-state-dispatcher` - Use dispatcher pattern for callbacks
83- `react-state-fallback` - Show fallback on first render
84- `react-compiler-destructure-functions` - Destructure for React Compiler
85- `react-compiler-reanimated-shared-values` - Handle shared values with compiler
86 
87### 6. Rendering (MEDIUM)
88 
89- `rendering-text-in-text-component` - Wrap text in Text components
90- `rendering-no-falsy-and` - Avoid falsy && for conditional rendering
91 
92### 7. Monorepo (MEDIUM)
93 
94- `monorepo-native-deps-in-app` - Keep native dependencies in app package
95- `monorepo-single-dependency-versions` - Use single versions across packages
96 
97### 8. Configuration (LOW)
98 
99- `fonts-config-plugin` - Use config plugins for custom fonts
100- `imports-design-system-folder` - Organize design system imports
101- `js-hoist-intl` - Hoist Intl object creation
102 
103## How to Use
104 
105Read individual rule files for detailed explanations and code examples:
106 
107```
108rules/list-performance-virtualize.md
109rules/animation-gpu-properties.md
110```
111 
112Each rule file contains:
113 
114- Brief explanation of why it matters
115- Incorrect code example with explanation
116- Correct code example with explanation
117- Additional context and references
118 
119## Full Compiled Document
120 
121For the complete guide with all rules expanded: `AGENTS.md`
122