# React Native

React Native and Expo patterns for building performant mobile apps.

- Repository: https://github.com/jezweb/claude-skills (1094 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-09
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add jezweb/claude-skills --skill react-native -g -a claude-code -y`
Codex: `npx skills add jezweb/claude-skills --skill react-native -g -a codex -y`
Cursor: `npx skills add jezweb/claude-skills --skill react-native -g -a cursor -y`
Gemini CLI: `npx skills add jezweb/claude-skills --skill react-native -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add jezweb/claude-skills`

## Description

React Native and Expo patterns for building performant mobile apps. Covers list performance, animations with Reanimated, navigation, UI patterns, state management, platform-specific code, and Expo workflows. Use when building or reviewing React Native code. Triggers: 'react native', 'expo', 'mobile app', 'react native performance', 'flatlist', 'reanimated', 'expo router', 'mobile development', 'ios app', 'android app'.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# React Native Patterns

Performance and architecture patterns for React Native + Expo apps. Rules ranked by impact, fix CRITICAL before touching MEDIUM.

This is a starting point. The skill will grow as you build more mobile apps.

## When to Apply

- Building new React Native or Expo apps
- Optimising list and scroll performance
- Implementing animations
- Reviewing mobile code for performance issues
- Setting up a new Expo project

## 1. List Performance (CRITICAL)

Lists are the #1 performance issue in React Native. A janky scroll kills the entire app experience.

| Pattern | Problem | Fix |
|---------|---------|-----|
| **ScrollView for data** | `<ScrollView>` renders all items at once | Use `<FlatList>` or `<FlashList>`, virtualised, only renders visible items |
| **Missing keyExtractor** | FlatList without `keyExtractor` → unnecessary re-renders | `keyExtractor={(item) => item.id}`, stable unique key per item |
| **Complex renderItem** | Expensive component in renderItem re-renders on every scroll | Wrap in `React.memo`, extract to separate component |
| **Inline functions in renderItem** | `renderItem={({ item }) => <Row onPress={() => nav(item.id)} />}` | Extract handler: `const handlePress = useCallback(...)` |
| **No getItemLayout** | FlatList measures every item on scroll (expensive) | Provide `getItemLayout` for fixed-height items: `(data, index) => ({ length: 80, offset: 80 * index, index })` |
| **FlashList** | FlatList is good, FlashList is better for large lists | `@shopify/flash-list`, drop-in replacement, recycling architecture |
| **Large images in lists** | Full-res images decoded on main thread | Use `expo-image` with placeholder + transition, specify dimensions |

### FlatList Checklist

The rest: https://github.com/jezweb/claude-skills/blob/HEAD/plugins/frontend/skills/react-native/SKILL.md