written by Forgecat

React Native Skills

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.

Tags

• vercel
• frontend
• agent-skill

Installation

Skills

• vercel-react-native-skills — 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.

Details

Compatibility

Platforms

Dependencies

• None

---

written by original source

React Native Guidelines

A structured repository for creating and maintaining React Native Best Practices optimized for agents and LLMs.

Structure

• rules/ - Individual rule files (one per rule)
  • _sections.md - Section metadata (titles, impacts, descriptions)
  • _template.md - Template for creating new rules
  • area-description.md - Individual rule files
• metadata.json - Document metadata (version, organization, abstract)
• AGENTS.md - Compiled output (generated)

Rules

Core Rendering (CRITICAL)

• rendering-text-in-text-component.md - Wrap strings in Text components
• rendering-no-falsy-and.md - Avoid falsy && operator in JSX

List Performance (HIGH)

• list-performance-virtualize.md - Use virtualized lists (LegendList, FlashList)
• list-performance-function-references.md - Keep stable object references
• list-performance-callbacks.md - Hoist callbacks to list root
• list-performance-inline-objects.md - Avoid inline objects in renderItem
• list-performance-item-memo.md - Pass primitives for memoization
• list-performance-item-expensive.md - Keep list items lightweight
• list-performance-images.md - Use compressed images in lists
• list-performance-item-types.md - Use item types for heterogeneous lists

Animation (HIGH)

• animation-gpu-properties.md - Animate transform/opacity instead of layout
• animation-gesture-detector-press.md - Use GestureDetector for press animations
• animation-derived-value.md - Prefer useDerivedValue over useAnimatedReaction

Scroll Performance (HIGH)

• scroll-position-no-state.md - Never track scroll in useState

Navigation (HIGH)

• navigation-native-navigators.md - Use native stack and native tabs

React State (MEDIUM)

• react-state-dispatcher.md - Use functional setState updates
• react-state-fallback.md - State should represent user intent only
• react-state-minimize.md - Minimize state variables, derive values

State Architecture (MEDIUM)

• state-ground-truth.md - State must represent ground truth

React Compiler (MEDIUM)

• react-compiler-destructure-functions.md - Destructure functions early
• react-compiler-reanimated-shared-values.md - Use .get()/.set() for shared values

User Interface (MEDIUM)

• ui-expo-image.md - Use expo-image for optimized images
• ui-image-gallery.md - Use Galeria for lightbox/galleries
• ui-menus.md - Native dropdown and context menus with Zeego
• ui-native-modals.md - Use native Modal with formSheet
• ui-pressable.md - Use Pressable instead of TouchableOpacity
• ui-measure-views.md - Measuring view dimensions
• ui-safe-area-scroll.md - Use contentInsetAdjustmentBehavior
• ui-scrollview-content-inset.md - Use contentInset for dynamic spacing
• ui-styling.md - Modern styling patterns (gap, boxShadow, gradients)

Design System (MEDIUM)

• design-system-compound-components.md - Use compound components

Monorepo (LOW)

• monorepo-native-deps-in-app.md - Install native deps in app directory
• monorepo-single-dependency-versions.md - Single dependency versions

Third-Party Dependencies (LOW)

• imports-design-system-folder.md - Import from design system folder

JavaScript (LOW)

• js-hoist-intl.md - Hoist Intl formatter creation

Fonts (LOW)

• fonts-config-plugin.md - Load fonts natively at build time

Creating a New Rule

1. Copy rules/_template.md to rules/area-description.md
2. Choose the appropriate area prefix:
   • rendering- for Core Rendering
   • list-performance- for List Performance
   • animation- for Animation
   • scroll- for Scroll Performance
   • navigation- for Navigation
   • react-state- for React State
   • state- for State Architecture
   • react-compiler- for React Compiler
   • ui- for User Interface
   • design-system- for Design System
   • monorepo- for Monorepo
   • imports- for Third-Party Dependencies
   • js- for JavaScript
   • fonts- for Fonts
3. Fill in the frontmatter and content
4. Ensure you have clear examples with explanations

Rule File Structure

Each rule file should follow this structure:

Correct (description of what's right):

Reference: Link