vercel-react-native-skills

Applies React Native and Expo performance rules to mobile component code.

Updated May 11, 2026
One-click install
npx skills add https://github.com/cloudofgeorge/AI-hands-Engineer --skill vercel-react-native-skills-cloudofgeorge
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vercel-react-native-skills
Source: https://github.com/cloudofgeorge/AI-hands-Engineer/tree/main/skills/engineering/domains/web/vercel-react-native-skills
Command: npx skills add https://github.com/cloudofgeorge/AI-hands-Engineer --skill vercel-react-native-skills-cloudofgeorge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React Native apps frequently suffer from scroll jank, render thrashing, and production crashes caused by common mistakes like inline objects in lists, layout-property animations, and falsy && rendering. This Skill gives agents and developers a prioritized rulebook of 35+ best practices to write and refactor performant React Native and Expo code. ## Core Features & Use Cases - Prioritized Rule Catalog: 35+ rules across 14 categories ranked by impact from CRITICAL (core rendering, list virtualization) to LOW (fonts, Intl hoisting), each with incorrect vs. correct code examples. - List and Animation Optimization: Concrete patterns for LegendList/FlashList virtualization, memoization with primitive props, Reanimated shared values, and GestureDetector press states. - Platform Guidance: Rules for native navigators, native modals, expo-image, monorepo dependency management, and React Compiler compatibility. - Use Case: When an agent generates a new feed screen, it applies the list-performance rules to use a virtualized list with stable references and lightweight item components instead of a ScrollView with mapped children. ## Quick Start Review my React Native feed screen component and refactor it using the list performance and animation best practices.

Frequently Asked Questions about vercel-react-native-skills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize FlatList performance in React Native?

Use a virtualized list like LegendList or FlashList instead of ScrollView, pass stable object references as data, and keep item components lightweight with primitive props. Avoid inline objects and callbacks in renderItem since they break memoization.

Should I use LegendList or FlashList for React Native lists?

Both are recommended virtualizers that render only visible items to reduce memory and mount time. LegendList supports getItemType for heterogeneous lists with separate recycling pools, while FlashList is a solid alternative from Shopify.

Why does my React Native app crash with conditional rendering?

Using {value && <Component />} crashes when value is an empty string or 0, because React Native tries to render the falsy value as text outside a Text component. Use ternaries, explicit boolean coercion, or early returns instead.

Does Reanimated work with the React Compiler?

Yes, but you must use .get() and .set() methods instead of reading or writing .value directly on shared values. The compiler cannot track property access, so explicit methods ensure correct behavior.

What is the best way to animate components in React Native?

Animate only transform and opacity properties, which run on the GPU without triggering layout recalculation. Avoid animating width, height, margin, or padding, and use GestureDetector with shared values for press states on the UI thread.