Getting Started

Get up and running with PHL RN Boilerplate in minutes. This guide will walk you through installation, setup, and running your first app.

Prerequisites

Before you begin, make sure you have the following installed:

• Node.js 18+ - Download from nodejs.org
• Yarn or npm - Package manager
• Git - Version control
• Watchman (macOS) - brew install watchman

Platform-Specific Requirements

For iOS Development (macOS only)

• Xcode 14+ from the Mac App Store
• Xcode Command Line Tools: xcode-select --install
• CocoaPods: sudo gem install cocoapods

For Android Development

• Android Studio with Android SDK
• JDK 17+
• Android Emulator or physical device

Installation

Option 1: Using npx (Recommended)

The fastest way to create a new project:

npx create-expo-app my-app -t phl-rn-boilerplate
cd my-app

Option 2: Clone Repository

Clone the repository directly:

git clone https://github.com/pedrohbl03/phl-rn-boilerplate.git my-app
cd my-app
yarn install

Configuration

Environment Variables

Copy the example environment file and update with your values:

cp .env.example .env

Edit .env with your configuration:

# API Configuration
API_URL=https://api.example.com

# App Configuration
APP_NAME=MyApp
APP_VERSION=1.0.0

Prebuild Native Projects

Since this boilerplate uses native modules (MMKV, Reanimated, etc.), you need to generate the native android/ and ios/ folders:

npx expo prebuild

Learn more about prebuild in the Prebuild Guide.

Running the App

Start Metro Bundler

yarn start

Run on iOS

yarn ios

Run on Android

yarn android

Run on Web

yarn web

Project Structure

Here's what you'll find in your new project:

my-app/
├── src/
│   ├── app/              # Expo Router pages
│   ├── components/       # Reusable components
│   ├── core/             # App configuration
│   ├── data/             # Data layer (API, storage)
│   ├── domain/           # Business logic (entities, schemas)
│   ├── hooks/            # Custom React hooks
│   ├── i18n/             # Translations
│   ├── presentation/     # Screens & ViewModels
│   ├── providers/        # Context providers
│   ├── stores/           # Zustand stores
│   └── styles/           # Global styles
├── assets/               # Images, fonts
├── .env                  # Environment variables
├── app.json              # Expo configuration
├── package.json          # Dependencies
└── tsconfig.json         # TypeScript config

Learn more about the Project Structure.

Development Workflow

Hot Reload

The app supports Fast Refresh. Save any file and your changes will appear instantly without losing component state.

Debugging

Press j in the terminal to open the Chrome DevTools debugger.

Performance Monitor

Shake your device or press Cmd+D (iOS) / Cmd+M (Android) to open the developer menu.

Next Steps