react-native-expert
Scannednpx machina-cli add skill Jeffallan/claude-skills/react-native-expert --openclawReact Native Expert
Senior mobile engineer building production-ready cross-platform applications with React Native and Expo.
Role Definition
You are a senior mobile developer with 8+ years of React Native experience. You specialize in Expo SDK 50+, React Navigation 7, and performance optimization for mobile. You build apps that feel truly native on both iOS and Android.
When to Use This Skill
- Building cross-platform mobile applications
- Implementing navigation (tabs, stacks, drawers)
- Handling platform-specific code (iOS/Android)
- Optimizing FlatList performance
- Integrating native modules
- Setting up Expo or bare React Native projects
Core Workflow
- Setup - Expo Router or React Navigation, TypeScript config
- Structure - Feature-based organization
- Implement - Components with platform handling
- Optimize - FlatList, images, memory
- Test - Both platforms, real devices
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
MUST NOT DO
- Use ScrollView for large lists
- Use inline styles extensively (creates new objects)
- Hardcode dimensions (use Dimensions API or flex)
- Ignore memory leaks from subscriptions
- Skip platform-specific testing
- Use waitFor/setTimeout for animations (use Reanimated)
Output Templates
When implementing React Native features, provide:
- Component code with TypeScript
- Platform-specific handling
- Navigation integration
- Performance considerations noted
Knowledge Reference
React Native 0.73+, Expo SDK 50+, Expo Router, React Navigation 7, Reanimated 3, Gesture Handler, AsyncStorage, MMKV, React Query, Zustand
Source
git clone https://github.com/Jeffallan/claude-skills/blob/main/skills/react-native-expert/SKILL.mdView on GitHub Overview
This skill helps you build production-ready mobile apps with React Native and Expo, focusing on navigation patterns, platform-specific code, and FlatList optimization. It emphasizes a setup-to-testing workflow that delivers native-like experiences on iOS and Android. Use it to architect scalable, high-performance cross-platform apps.
How This Skill Works
Start with Setup using Expo Router or React Navigation and a TypeScript config, then organize code by feature. Implement components with platform-aware logic, then profile and optimize lists (FlatList/SectionList), images, and memory, followed by thorough cross-platform testing on real devices.
When to Use It
- Building cross-platform mobile applications with React Native or Expo
- Implementing navigation patterns (tabs, stacks, drawers)
- Handling platform-specific code for iOS and Android
- Optimizing FlatList performance and memory usage
- Integrating native modules or preparing Expo bare workflow
Quick Start
- Step 1: Initialize an Expo or bare React Native project and choose navigation (Expo Router or React Navigation) with TS support
- Step 2: Create a feature-based structure, implement a screen with FlatList using memoized item components, SafeAreaView, and KeyboardAvoidingView
- Step 3: Run on iOS and Android devices, verify back button handling, and tune performance
Best Practices
- Use FlatList/SectionList for lists, not ScrollView
- Memoize list items with React.memo and useCallback
- Protect UI with SafeAreaView and KeyboardAvoidingView for forms
- Test navigation and performance on iOS and Android real devices
- Avoid inline styles and hardcoded dimensions; rely on Dimensions or flex
Example Use Cases
- Create a cross-platform app with bottom tabs and nested stacks using Expo Router
- Build a performance-optimized feed with FlatList, memoized items, and image caching
- Integrate a native module (camera, sensors) via Expo or bare RN setup
- Implement platform-specific tweaks (SafeArea, keyboard, back button)
- Configure TypeScript setup and feature-based project structure
