Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/soymatudev/Pokedex-Fleek/llms.txt

Use this file to discover all available pages before exploring further.

​
Prerequisites

Before you start, ensure you have the following installed: 
# Check your Node version (v18+ recommended)
node --version
npm --version

# Install Node.js from https://nodejs.org/

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

# Verify installation
expo --version
  1. Download from https://developer.android.com/studio
  2. Install Android SDK (API 33+)
  3. Configure ANDROID_HOME environment variable: 
    export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
  4. Create or start an Android Virtual Device (AVD)
  1. Install Xcode from the App Store
  2. Install Xcode Command Line Tools: 
    xcode-select --install
  3. Install CocoaPods: 
    sudo gem install cocoapods

​
Installation

​
1. Clone the Repository

git clone <repository-url>
cd pokedex-fleek

​
2. Install Dependencies

npm install
This will install all dependencies from package.json:
  • expo v54.0.33 - Development framework
  • react 19.1.0 - UI library
  • react-native 0.81.5 - Mobile framework

​
3. Prebuild Native Code

Since PokéDex Fleek uses native modules (camera, vision), you need to generate iOS/Android native projects: 
npx expo prebuild
This creates ios/ and android/ directories with native code. Only run this once unless you change native dependencies.

​
Development Server

​
Starting the Dev Server

Run the Expo development server: 
npm start
# or
expo start
You’ll see a QR code and menu options: 
› Metro waiting on exp://192.168.1.100:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press r │ reload app
› Press m │ toggle menu
Expo Go will NOT work with this project because it uses custom native modules (react-native-vision-camera). You must use development builds.

​
Running on Android

  1. Enable Developer Options on your Android device:
    • Go to Settings → About Phone
    • Tap “Build Number” 7 times
    • Go back to Settings → Developer Options
    • Enable “USB Debugging”
  2. Connect your device via USB
  3. Verify device connection: 
    adb devices
# List of devices attached
# ABC123XYZ    device
  4. Run the app: 
    npm run android
# or
npx expo run:android

​
Option 2: Android Emulator

  1. Start Android Studio AVD Manager: 
    # List available emulators
emulator -list-avds

# Start an emulator
emulator -avd Pixel_6_API_33
  2. Run the app: 
    npm run android
The first build takes 5-10 minutes. Subsequent builds are much faster (30-60 seconds).

​
Running on iOS (macOS only)

​
Option 1: iOS Simulator

  1. Open Simulator: 
    open -a Simulator
  2. Install pods (first time only): 
    cd ios
pod install
cd ..
  3. Run the app: 
    npm run ios
# or
npx expo run:ios
The camera does NOT work in iOS Simulator. You must use a physical device for scanner features.

​
Option 2: Physical iPhone/iPad

  1. Connect your device via USB
  2. Open Xcode and configure signing: 
    open ios/PokedexFleek.xcworkspace
    • Select your device in the toolbar
    • Go to Signing & Capabilities
    • Add your Apple Developer account
    • Select your team
  3. Run from terminal: 
    npx expo run:ios --device

​
Hot Reload & Fast Refresh

​
Fast Refresh (Automatic)

  • Enabled by default - saves files and UI updates instantly
  • Preserves component state during most edits
  • Works for React component changes

​
Manual Reload

If you need to force a reload:
  • Shake device or press Ctrl+M (emulator)
  • Tap “Reload”
  • Or press r in Metro terminal

​
When to Reload Manually

  • After changing native code or dependencies
  • After modifying app.json or babel.config.js
  • If Fast Refresh isn’t working properly
  • After changing environment variables

​
Debugging

​
React Native DevTools

​
Method 1: Chrome DevTools (Legacy)

  1. Open the developer menu (shake device)
  2. Tap “Debug Remote JS”
  3. Opens http://localhost:8081/debugger-ui in Chrome
  4. Open Chrome DevTools (F12 or Cmd+Option+I)
Remote debugging is deprecated and doesn’t work with the New Architecture.
  1. Install Flipper:
  2. Start Flipper: 
    # Run your app
npm run android

# Flipper should auto-detect the app
  3. Features:
    • Layout Inspector
    • Network requests
    • Logs viewer
    • React DevTools integration

​
Method 3: Expo Dev Tools

# Start with dev tools
expo start --dev-client

# Open in browser
http://localhost:8081

​
Console Logs

View logs in terminal: 
# Metro bundler logs (automatic)
npm start

# Android logcat (detailed)
adb logcat | grep -E "ReactNativeJS|Pokedex"

# Clear logs
adb logcat -c

​
Debugging Tips

Monitor PokéAPI calls:
// Add logging to API calls
fetch(url)
  .then(res => {
    console.log('API Response:', res.status);
    return res.json();
  })
  .catch(err => console.error('API Error:', err));
Check permissions:
import { Camera } from 'react-native-vision-camera';

const permission = await Camera.getCameraPermissionStatus();
console.log('Camera permission:', permission);
// Should return: 'granted'
Debug color extraction:
const result = await ImageColors.getColors(imagePath);
console.log('Detected color:', result.dominant);
console.log('Hue value:', hexToHue(result.dominant));

​
Common Development Issues

​
Metro Bundler Issues

Error: Port 8081 already in useSolution:
# Kill process on port 8081
lsof -ti:8081 | xargs kill -9

# Or use different port
npx expo start --port 8082
Error: Stale cache or outdated modulesSolution:
# Clear Metro cache
npx expo start --clear

# Or manually
rm -rf node_modules/.cache
npm start -- --reset-cache
Error: Unable to resolve module ...Solution:
# Reinstall dependencies
rm -rf node_modules
npm install

# Rebuild native code
npx expo prebuild --clean

​
Android-Specific Issues

Error: Gradle build errorsSolution:
# Clean Gradle cache
cd android
./gradlew clean
cd ..

# Or delete build folders
rm -rf android/app/build android/build
npm run android
Error: Camera shows black screenCheck:
  1. Permissions in AndroidManifest.xml: 
    <uses-permission android:name="android.permission.CAMERA" />
  2. Runtime permissions granted
  3. Camera hardware available (not in emulator)

​
iOS-Specific Issues

Error: CocoaPods errorsSolution:
# Update CocoaPods
sudo gem install cocoapods

# Clean pods
cd ios
rm -rf Pods Podfile.lock
pod install
cd ..
Error: Code signing failsSolution:
  1. Open ios/PokedexFleek.xcworkspace in Xcode
  2. Go to Project Settings → Signing & Capabilities
  3. Enable “Automatically manage signing”
  4. Select your development team

​
Environment Variables

If you add API keys or secrets: 
# Create .env file (not included in repo)
POKEAPI_BASE_URL=https://pokeapi.co/api/v2
OTHER_API_KEY=your_key_here

// Access in code
import Constants from 'expo-constants';

const apiUrl = Constants.expoConfig.extra.POKEAPI_BASE_URL;
Never commit .env files with secrets to version control. Add to .gitignore.

​
Performance Tips

Fast Refresh

Keep Fast Refresh enabled for instant feedback during development.

Hermes Engine

Enabled by default in Expo 54+ for faster startup and lower memory usage.

Development Build

Use custom dev builds instead of Expo Go for full native module support.

Incremental Builds

After first build, subsequent builds are much faster (30-60s).

​
Next Steps

Project Structure

Understand the codebase architecture

Building for Production

Create release builds with EAS