CodingHelp LogoCodingHelp Wiki
Back to React NativeNext: Components & UI
⚙️

React Native Setup & Environment

Complete development environment setup guide

Setting up React Native development environment properly is crucial for a smooth development experience. This guide covers everything from Node.js installation to platform-specific setup for both Android and iOS.

📋 Prerequisites

System Requirements

  • • Windows 10+, macOS 10.15+, or Linux
  • • 8GB RAM minimum (16GB recommended)
  • • 50GB free disk space
  • • Stable internet connection

Knowledge Prerequisites

  • • JavaScript fundamentals
  • • React basics (components, props, state)
  • • Command line/terminal usage
  • • Basic understanding of mobile development

Development Environment Setup

1

Install Node.js

React Native requires Node.js 16 or newer

Step-by-step instructions:

  1. Download Node.js from nodejs.org (LTS version recommended)
  2. Run the installer and follow the setup wizard
  3. Verify installation: node --version && npm --version
  4. Should show Node.js 16+ and npm 8+

Commands:

# Verify Node.js installation
node --version  # Should be 16.0.0 or higher
npm --version   # Should be 8.0.0 or higher

# Alternative: Use Node Version Manager (nvm)
# Windows: Install nvm-windows
# macOS/Linux: Install nvm
nvm install 18
nvm use 18
2

Install React Native CLI

Command line interface for React Native development

Step-by-step instructions:

  1. Install React Native CLI globally
  2. This provides the react-native command
  3. Alternative: Use npx for one-time usage
  4. Verify installation with version check

Commands:

# Install React Native CLI globally
npm install -g @react-native-community/cli

# Verify installation
npx react-native --version

# Alternative: Use npx (no global install needed)
npx react-native init MyProject
3

Android Development Setup

Set up Android Studio and SDK for Android development

Step-by-step instructions:

  1. Download and install Android Studio
  2. Install Android SDK (API level 31 or higher)
  3. Set up Android Virtual Device (AVD)
  4. Configure environment variables

Commands:

# Environment Variables (add to ~/.bashrc or ~/.zshrc)
export ANDROID_HOME=$HOME/Library/Android/sdk  # macOS
export ANDROID_HOME=%LOCALAPPDATA%\Android\Sdk  # Windows

export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

# Verify Android setup
adb --version
emulator -list-avds
4

iOS Development Setup (macOS only)

Set up Xcode and iOS Simulator for iOS development

Step-by-step instructions:

  1. Install Xcode from Mac App Store
  2. Install Xcode Command Line Tools
  3. Install CocoaPods for dependency management
  4. Accept Xcode license agreement

Commands:

# Install Xcode Command Line Tools
xcode-select --install

# Install CocoaPods
sudo gem install cocoapods

# Alternative: Install via Homebrew
brew install cocoapods

# Verify iOS setup
xcodebuild -version
pod --version

# Accept Xcode license
sudo xcodebuild -license accept

Create Your First React Native Project

Quick Start Commands

# Create a new React Native project
npx react-native init AwesomeProject

# Navigate to project directory
cd AwesomeProject

# Start Metro bundler (keep this running)
npx react-native start

# In another terminal, run on Android
npx react-native run-android

# Or run on iOS (macOS only)
npx react-native run-ios

# Run on specific iOS simulator
npx react-native run-ios --simulator="iPhone 14 Pro"

✅ Verify Your Setup

After running the commands above, you should see:

  • • Metro bundler running on http://localhost:8081
  • • Your app running on Android emulator or iOS simulator
  • • "Welcome to React Native" screen displayed
  • • Hot reloading working when you save changes

Recommended Development Tools

Code Editors

  • • VS Code - Most popular, great extensions
  • • WebStorm - Full-featured IDE
  • • Atom - Lightweight and customizable
  • • Sublime Text - Fast and minimal

VS Code Extensions

  • • React Native Tools - Debugging support
  • • ES7+ React/Redux/RN snippets - Code snippets
  • • Prettier - Code formatting
  • • ESLint - Code linting

Debugging Tools

  • • React DevTools - Component inspection
  • • Flipper - Advanced debugging platform
  • • Reactotron - Real-time inspection
  • • Chrome DevTools - Network and console

Common Issues & Troubleshooting

Metro bundler fails to start

Clear Metro cache and restart

npx react-native start --reset-cache
# or
rm -rf node_modules && npm install

Android build fails

Check Android SDK and environment variables

# Verify Android environment
echo $ANDROID_HOME
adb devices

# Clean and rebuild
cd android && ./gradlew clean && cd ..
npx react-native run-android

iOS build fails

Clean iOS build and reinstall pods

# Clean iOS build
cd ios && rm -rf build && cd ..
cd ios && pod install && cd ..

# Clean Xcode derived data
rm -rf ~/Library/Developer/Xcode/DerivedData

Port 8081 already in use

Kill existing Metro process or use different port

# Kill process on port 8081
lsof -ti:8081 | xargs kill -9

# Or start on different port
npx react-native start --port 8082

🎉 Setup Complete! What's Next?

Learn the Basics

  • • Understand React Native components
  • • Learn about styling with StyleSheet
  • • Practice with basic UI elements
  • • Explore navigation patterns

Build Your First App

  • • Start with a simple to-do list
  • • Add navigation between screens
  • • Implement data persistence
  • • Test on real devices
Back to React NativeNext: Components & UI