vercel-react-native-skills

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

Updated May 15, 2026
One-click install
npx skills add https://github.com/danielbere1973/promoar --skill vercel-react-native-skills-danielbere1973
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-native-skills
Source: https://github.com/danielbere1973/promoar/tree/main/.agents/skills/vercel-react-native-skills
Command: npx skills add https://github.com/danielbere1973/promoar --skill vercel-react-native-skills-danielbere1973

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? React Native apps frequently suffer from scroll jank, unnecessary re-renders, runtime crashes, and slow animations caused by common coding mistakes. This Skill provides a prioritized rule set that guides AI agents and developers to write performant, crash-free React Native and Expo code from the start. ## Core Features & Use Cases - Prioritized Rule Set: 35+ rules across 13 categories ranked by impact, from CRITICAL rendering rules (avoiding falsy && crashes) to LOW-priority font and import optimizations. - Incorrect vs. Correct Examples: Every rule includes side-by-side code comparisons showing the broken pattern and the fixed implementation with explanations. - List and Animation Optimization: Detailed guidance on virtualized lists (LegendList, FlashList), Reanimated shared values, GestureDetector press states, and memoization strategies. - Use Case: When building a feed screen with FlashList, apply the list performance rules to pass primitive props, hoist callbacks, and use item types so scrolling stays smooth even with hundreds of items. ## Quick Start Review my React Native list component and apply the performance rules from this skill to eliminate re-renders and scroll jank.

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 primitive props to memoized list items, hoist callbacks to the list root, and avoid inline objects in renderItem. Keep list items lightweight with no queries or expensive computations.

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 ternary expressions, explicit boolean coercion, or early returns instead.

Should I use Reanimated useDerivedValue or useAnimatedReaction?▼

Use useDerivedValue when deriving one shared value from another, since it is declarative and tracks dependencies automatically. Reserve useAnimatedReaction for side effects that produce no value, such as triggering haptics or calling runOnJS.

Does this skill work with the React Compiler enabled?▼

Yes, several rules address React Compiler compatibility, such as destructuring functions early in render and using .get()/.set() instead of .value on Reanimated shared values. With the compiler enabled, manual memo() and useCallback() optimizations become less critical.

How do I load custom fonts in Expo without async loading?▼

Use the expo-font config plugin in app.json to embed fonts at build time instead of useFonts or Font.loadAsync. After adding fonts to the plugin configuration, run npx expo prebuild and rebuild the native app.