📖 Overview

Di bagian ini, kita akan menginstal semua tools yang dibutuhkan untuk development React Native dengan Expo. Pilih sesuai sistem operasi yang kamu gunakan.

🍎 Instalasi di macOS

Step 1: Install Homebrew (Package Manager)

# Install Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Verify installation
brew --version

Step 2: Install Node.js

# Install Node.js LTS (v20+)
brew install node

# Verify installation
node --version  # Should be v20.x.x or higher
npm --version   # Should be v10.x.x or higher

Alternatif dengan NVM (Node Version Manager):

# Install NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# Restart terminal, then install Node
nvm install --lts
nvm use --lts

# Verify
node --version

Step 3: Install Watchman

# Watchman improves file watching performance
brew install watchman

# Verify
watchman --version

Step 4: Install VS Code

# Install via Homebrew
brew install --cask visual-studio-code

# Or download from: https://code.visualstudio.com/

Extensions yang Direkomendasikan:

1. ES7+ React/Redux/React-Native snippets - Code snippets
2. Prettier - Code formatting
3. ESLint - Code linting
4. Tailwind CSS IntelliSense - NativeWind support
5. React Native Tools - Debugging

Step 5: Install Expo CLI

# Install Expo CLI globally
npm install -g expo-cli

# Or use npx (recommended, no global install needed)
npx expo --version

Step 6: Install Expo Go di iPhone/iPad

1. Buka App Store
2. Search "Expo Go"
3. Install aplikasi
4. Buat akun di expo.dev (gratis)

Step 7: (Opsional) Install Xcode untuk iOS Simulator

# Install Xcode dari Mac App Store
# Atau via command line:
xcode-select --install

# Setelah Xcode terinstall, buka dan setujui license
sudo xcodebuild -license accept

⚠️ Note: Xcode membutuhkan ~15GB storage. Untuk development awal, cukup gunakan Expo Go di physical device.

Step 8: (Opsional) Install Android Studio

# Download dari: https://developer.android.com/studio
# Atau via Homebrew:
brew install --cask android-studio

Setup Android SDK:

1. Buka Android Studio
2. More Actions → SDK Manager
3. Install SDK Platform: Android 14 (API 34)
4. SDK Tools tab → Install:
   • Android SDK Build-Tools
   • Android SDK Platform-Tools
   • Android Emulator

Set Environment Variables (tambahkan ke ~/.zshrc):

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

Buat Virtual Device:

1. More Actions → Virtual Device Manager
2. Create Device → Pilih "Pixel 7"
3. Download system image (API 34)
4. Finish

🪟 Instalasi di Windows

Step 1: Install Node.js

1. Download installer dari: https://nodejs.org/
2. Pilih LTS version (v20.x.x)
3. Run installer, ikuti wizard
4. Verify di Command Prompt/PowerShell:

node --version  # Should be v20.x.x
npm --version   # Should be v10.x.x

Alternatif dengan NVM for Windows:

1. Download dari: https://github.com/coreybutler/nvm-windows/releases
2. Install nvm-setup.exe
3. Restart terminal

nvm install lts
nvm use lts
node --version

Step 2: Install VS Code

1. Download dari: https://code.visualstudio.com/
2. Run installer
3. Install extensions yang direkomendasikan (sama seperti di macOS)

Step 3: Install Expo CLI

# Install globally
npm install -g expo-cli

# Atau gunakan npx (recommended)
npx expo --version

Step 4: Install Expo Go di Android

1. Buka Google Play Store
2. Search "Expo Go"
3. Install aplikasi
4. Buat akun di expo.dev (gratis)

Step 5: Install Android Studio

1. Download dari: https://developer.android.com/studio
2. Run installer
3. Setup wizard → Standard installation

Setup Android SDK:

1. Buka Android Studio
2. More Actions → SDK Manager
3. Install SDK Platform: Android 14 (API 34)
4. SDK Tools tab → Install:
   • Android SDK Build-Tools
   • Android SDK Platform-Tools
   • Android Emulator

Set Environment Variables:

1. Buka Settings → System → About → Advanced system settings
2. Environment Variables
3. User variables → New:
   • Name: ANDROID_HOME
   • Value: C:\Users\[USERNAME]\AppData\Local\Android\Sdk
4. Edit Path → Add:
   • %ANDROID_HOME%\emulator
   • %ANDROID_HOME%\platform-tools

Buat Virtual Device:

