React Native Skills

Mobile development guidance from Vercel covering React Native and Expo best practices, organized into eight priority-ranked categories.

Key Focus Areas

Critical Priority — List Performance

Virtualization with FlashList is the top priority for large datasets. Apply component memoization and stabilize callbacks to prevent unnecessary re-renders in list items.

Animations: Use GPU-friendly properties (transform and opacity), derived values for computed animations, and gesture-based interactions via react-native-reanimated and react-native-gesture-handler.

Navigation: Favor native stack and tab navigators over JavaScript implementations. Native navigators use platform-native transitions and are significantly more performant.

Medium Priority — State Management, Rendering & Monorepo

State: Minimize subscriptions. Use selectors to prevent components from re-rendering on unrelated state slices.

Rendering: Always wrap text in <Text> components. Follow proper text component wrapping rules to avoid layout bugs on Android.

Monorepo: Organize dependencies clearly, separating native packages from JavaScript-only ones. Use Expo's managed workflow where possible to simplify dependency management.

Configuration (Lower Priority)

Font loading via config plugins
Import organization and barrel file avoidance
Internationalization setup through config plugins

Practical Application

The document is designed for developers actively working on React Native projects who need reference guidance on specific optimization challenges. Each rule includes explanations, code examples demonstrating problems and solutions, and contextual references.

Installation

npx skills add https://github.com/vercel-labs/agent-skills --skill react-native-skills

Mirrored from https://github.com/vercel-labs/agent-skills — original author: vercel-labs, license: MIT. This is an unclaimed mirror. Content and ownership transfer to the author when they claim this account.

react-native-skills