react-native-expert

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

By jeffallan · 4,351 installs

npx skills add jeffallan/claude-skills --skill react-native-expert

Source repository · Upstream listing

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 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) Code Examples Optimized FlatList with memo + useCallback KeyboardAvoidingView Form Platform Specific Component Output Format When implementing React Native features, deliver: 1. Component code — TypeScript, with prop types defined 2. Platform handling — Platform.select or .ios.tsx / .android.tsx splits as needed 3. Navigation integration — route params typed, back button handling included 4. Performance notes — memo boundaries, key extractor strategy, image caching Knowledge Reference React Native 0.73+, Expo SDK 50+, Expo Router, React Navigation 7, Reanimated 3, Gesture Handler, AsyncStorage, MMKV, React Query, Zustand [Documentation](https://jeffallan.github.io/claude skills/skills/frontend/react native expert/)