1. More Actions → Virtual Device Manager
2. Create Device → Pilih "Pixel 7"
3. Download system image (API 34)
4. Finish

Step 6: (Opsional) Enable WSL untuk Performance Lebih Baik

# Run as Administrator
wsl --install

# Restart computer, then install Ubuntu from Microsoft Store

🐧 Instalasi di Ubuntu/Debian

Step 1: Update System

sudo apt update && sudo apt upgrade -y

Step 2: Install Node.js via NVM

# Install NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# Restart terminal atau run:
source ~/.bashrc

# Install Node.js LTS
nvm install --lts
nvm use --lts

# Verify
node --version
npm --version

Step 3: Install VS Code

# Via Snap (recommended)
sudo snap install code --classic

# Atau via apt
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg
sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update
sudo apt install code

Step 4: Install Watchman

# Install dependencies
sudo apt install -y autoconf automake build-essential python3-dev libssl-dev libtool

# Clone and build Watchman
git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v2023.01.02.00
./autogen.sh
./configure
make
sudo make install

💡 Tip: Jika build Watchman gagal, kamu bisa skip langkah ini. Expo tetap bisa berjalan tanpa Watchman, hanya file watching yang kurang optimal.

Step 5: Install Expo CLI

# Via npx (recommended)
npx expo --version

# Atau install globally
npm install -g expo-cli

Step 6: Install Expo Go di Android

1. Buka Google Play Store di HP Android
2. Search "Expo Go"
3. Install aplikasi
4. Buat akun di expo.dev

Step 7: Install Android Studio

# Download dan install
sudo snap install android-studio --classic

# Atau download tar.gz dari:
# https://developer.android.com/studio

Setup Android SDK:

1. Buka Android Studio
2. More Actions → SDK Manager
3. Install SDK Platform: Android 14 (API 34)
4. SDK Tools → Install build tools, platform-tools, emulator

Set Environment Variables (tambahkan ke ~/.bashrc):

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

# Reload bashrc
source ~/.bashrc

Setup KVM untuk Emulator Acceleration:

# Check KVM support
egrep -c '(vmx|svm)' /proc/cpuinfo
# Should return > 0

# Install KVM
sudo apt install -y qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils

# Add user to kvm group
sudo adduser $USER kvm

# Reboot
sudo reboot

📱 Testing Instalasi

Setelah semua terinstall, mari test dengan membuat project sederhana:

1. Create Test Project

# Create a new Expo project
npx create-expo-app@latest test-project --template blank-typescript

# Navigate to project
cd test-project

2. Start Development Server

# Start Expo
npx expo start

3. Test di Device

Option A: Physical Device dengan Expo Go

1. Pastikan HP dan komputer di WiFi yang sama
2. Buka Expo Go di HP
3. Scan QR code yang muncul di terminal

Option B: Android Emulator

# Start emulator dari Android Studio
# Atau via command line:
emulator -avd Pixel_7_API_34

# Di terminal Expo, tekan 'a' untuk open di Android

Option C: iOS Simulator (Mac only)

# Di terminal Expo, tekan 'i' untuk open di iOS Simulator

4. Verify Output

Jika berhasil, kamu akan melihat tampilan:

• "Open up App.tsx to start working on your app!"

🔧 Troubleshooting

Error: "npm command not found"

# Pastikan Node.js terinstall dengan benar
node --version

# Jika menggunakan NVM, pastikan sudah aktif
nvm use --lts

Error: "expo command not found"

# Gunakan npx sebagai alternatif
npx expo start

# Atau reinstall expo-cli
npm install -g expo-cli

Error: "Unable to connect to development server"

1. Pastikan HP dan komputer di jaringan WiFi yang sama
2. Coba tunnel connection:

npx expo start --tunnel

3. Check firewall settings

Error: "Android SDK not found"

Pastikan environment variable sudah di-set dengan benar:

echo $ANDROID_HOME
# Should show path to Android SDK

Error: "Watchman took too long to load"

# Clear watchman state
watchman watch-del-all

✅ Checklist Instalasi

Pastikan semua sudah terinstall:

🚀 Selanjutnya

Di Part 3, kita akan membuat project Expo baru, menginstall dependencies, dan melakukan konfigurasi awal seperti NativeWind, folder structure, dan API service.

← Part 1: Pengenalan & Arsitektur | Part 3: Project Setup →

Series ini dibuat untuk mendukung materi Casual Meetup #15 di LampungDev. Jika ada pertanyaan, silakan tanya di grup komunitas.