Engineering
vercel-react-native-skills avatar

vercel-react-native-skills

React Native and Expo best practices for performant mobile apps. Covers list virtualization, animations with Reanimated, UI patterns, and native platform API optimizations.

Introduction

The vercel-react-native-skills repository provides a comprehensive collection of best practices and architectural patterns specifically designed for React Native and Expo mobile applications. It acts as a specialized knowledge base for AI agents to assist developers in building high-performance, maintainable, and platform-optimized mobile software. The skill is intended for software engineers, mobile developers, and technical leads who need to navigate the complexities of bridge communication, native module integration, and mobile-specific rendering bottlenecks. It is particularly valuable during the development phase of cross-platform apps where performance parity with native code is a priority.

  • Expert rules for critical list performance including FlashList implementation, component memoization, and callback stabilization.

  • Advanced animation strategies utilizing React Native Reanimated, including GPU-accelerated properties, gesture handling, and derived value calculations.

  • UI design patterns optimized for mobile, such as safe area handling, native modal usage, image optimization with expo-image, and Pressable interaction standards.

  • State management best practices focusing on minimizing subscriptions, utilizing functional updates, and preparing for the React Compiler.

  • Architectural guidance for monorepo structures, native dependency management, and configuration plugins for fonts and assets.

  • Automated assistance for detecting common pitfalls like inline style objects, expensive work in render functions, and incorrect conditional rendering.

  • Best applied when performing code reviews, refactoring complex UI components, or diagnosing performance regressions in mobile lists and navigation.

  • Agents will trigger this skill when tasks involve keywords such as React Native, Expo, mobile performance, native modules, Reanimated, or specific layout/rendering issues.

  • The repository is organized by impact (CRITICAL, HIGH, MEDIUM, LOW) to help the agent prioritize remediation tasks effectively.

  • Follow the rule hierarchy to ensure that list virtualization and animation smoothness are addressed before low-impact configuration adjustments.

  • Utilize the defined prefix system to easily identify and apply specific rules across the project codebase.

Repository Stats

Stars
25,960
Forks
2,363
Open Issues
131
Language
JavaScript
Default Branch
main
Sync Status
Idle
Last Synced
Apr 30, 2026, 11:17 AM
View on GitHub