---
id: sm-vercel-react-native-skills
name: "vercel-react-native-skills"
url: https://skills.yangsir.net/skill/sm-vercel-react-native-skills
author: vercel-labs
domain: ai-frontend-engineering
tags: ["vercel", "react-native", "mobile-development", "cross-platform-development", "expo"]
install_count: 123800
rating: 4.80 (2000 reviews)
github: https://github.com/vercel-labs/agent-skills
---

# vercel-react-native-skills

> Vercel官方推出的React Native智能代理技能集，旨在帮助移动开发者高效构建和部署跨平台应用。

**Stats**: 123,800 installs · 4.8/5 (2000 reviews)

## Before / After 对比

### Vercel React Native开发提效

## Readme

# 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`
Weekly Installs62.8KRepository[vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills)GitHub Stars23.2KFirst SeenJan 26, 2026Security Audits[Gen Agent Trust HubPass](/vercel-labs/agent-skills/vercel-react-native-skills/security/agent-trust-hub)[SocketPass](/vercel-labs/agent-skills/vercel-react-native-skills/security/socket)[SnykPass](/vercel-labs/agent-skills/vercel-react-native-skills/security/snyk)Installed onopencode47.2Kcodex46.3Kgemini-cli45.5Kgithub-copilot43.0Kcursor39.9Kclaude-code39.4K

---
*Source: https://skills.yangsir.net/skill/sm-vercel-react-native-skills*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-vercel-react-native-skills/markdown*