Mobile App Setup

The ScanPick mobile app is built with Expo SDK 55 (React Native 0.83). It serves as the warehouse floor scanner for pickers.

Development Setup

Prerequisites

• Node.js 20+
• Expo CLI (npx expo)
• Android Emulator or iOS Simulator
• Physical device with Expo Go (for testing)

Start Development

cd mobile
npm install
npx expo start

• Press a for Android Emulator
• Press i for iOS Simulator
• Scan the QR code with Expo Go on a physical device

API URL Configuration

The mobile app discovers the API URL from an environment variable.

For development, set API_BASE_URL in mobile/.env:

API_BASE_URL=http://10.0.2.2:5000

• 10.0.2.2 is the Android Emulator’s alias for the host machine
• Use your machine’s local IP for physical devices (e.g., http://192.168.1.100:5000)
• In production, point to your ScanPick API instance

Key Implementation Details

SignalR Connection

The mobile app uses @microsoft/signalr for real-time updates.

Critical: The polyfill react-native-url-polyfill/auto must be the first import in the mobile entry point. This resolves a Hermes engine incompatibility with SignalR’s use of URL.pathname.

// mobile/index.ts — FIRST import
import 'react-native-url-polyfill/auto';

UUID Generation

Hermes does not support crypto.randomUUID(). The app uses a Math.random()-based UUID v4 generator instead. Do not use crypto.randomUUID() or the uuid npm package.

// Internal UUID generator — no crypto dependency
function generateId(): string {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    const r = (Math.random() * 16) | 0;
    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
  });
}

Barcode Scanning

The app uses the device camera for barcode scanning. After a 3-second timeout without a scan, a “Type barcode” fallback button appears for manual entry.

Offline Support

Scans queue locally in MMKV storage when the device is offline or the API is unreachable. The queue drains automatically when connectivity returns:

1. Scans are stored with a client-generated UUID (idempotency key)
2. Server deduplicates by idempotency key
3. Failed scans are retried with a 1-second backoff
4. Scans with exhausted retry budget are flagged as failed

Metro Cache

When modifying polyfill imports, always clear the Metro cache:

npx expo start -c

This prevents stale cache issues after import changes.

Building for Production

Android APK/AAB

cd mobile
npx expo build:android

iOS IPA

cd mobile
npx expo build:ios

App Store Publishing

See the Licensing & Renewals page for information about ScanPick licensing for mobile app distribution.