skills.rest
omeragaakbas
omeragaakbasCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-native-skills

Optimize React Native and Expo app performance and prevent rendering-related runtime crashes.

Updated Mar 30, 2026
Search Tags:#performance#react-native#expo#ui-patterns#list-optimization#reanimated
One-click install
npx skills add https://github.com/omeragaakbas/zoyare --skill vercel-react-native-skills-omeragaakbas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-native-skills
Source: https://github.com/omeragaakbas/zoyare/tree/main/.claude/skills/vercel-react-native-skills
Command: npx skills add https://github.com/omeragaakbas/zoyare --skill vercel-react-native-skills-omeragaakbas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides concise, actionable guidelines to prevent runtime crashes and remove common performance bottlenecks in React Native and Expo applications, enabling stable, smooth mobile UI and animations.

Core Features & Use Cases

  • List and Scroll Performance: Patterns for virtualized lists, stable object references, primitive prop memoization, and image sizing to avoid jank.
  • Animation & Gestures: Guidance for GPU-accelerated transforms, Reanimated derived values, and GestureDetector-based press states for smooth UI interactions.
  • Platform & Architecture: Recommendations for native navigators, monorepo native dependency placement, expo-image usage, font embedding, and React Compiler compatibility.
  • Use Case: Apply these rules when optimizing a feed screen with thousands of items, converting a JS-based navigator to native-stack for fluid transitions, or refactoring animations to run on the UI thread.

Quick Start

Apply the React Native Skills to review and optimize a screen that uses a virtualized list, Reanimated animations, and native modules for immediate performance and stability improvements.

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 React Native virtualized lists to prevent scrolling jank?▼

To optimize React Native virtualized lists, apply stable object references, primitive prop memoization, and proper image sizing to prevent scroll jank and ensure smooth performance. This approach removes common rendering bottlenecks in feed screens with thousands of items.

What is the best way to use Reanimated for smooth UI animations?▼

The best way to use Reanimated for smooth UI animations is by applying GPU-accelerated transforms, utilizing derived values, and managing GestureDetector press states. This ensures interactions run on the UI thread without blocking JavaScript.

Why does my Expo app crash during rendering and how can I fix it?▼

Your Expo app might crash during rendering due to unstable object references or inefficient navigation. Fix these rendering crashes by converting JS-based navigators to native-stack, using expo-image, and ensuring React Compiler compatibility for shared values.

Can I use React Native performance patterns in a monorepo architecture?▼

Yes, you can apply React Native performance patterns in a monorepo architecture by correctly placing native dependencies. This setup ensures stable mobile UI and animations while maintaining proper module isolation across your shared packages.

When should I use expo-image over standard image components?▼

You should use expo-image over standard image components when optimizing feed screens with heavy media content. It provides better memory management and rendering stability, which is crucial for preventing jank in virtualized lists.

Related Skills

Explore More Software Engineering Skills→
Bharathadi01Bharathadi01

vercel-react-native-skills

Apply React Native and Expo best practices for performance and maintainability.

Community
Advanced
Tahona-AITahona-AI

fixing-motion-performance

Analyze UI animation code to identify and fix performance bottlenecks.

Official
Intermediate
p-o-ke-naep-o-ke-nae

react-native-design

Organize React Native UI guidance for styling, navigation, animations, and responsive layouts.

Community
Advanced
mrodrigues1mrodrigues1

react-native-design

Implement React Native styling, React Navigation, and Reanimated 3 animations.

Community
Intermediate