React Native Skills

React Native Skills

✓ Verified

Comprehensive best practices for React Native and Expo apps. Covers list performance, animations, navigation, UI patterns, state management, and monorepo structure.

Claude / Claude Codetested
GitHub Copilottested
VS Codetested
Cursortested
OpenAI Codextested
Gemini CLItested

What it does

Claude treats React Native like React with a mobile stylesheet. It applies web component patterns to mobile, generates FlatList usage that tanks performance on long lists, mixes Expo managed and bare workflow APIs, and produces layouts that look like web pages on small screens. This skill loads Vercel's comprehensive React Native and Expo best practices: correct list rendering with proper `keyExtractor` and `getItemLayout`, Reanimated vs Animated trade-offs, navigation patterns for stack and tab navigators, and Expo SDK conventions that actually work in managed workflow.

Use case

Any React Native or Expo project. Essential when Claude starts suggesting `ScrollView` for long lists, using `StyleSheet.create` incorrectly, or generating navigation code that doesn't match your navigator setup. Made by Vercel Labs.

The Prompt

Copy and use immediately
"Add an infinite-scroll FlatList with proper performance optimisation."
"Build a bottom sheet that works correctly on both iOS and Android."
"Set up tab navigation with a stack navigator inside the home tab."
"Add haptic feedback to these buttons using the correct Expo API."
"Optimise this list — it drops frames on older Android devices."

How to use

  1. 1

    Install in your React Native project root. Claude applies mobile-first patterns automatically to any component or screen it generates.

  2. 2

    For existing code: ask Claude to audit a component for React Native performance issues — it checks list virtualisation, unnecessary re-renders, and Expo API usage.

Input / Output

Input

A description of the mobile screen, component, or feature you need — or existing React Native code to review.

Output

React Native code with correct mobile patterns: virtualised lists with proper configuration, platform-aware UI, correct Expo SDK usage for managed workflow, and animations using the right API for the complexity.

Install via CLI

npx skillsadd vercel-labs/agent-skills/react-native-skills
Added 4 Apr 2026Submitted by vercel-labs👁 117📋 4

Details

Platforms
Claude / Claude CodeGitHub CopilotVS CodeCursorOpenAI CodexGemini CLI
License
MIT
Author
Vercel

Stats

📋 Copies4
👁 Views117
👍 Upvotes0

Install with skills.sh

npx skillsadd vercel-labs/skills/react-native-skills

Requires skills.sh CLI

Community Notes

Sign in with GitHub to leave a note.

No notes yet. Be the first to contribute.