react-native-expert

SKILL.md

Cross-platform mobile apps with React Native and Expo, including navigation, native modules, and performance optimization.

Covers setup, component structure, platform-specific code (iOS/Android), and testing workflows with error recovery for Metro bundler, build failures, and native module issues

Implements navigation hierarchies (tabs, stacks, drawers) via Expo Router or React Navigation with deep linking and back-button handling

Optimizes list rendering with FlatList, memo, and useCallback; includes SafeAreaView, KeyboardAvoidingView, and platform-specific styling patterns

Provides reference guides for storage (AsyncStorage, MMKV), project architecture, and constraints covering memory leaks, hardcoded dimensions, and animation best practices

React Native Expert

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

Core Workflow

Setup — Expo Router or React Navigation, TypeScript config → run npx expo doctor to verify environment and SDK compatibility; fix any reported issues before proceeding

Structure — Feature-based organization

Implement — Components with platform handling → verify on iOS simulator and Android emulator; check Metro bundler output for errors before moving on

Optimize — FlatList, images, memory → profile with Flipper or React DevTools

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