skilld
All skills
vercel-labs avatar

/react-native-skills

@757ccb4 official
by Vercel Labsvercel-labs/agent-skills32k stars
2,784

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

  • 42 files
  • 155.3 KB
  • MIT
  • Updated 8 months ago
  • GitHub

Ask your Agent

Use this Skill: https://skilld.dev/gh/vercel-labs/agent-skills/react-native-skills

This session only. Nothing lands on disk.

SKILL.md

≈79 tokens always: the name and description. ≈1k when used: this file. ≈39k more on demand in 41 files.

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

Source: SKILL.md on GitHub

Third-party checks

No third-party reports yet.

Provenance

Signed by skilld at 757ccb4. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub last month.

Steadyupdated 8 months ago

Capability

metadata
{
  "author": "vercel",
  "version": "1.0.0"
}

Topics

  • Performance
  • react-native
  • expo
  • animations
  • list-virtualization
  • mobile
  • reanimated
  • native-modules
  • ui-patterns
  • monorepo

README badge

README badge for vercel-labs/agent-skills/react-native-skills

What it does

Provides React Native and Expo best practices organized by performance impact, covering list virtualization, animations with Reanimated, navigation patterns, and native module configuration. Use when optimizing list rendering, implementing GPU-accelerated animations, or structuring React Native projects with native dependencies.

Generated from the current SKILL.md.

Frequently asked

Does this skill cover both React Native and Expo?
Yes. The skill provides best practices for React Native and Expo applications, including Expo-specific patterns like expo-image and config plugins.
What animation library does this skill assume?
The skill focuses on React Native Reanimated for animations, with rules like using useDerivedValue and animating only transform and opacity properties.
Does this cover list performance optimization?
Yes. List performance is the highest priority category, covering FlashList virtualization, memoization, callback stabilization, and image optimization in lists.
Will this skill help with monorepo setup?
Yes, but only for monorepos with native dependencies. The skill includes guidance on structuring packages and managing dependency versions across a monorepo.
Does this cover state management frameworks like Redux or Zustand?
No. The skill covers only general state subscription patterns and dispatcher patterns, not specific state management libraries.

Generated from the current SKILL.md. These answers refresh after source changes.