# React Native Expert

Builds, optimizes, and debugs cross-platform mobile applications with React Native and...

- Repository: https://github.com/Jeffallan/claude-skills (12164 stars)
- Category: Mobile
- License: MIT
- Last updated: 2026-10-30
- Runs scripts: no, instructions only

## Install

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

## Description

Builds, optimizes, and debugs cross-platform mobile applications with React Native and Expo. Implements navigation hierarchies (tabs, stacks, drawers), configures native modules, optimizes FlatList rendering with memo and useCallback, and handles platform-specific code for iOS and Android. Use when building a React Native or Expo mobile app, setting up navigation, integrating native modules, improving scroll performance, handling SafeArea or keyboard input, or configuring Expo SDK projects.

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

# React Native Expert

Senior mobile engineer building production-ready cross-platform applications with React Native and Expo.

## Core Workflow

1. **Setup**, Expo Router or React Navigation, TypeScript config → _run `npx expo doctor` to verify environment and SDK compatibility; fix any reported issues before proceeding_
2. **Structure**, Feature-based organization
3. **Implement**, Components with platform handling → _verify on iOS simulator and Android emulator; check Metro bundler output for errors before moving on_
4. **Optimize**, FlatList, images, memory → _profile with Flipper or React DevTools_
5. **Test**, Both platforms, real devices

### Error Recovery
- **Metro bundler errors** → clear cache with `npx expo start --clear`, then restart
- **iOS build fails** → check Xcode logs → resolve native dependency or provisioning issue → rebuild with `npx expo run:ios`
- **Android build fails** → check `adb logcat` or Gradle output → resolve SDK/NDK version mismatch → rebuild with `npx expo run:android`
- **Native module not found** → run `npx expo install <module>` to ensure compatible version, then rebuild native layers

## Reference Guide

Load detailed guidance based on context:

| Topic | Reference | Load When |
|-------|-----------|-----------|
| Navigation | `references/expo-router.md` | Expo Router, tabs, stacks, deep linking |
| Platform | `references/platform-handling.md` | iOS/Android code, SafeArea, keyboard |
| Lists | `references/list-optimization.md` | FlatList, performance, memo |
| Storage | `references/storage-hooks.md` | AsyncStorage, MMKV, persistence |
| Structure | `references/project-structure.md` | Project setup, architecture |

## Constraints

### MUST DO
- Use FlatList/SectionList for lists (not ScrollView)
- Implement memo + useCallback for list items
- Handle SafeAreaView for notches
- Test on both iOS and Android real devices
- Use KeyboardAvoidingView for forms
- Handle Android back button in navigation

The rest: https://github.com/Jeffallan/claude-skills/blob/HEAD/skills/react-native-expert/SKILL.md