← ClaudeAtlas

mobile-debugginglisted

Debug React Native apps including metro bundler issues, native errors, performance problems, and crash analysis. Use when troubleshooting errors or investigating issues.
aiskillstore/marketplace · ★ 329 · Code & Development · score 82
Install: claude install-skill aiskillstore/marketplace
# Mobile Debugging Debugging guide for React Native and Expo applications. ## When to Use - App crashes or freezes - Metro bundler errors - Native module issues - Performance problems - Build failures - Network request debugging ## Common Issues & Fixes ### Metro Bundler Problems ```bash # Clear all caches npx expo start --clear watchman watch-del-all rm -rf node_modules && npm install # Reset packager cache rm -rf /tmp/metro-* rm -rf /tmp/haste-* ``` ### Native Module Errors ```bash # iOS: Reset pods cd ios && pod deintegrate && pod install && cd .. # Android: Clean build cd android && ./gradlew clean && cd .. # Expo: Prebuild clean npx expo prebuild --clean ``` ### Simulator/Emulator Issues ```bash # iOS: Reset simulator xcrun simctl erase all # Android: Wipe emulator data adb devices # Find device ID adb -s DEVICE_ID emu kill ``` ## Debugging Tools ### React DevTools ```bash # Install npm install -g react-devtools # Start react-devtools # In app: Shake device -> "Debug Remote JS" ``` ### Metro Logs ```bash # View detailed logs npx expo start --verbose # iOS device logs npx react-native log-ios # Android device logs npx react-native log-android adb logcat ``` ### Network Debugging ```typescript // Enable network inspector import { Platform } from 'react-native'; if (__DEV__ && Platform.OS === 'ios') { require('react-native').NativeModules.DevSettings.setIsDebuggingRemotely(true); } // Or use Flipper for advanced network inspection ``` ## Perfo