DailyDevDiet

logo - dailydevdiet

Learn. Build. Innovate. Elevate your coding skills with dailydevdiet!

Menu
Twitter Linkedin Instagram Facebook-f

Chapter 2: Setting Up the React Native Development Environment

By /
React Native Development Environment

Setting up your React Native development environment is a crucial first step in your React Native journey. A properly configured environment saves time, reduces errors, and provides the tools necessary for efficient development. This chapter will guide you through the entire setup process, offering both standard and alternative approaches to meet your specific needs.

System Requirements

Before we begin, ensure that your system meets the following minimum requirements:

For All Platforms

  • RAM: 8GB minimum, 16GB recommended
  • Storage: At least 50GB of free space
  • Processor: Modern multi-core CPU (Intel i5/AMD Ryzen 5 or better)
  • Internet Connection: Broadband connection for downloading packages

For macOS

  • macOS Monterey (12.0) or newer
  • Terminal or iTerm2
  • Homebrew package manager (recommended)

For Windows

  • Windows 10 or newer (Windows 11 recommended)
  • PowerShell or Command Prompt
  • Windows Subsystem for Linux (WSL2) (recommended for better performance)

For Linux

  • Ubuntu 20.04 LTS or newer (or equivalent distribution)
  • Terminal access
  • apt, yum, or appropriate package manager

Development Approaches

React Native offers two primary approaches to setting up your development environment:

  1. Expo CLI: A managed app development workflow with minimal setup requirements
  2. React Native CLI: The classic approach with direct access to native code and full customization capabilities

We’ll cover both approaches to help you decide which one best fits your needs.

Setting Up with Expo CLI

Expo provides a streamlined development experience with minimal configuration required. It’s perfect for beginners and projects that don’t require extensive native customization.

Step 1: Install Node.js and npm

Node.js is the JavaScript runtime that powers React Native development. npm (Node Package Manager) comes bundled with Node.js.

For macOS:

# Using Homebrew
brew install node

# Verify installation
node --version
npm --version

For Windows:

  1. Download the installer from Node.js website
  2. Run the installer with default settings
  3. Verify installation in PowerShell:
node --version
npm --version

For Linux:

# Using apt (Ubuntu/Debian)
sudo apt update
sudo apt install nodejs npm
# Verify installation
node --version
npm --version

Step 2: Install Expo CLI

With Node.js and npm installed, you can now install the Expo CLI globally on your system:

npm install -g expo-cli

Verify the installation:

expo --version

Step 3: Create Your First Expo Project

Now you can create your first React Native project using Expo:

expo init MyFirstReactNativeApp

When prompted, select a template. For beginners, the “blank” template is recommended.

Step 4: Run Your Project

Navigate to your project directory and start the development server:

cd MyFirstReactNativeApp
expo start

This will open Metro Bundler in your browser with options to run your app on:

  • Android emulator
  • iOS simulator (macOS only)
  • Your physical device using the Expo Go app

Step 5: Install Expo Go on Your Device

To test your app on a physical device:

  1. Install the Expo Go app from the App Store (iOS) or Google Play Store (Android)
  2. Scan the QR code from the Metro Bundler using your device’s camera

Setting Up with React Native CLI

The React Native CLI provides more control and direct access to native code, but requires more setup steps.

Step 1: Install Node.js and npm

Follow the same Node.js installation steps as described in the Expo setup.

Step 2: Install Additional Dependencies

For macOS:

  1. Install Watchman:
brew install watchman
  1. Install Xcode from the Mac App Store
    • After installation, open Xcode and accept the license agreement
    • Install Xcode Command Line Tools:
xcode-select --install
  • Install CocoaPods:
sudo gem install cocoapods
  1. Install JDK (for Android development):
brew tap homebrew/cask-versions
brew install --cask zulu11
  1. Install Android Studio:
    • Download from Android Studio website
    • During installation, ensure you select:
      • Android SDK
      • Android SDK Platform
      • Android Virtual Device
    • Add Android SDK to your path in ~/.bash_profile or ~/.zshrc:
export ANDROID_HOME=$HOME/Library/Android/sdk
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

For Windows:

  1. Install Chocolatey (Windows package manager):
    • Open PowerShell as Administrator
    • Run:
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
  1. Install JDK:
choco install -y openjdk11
  1. Install Android Studio:
    • Download from Android Studio website
    • During installation, ensure you select:
      • Android SDK
      • Android SDK Platform
      • Android Virtual Device
    • Add Android SDK to your system environment variables:
      • Variable name: ANDROID_HOME
      • Variable value: %LOCALAPPDATA%\Android\Sdk
    • Add platform tools to Path variable:
      • Add %LOCALAPPDATA%\Android\Sdk\platform-tools

For Linux:

  1. Install JDK:
sudo apt update
sudo apt install openjdk-11-jdk
  1. Install Android Studio:
    • Download from Android Studio website
    • Extract and run the installer
    • During installation, ensure you select:
      • Android SDK
      • Android SDK Platform
      • Android Virtual Device
    • Add Android SDK to your path in ~/.bashrc:
export ANDROID_HOME=$HOME/Android/Sdk
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

Step 3: Install React Native CLI

npm install -g react-native-cli

