Installation

Complete installation and configuration guide for PokéDex Fleek

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

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

Windows

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

Verify installation:

node --version
npm --version

Linux

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

1. Clone Repository

   git clone https://github.com/yourusername/pokedex-fleek.git
   cd pokedex-fleek
   
2. 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

1. Install Android Studio

   1. Download from developer.android.com
   2. Run the installer
   3. During setup, ensure these components are installed:
      • Android SDK
      • Android SDK Platform (API 33 or higher)
      • Android Virtual Device (optional)
2. Configure Environment Variables

   macOS/Linux

   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
   

   Windows

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

   Verify:

   adb --version
   
3. Enable USB Debugging on Device

   1. Open Settings on your Android device
   2. Go to “About phone”
   3. Tap “Build number” 7 times to enable Developer options
   4. Go back to Settings → Developer options
   5. Enable “USB debugging”
   6. Connect device via USB
   7. 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.

1. Install Xcode

   1. Download Xcode from the Mac App Store
   2. Open Xcode and install additional components when prompted
   3. Accept the license agreement:
      sudo xcodebuild -license accept
      
2. Install Command Line Tools

   xcode-select --install
   

   Verify:

   xcode-select -p
   
3. Install CocoaPods

   sudo gem install cocoapods
   

   Verify:

   pod --version
   
4. Configure iOS Device

   1. Connect your iOS device via USB
   2. Unlock the device
   3. Tap “Trust This Computer” when prompted
   4. Open Xcode → Window → Devices and Simulators
   5. 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

Android

npx expo run:android

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

1. Downloads native dependencies
2. Compiles native code
3. 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:

1. 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
2. Test Camera Access

   1. Launch the app on your physical device
   2. Navigate to the Scanner/Camera screen
   3. Grant camera permissions when prompted
   4. Verify camera feed is visible
3. Test Color Detection

   1. Point camera at a colorful object
   2. Capture the image
   3. 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:

1. Ensure you’re not using Expo Go
2. Rebuild the native app:
   npx expo run:android  # or run:ios
   
3. 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.