react-native
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'.
npx skills add jezweb/claude-skills --skill react-native --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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: `con
- When to Apply
- 1. List Performance (CRITICAL)
- FlatList Checklist
- 2. Animations (HIGH)
- Reanimated Basics
- 3. Navigation (HIGH)
- Expo Router Structure
- 4. UI Patterns (HIGH)
- 5. Images and Media (MEDIUM)
- 6. State and Data (MEDIUM)
- 7. Expo Workflow (MEDIUM)
- New Project Setup
- 8. Testing (LOW-MEDIUM)
- Common Gotchas
npx create-expo-app my-app --template tabs cd my-app npx expo install expo-image react-native-reanimated react-native-gesture-handler react-native-safe-area-context
What does the react-native skill do?
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'.
How do I install it?
Run `npx skills add jezweb/claude-skills --skill react-native --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From jezweb/claude-skills, a repository with 954 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.