Installation Guide

This guide provides comprehensive instructions for setting up PokéDex Fleek development environment on your system.

System Requirements

Minimum Requirements

Operating System

macOS: 12.0+ (for iOS development)
Windows: 10/11 (for Android only)
Linux: Ubuntu 20.04+ (for Android only)

Hardware

RAM: 8GB minimum, 16GB recommended
Storage: 20GB free space
Physical Device: Android or iOS device with camera

Software Requirements

Software	Version	Required For
Node.js	18.x or higher	All platforms
npm	9.x or higher	All platforms
Expo CLI	Latest	All platforms
Android Studio	Latest	Android development
Xcode	14+	iOS development
CocoaPods	1.11+	iOS development
Java JDK	17	Android development

Development Environment Setup

1. Install Node.js and npm

macOS
Windows
Linux

Using Homebrew:

brew install node

Verify installation:

node --version  # Should output v18.x.x or higher
npm --version   # Should output 9.x.x or higher

Download the installer from nodejs.org
Run the installer and follow the setup wizard
Restart your terminal

Verify installation:

node --version
npm --version

Using NodeSource repository:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

Verify installation:

node --version
npm --version

2. Install Expo CLI

npm install -g expo-cli

Verify installation:

expo --version

3. Clone and Install Project

Clone Repository

git clone https://github.com/yourusername/pokedex-fleek.git
cd pokedex-fleek

Install Dependencies

npm install

This installs all packages from package.json, including:

View Key Dependencies

{
  "expo": "~54.0.33",
  "react": "19.1.0",
  "react-native": "0.81.5",
  "react-native-vision-camera": "^4.7.3",
  "@react-navigation/native": "^7.1.28",
  "@react-navigation/native-stack": "^7.13.0",
  "expo-speech": "~14.0.8",
  "nativewind": "^4.2.2",
  "react-native-reanimated": "~4.1.1",
  "react-native-svg": "15.12.1",
  "tailwindcss": "^3.4.19"
}

Platform-Specific Setup

Android Development

Install Android Studio

Download from developer.android.com
Run the installer
During setup, ensure these components are installed:
- Android SDK
- Android SDK Platform (API 33 or higher)
- Android Virtual Device (optional)

Configure Environment Variables

macOS/Linux
Windows

Add to ~/.bashrc, ~/.zshrc, or ~/.bash_profile:

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

Apply changes:

source ~/.zshrc  # or ~/.bashrc

Open System Properties → Environment Variables
Add new user variable:
- Name: ANDROID_HOME
- Value: C:\Users\YourUsername\AppData\Local\Android\Sdk
Edit Path variable and add:
- %ANDROID_HOME%\platform-tools
- %ANDROID_HOME%\emulator

Verify:

adb --version

Enable USB Debugging on Device

Open Settings on your Android device
Go to “About phone”
Tap “Build number” 7 times to enable Developer options
Go back to Settings → Developer options
Enable “USB debugging”
Connect device via USB
Accept the “Allow USB debugging” prompt on device

Verify connection:

adb devices

You should see your device listed.

iOS Development

iOS development requires macOS with Xcode. Windows and Linux users can only develop for Android.

Install Xcode

Download Xcode from the Mac App Store
Open Xcode and install additional components when prompted
Accept the license agreement:
```
sudo xcodebuild -license accept
```

Install Command Line Tools

xcode-select --install

Verify:

xcode-select -p

Install CocoaPods

sudo gem install cocoapods

Verify:

pod --version

Configure iOS Device

Connect your iOS device via USB
Unlock the device
Tap “Trust This Computer” when prompted
Open Xcode → Window → Devices and Simulators
Verify your device appears in the list

Expo Development Build Setup

Important: PokéDex Fleek uses custom native modules (react-native-vision-camera) that are not compatible with Expo Go. You must create a development build.

Generate Native Code

npx expo prebuild

This command:

Generates the android/ directory with Android native project
Generates the ios/ directory with iOS native project
Configures native modules based on app.json

The prebuild command uses the configuration from app.json to set up:

App name and bundle identifier
Permissions (camera, microphone)
Plugins (react-native-vision-camera, react-native-video)
Icons and splash screens

Build and Run Development Build

npx expo run:android

The first build will take 5-15 minutes as it:

Downloads native dependencies
Compiles native code
Installs the development build on your device

Subsequent builds will be faster.

Camera Permission Configuration

PokéDex Fleek requires camera access to function. The permissions are pre-configured in app.json:

iOS Permissions

app.json

"ios": {
  "infoPlist": {
    "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) to access your camera"
  }
}

Android Permissions

app.json

