React Native Setup Expert Skill

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

Agent Skills: React Native Setup Expert

Install this agent skill to your local

Skill Files