React Native Setup Expert

Expert in React Native and Expo environment configuration across macOS, Windows, and Linux. Specializes in troubleshooting installation issues, SDK configuration, and development environment optimization.

What I Know

Prerequisites & Installation

Node.js & npm

• Node.js 18.x or later required

• Version verification: node --version && npm --version

• Troubleshooting Node.js installation issues

• npm vs yarn vs pnpm for React Native projects

Xcode (macOS - iOS Development)

• Xcode 15.x or later required

• Command line tools installation: xcode-select --install

• License acceptance: sudo xcodebuild -license accept

• Platform installation verification

• Common Xcode errors and fixes

Android Studio (Android Development)

• Android Studio Hedgehog or later

• Required SDK components:

• Android SDK Platform 34 or later

• Android SDK Build-Tools

• Android Emulator

• Android SDK Platform-Tools

• ANDROID_HOME environment variable setup

• SDK Manager configuration

• Common Android Studio issues

Watchman

• Installation via Homebrew (macOS): brew install watchman

• Purpose: File watching for fast refresh

• Troubleshooting watchman errors

• Cache clearing strategies

Environment Configuration

iOS Setup

• CocoaPods installation and troubleshooting

• Pod install issues and resolutions

• Xcode project configuration

• Provisioning profiles and certificates

• iOS Simulator management

• Device selection: xcrun simctl list devices

Android Setup

• Gradle configuration

• Android SDK path configuration

• Environment variables (ANDROID_HOME, PATH)

• AVD (Android Virtual Device) creation

• Emulator performance optimization

• ADB troubleshooting

Metro Bundler

• Port 8081 configuration

• Cache clearing: npx react-native start --reset-cache

• Custom Metro config

• Asset resolution issues

Common Setup Issues

"Command not found" Errors

• PATH configuration

• Shell profile updates (.zshrc, .bash_profile)

• Symlink issues

SDK Not Found

• SDK path verification

• Environment variable troubleshooting

• SDK Manager reinstallation

Pod Install Failures

• CocoaPods version issues

• Ffi gem compilation errors

• Ruby version compatibility

• pod deintegrate && pod install strategy

Build Failures

• Clean build strategies

• Dependency conflicts

• Native module compilation errors

• Xcode derived data clearing

When to Use This Skill

Ask me when you need help with:

• Initial React Native environment setup

• Installing and configuring Xcode or Android Studio

• Setting up iOS simulators or Android emulators

• Troubleshooting "Command not found" errors

• Resolving SDK path or ANDROID_HOME issues

• Fixing CocoaPods installation problems

• Clearing Metro bundler cache

• Configuring development environment variables

• Troubleshooting build failures

• Setting up watchman for file watching

• Verifying development environment prerequisites

Quick Setup Commands

iOS (macOS)

Install Xcode command line tools

xcode-select --install

Accept Xcode license

sudo xcodebuild -license accept

Install CocoaPods

sudo gem install cocoapods

Install watchman

brew install watchman

Verify setup

xcodebuild -version pod --version watchman version

Android (All Platforms)

Verify Android setup

echo $ANDROID_HOME adb --version emulator -version

List available emulators

emulator -list-avds

List connected devices

adb devices

React Native Project

Create new React Native project

npx react-native init MyProject

Navigate to project

cd MyProject

Install iOS dependencies

cd ios && pod install && cd ..

Start Metro bundler

npm start

Run on iOS (separate terminal)

npm run ios

Run on Android (separate terminal)

npm run android

Pro Tips

Clean Builds: When in doubt, clean everything

iOS

cd ios && rm -rf build Pods && pod install && cd ..

Android

cd android && ./gradlew clean && cd ..

Metro

npx react-native start --reset-cache

Environment Variables: Always verify environment variables after changes

Add to ~/.zshrc or ~/.bash_profile

export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/platform-tools

Reload shell

source ~/.zshrc

Simulator Management: List and boot specific devices

iOS

xcrun simctl list devices xcrun simctl boot "iPhone 15 Pro"

Android

emulator -list-avds emulator -avd Pixel_6_API_34

Quick Health Check: Verify entire environment

node --version # Node.js npm --version # npm xcodebuild -version # Xcode (macOS) pod --version # CocoaPods (macOS) adb --version # Android tools watchman version # Watchman

Integration with SpecWeave

This skill integrates with SpecWeave's increment workflow:

• Use during /specweave:increment planning for environment setup tasks

• Reference in tasks.md for setup-related acceptance criteria

• Include in spec.md for mobile-specific prerequisites

• Document setup issues in increment reports/ folder