"android": {
  "permissions": [
    "android.permission.CAMERA",
    "android.permission.RECORD_AUDIO"
  ]
}

Vision Camera Plugin

app.json

"plugins": [
  [
    "react-native-vision-camera",
    {
      "enableCodeScanner": true,
      "enableMicrophonePermission": false
    }
  ]
]

If you modify permissions in app.json, you must run npx expo prebuild --clean to regenerate the native projects.

Verification Steps

Verify your installation is complete:

Check Development Server

Start the Expo dev server:

npx expo start

You should see:

QR code (though you can’t use it with Expo Go)
Development server running on port 8081
Options menu for running on different platforms

Test Camera Access

Launch the app on your physical device
Navigate to the Scanner/Camera screen
Grant camera permissions when prompted
Verify camera feed is visible

Test Color Detection

Point camera at a colorful object
Capture the image
Verify that:
- Object is detected
- Color is extracted
- Pokémon match is displayed
- Audio narration plays (if enabled)

Development Workflow

Once installed, use these commands for daily development:

# Start development server (with live reload)
npx expo start

# Run on Android device
npx expo run:android

# Run on iOS device
npx expo run:ios

# Clean rebuild (if you encounter issues)
npx expo prebuild --clean
npx expo run:android  # or run:ios

Fast Refresh: After the initial build, you can make JavaScript/TypeScript changes and they’ll hot-reload automatically without rebuilding the native code.

Troubleshooting Installation Issues

Android Build Fails: SDK Not Found

Ensure ANDROID_HOME is set correctly:

echo $ANDROID_HOME  # Should output SDK path

If not set, follow the environment variables setup in the Android section.

iOS Build Fails: CocoaPods Error

Clean and reinstall pods:

cd ios
rm -rf Pods Podfile.lock
pod install
cd ..
npx expo run:ios

Metro Bundler Port Conflict

If port 8081 is in use:

# Find and kill the process
lsof -ti:8081 | xargs kill -9

# Or use a different port
npx expo start --port 8082

Cannot Connect to Device

Android:

# Restart ADB server
adb kill-server
adb start-server
adb devices

iOS:

Unplug and replug device
Ensure device is unlocked
Re-trust the computer on device

Prebuild Fails

Clear Expo cache and retry:

npx expo prebuild --clean

This removes existing ios/ and android/ directories and regenerates them.

Native Module Not Found Error

If you see errors about missing native modules:

Ensure you’re not using Expo Go
Rebuild the native app:
```
npx expo run:android  # or run:ios
```

If issue persists, clean rebuild:

npx expo prebuild --clean
npx expo run:android

Next Steps

Quick Start

Start scanning and matching Pokémon

Architecture Overview

Learn about the project structure

Need more help? Check the Expo documentation or React Native Vision Camera docs for platform-specific issues.

Get Started

Core Concepts

Features

Development

Installation

Installation Guide

System Requirements

Minimum Requirements

Operating System

Hardware

Software Requirements

Development Environment Setup

1. Install Node.js and npm

2. Install Expo CLI

3. Clone and Install Project

Platform-Specific Setup

Android Development

iOS Development

Expo Development Build Setup

Generate Native Code

Build and Run Development Build

Camera Permission Configuration

iOS Permissions

Android Permissions

Vision Camera Plugin

Verification Steps

Development Workflow

Troubleshooting Installation Issues

Next Steps

Quick Start

Architecture Overview

Build docs developers (and LLMs) love

Get Started

Core Concepts

Features

Development

Documentation Index

​Installation Guide

​System Requirements

​Minimum Requirements

Operating System

Hardware

​Software Requirements

​Development Environment Setup

​1. Install Node.js and npm

​2. Install Expo CLI

​3. Clone and Install Project

​Platform-Specific Setup

​Android Development

​iOS Development

​Expo Development Build Setup

​Generate Native Code

​Build and Run Development Build

​Camera Permission Configuration

​iOS Permissions

​Android Permissions

​Vision Camera Plugin

​Verification Steps

​Development Workflow

​Troubleshooting Installation Issues

​Next Steps

Quick Start

Architecture Overview

Build docs developers (and LLMs) love

Installation Guide

System Requirements

Minimum Requirements

Software Requirements

Development Environment Setup

1. Install Node.js and npm

2. Install Expo CLI

3. Clone and Install Project

Platform-Specific Setup

Android Development

iOS Development

Expo Development Build Setup

Generate Native Code

Build and Run Development Build

Camera Permission Configuration

iOS Permissions

Android Permissions

Vision Camera Plugin

Verification Steps

Development Workflow

Troubleshooting Installation Issues

Next Steps