react-native-setup

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

1. 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

1. 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

1. 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

1. 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