Step 4: Create Your First React Native Project

npx react-native init MyFirstReactNativeApp

For TypeScript template:

npx react-native init MyFirstReactNativeApp --template react-native-template-typescript

Step 5: Run Your Project

For iOS (macOS only):

cd MyFirstReactNativeApp
npx pod-install # Install CocoaPods dependencies
npx react-native run-ios

For Android:

  1. Start an Android emulator from Android Studio’s AVD Manager
  2. Run:
cd MyFirstReactNativeApp
npx react-native run-android

Setting Up Your Code Editor

A good code editor significantly improves your development experience. Here are the recommended options:

Visual Studio Code (Recommended)

  1. Download and install Visual Studio Code
  2. Install the following extensions:
    • React Native Tools
    • ESLint
    • Prettier – Code formatter
    • GitLens
    • ES7+ React/Redux/React-Native snippets
    • Color Highlight

WebStorm

WebStorm is a premium IDE with built-in support for React Native:

  1. Download and install WebStorm
  2. Enable React Native templates and code completion in settings

Setting Up Device Emulators

iOS Simulator (macOS only)

The iOS Simulator comes with Xcode. To start it:

  1. Open Xcode
  2. Go to Xcode > Open Developer Tool > Simulator
  3. Or from the command line:
open -a Simulator

Android Emulator

To set up an Android Virtual Device (AVD):

  1. Open Android Studio
  2. Go to Tools > AVD Manager
  3. Click “Create Virtual Device”
  4. Select a device definition (e.g., Pixel 4)
  5. Select a system image (e.g., Android 12)
  6. Configure AVD settings and click “Finish”
  7. Start the emulator by clicking the play button in the AVD Manager

Debugging Tools

React Native Debugger

React Native Debugger is a standalone app for debugging React Native applications:

For macOS:

brew install --cask react-native-debugger

For Windows/Linux:

Download from GitHub Releases

Flipper

Flipper is a platform for debugging mobile apps:

  1. Download and install Flipper
  2. It integrates automatically with new React Native projects

Setting Up Version Control

Git is essential for tracking code changes and collaborating with others:

Install Git

For macOS:

brew install git

For Windows:

Download and install from Git for Windows

For Linux:

sudo apt install git

Configure Git

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Initialize Git in Your Project

cd MyFirstReactNativeApp
git init
git add .
git commit -m "Initial commit"

Project Structure Overview

Understanding the structure of a React Native project is crucial:

Expo Project Structure

my-project/
├── App.js            # Main application component
├── app.json          # Expo configuration
├── assets/           # Static assets like images
├── node_modules/     # Dependencies
├── package.json      # Project metadata and dependencies
└── babel.config.js   # Babel configuration

React Native CLI Project Structure

MyFirstReactNativeApp/
├── android/          # Android-specific code
├── ios/              # iOS-specific code
├── node_modules/     # Dependencies
├── App.js            # Main application component
├── index.js          # Entry point
├── package.json      # Project metadata and dependencies
├── metro.config.js   # Metro bundler configuration
└── babel.config.js   # Babel configuration

Troubleshooting Common Setup Issues

Node.js Version Mismatch

# Install Node Version Manager (nvm)
# For macOS/Linux:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

# For Windows:
# Install nvm-windows from GitHub

# Install and use the correct Node version
nvm install 16
nvm use 16

Android Build Failures

  1. Ensure ANDROID_HOME is correctly set
  2. Check that you have the required SDK versions
  3. Try running:
cd android && ./gradlew clean && cd .. && npx react-native run-android

iOS Build Failures

  1. Make sure Xcode is up to date
  2. Reinstall CocoaPods dependencies:
cd ios && pod deintegrate && pod install && cd ..

Metro Bundler Issues

  1. Clear Metro cache:
npx react-native start --reset-cache
  1. Check port conflicts:
lsof -i :8081

Best Practices for Development Environment Setup

  1. Use a consistent Node.js version across your team with .nvmrc files
  2. Document environment setup requirements in your project README
  3. Automate setup steps with setup scripts when possible
  4. Use environment variables for configuration rather than hardcoding values
  5. Set up linting and code formatting early in your project

Environment Specific Configuration

For managing different environments (development, staging, production):

  1. Install react-native-config:
npm install react-native-config
  1. Create environment files:
# .env.development
API_URL=https://dev-api.example.com

# .env.production
API_URL=https://api.example.com
  1. Use in your code:
import Config from 'react-native-config';
console.log(Config.API_URL);

Summary

Setting up your React Native development environment is a one-time task that pays dividends throughout your development journey. By following the steps outlined in this chapter, you’ve prepared a robust foundation for building cross-platform mobile applications.

In the next chapter, we’ll explore the fundamentals of JavaScript that are essential for React Native development.

Chapter 2 Exercises

  1. Set up your development environment following the steps in this chapter.
  2. Create a new React Native project using both Expo CLI and React Native CLI.
  3. Run your applications on both iOS and Android simulators (or physical devices).
  4. Explore the project structure and identify the key files and directories.
  5. Make a simple change to your app (e.g., modify the welcome text) and observe how it updates in real-time.

Further Reading

Related Articles:

Related Posts

Scroll to Top