Skip to main content

Mobile App Setup

The AI Ingredient Scanner mobile app is built with React Native and Expo, supporting both iOS and Android.

Prerequisites​

RequirementVersion
Node.js18+
npm9+
Expo CLILatest
Expo Go appiOS/Android

Quick Start​

1. Install Dependencies​

cd mobile
npm install

2. Configure API URL​

Find your machine's IP address:

# macOS
ipconfig getifaddr en0

# Linux
hostname -I | awk '{print $1}'

# Windows
ipconfig | findstr IPv4

Edit src/services/api.ts:

const API_BASE_URL = 'http://YOUR_IP_ADDRESS:8000';
Important

Do not use localhost - the mobile device cannot resolve it. Use your actual IP address.

3. Start Backend API​

In a separate terminal:

cd /path/to/AiIngredientScanner
source venv/bin/activate
uvicorn api:app --host 0.0.0.0 --port 8000

4. Launch Mobile App​

cd mobile
npx expo start

5. Connect Your Device​

  1. Install Expo Go from App Store (iOS) or Play Store (Android)
  2. Scan the QR code displayed in terminal
  3. App loads on your device

Project Structure​

mobile/
├── App.tsx                     # App entry with ThemeProvider
├── app.json                    # Expo configuration
├── package.json                # Dependencies
├── tsconfig.json               # TypeScript config
│
├── src/
│   ├── components/
│   │   ├── ImageCapture.tsx    # Camera & gallery interface
│   │   ├── IngredientCard.tsx  # Expandable ingredient details
│   │   ├── ProfileSelector.tsx # User profile & theme settings
│   │   ├── ResultsHeader.tsx   # Analysis summary header
│   │   ├── RiskBadge.tsx       # Risk level indicator
│   │   ├── SafetyBar.tsx       # Safety score bar
│   │   └── SafetyMeter.tsx     # Overall safety visualization
│   │
│   ├── screens/
│   │   └── HomeScreen.tsx      # Main app screen
│   │
│   ├── context/
│   │   └── ThemeContext.tsx    # Dark/Light theme state
│   │
│   ├── services/
│   │   ├── api.ts              # Backend API client
│   │   └── ocr.ts              # Image processing & OCR
│   │
│   └── types/
│       └── index.ts            # TypeScript definitions
│
└── assets/
    ├── icon.png                # App icon
    ├── splash-icon.png         # Splash screen
    └── adaptive-icon.png       # Android adaptive icon

Development Commands​

Start Development Server​

npx expo start

Clear Cache​

npx expo start --clear

Run with Tunnel (Network Issues)​

npx expo start --tunnel

Type Checking​

npx tsc --noEmit

Dependencies​

PackagePurpose
expoDevelopment framework
expo-cameraCamera access
expo-image-pickerGallery selection
expo-status-barStatus bar styling
expo-file-systemFile operations
react-native-safe-area-contextSafe area handling
axiosHTTP client

Troubleshooting​

"Cannot connect to server"​

  1. Verify backend is running: 
    curl http://YOUR_IP:8000/health
  2. Ensure phone and computer are on same WiFi network
  3. Check IP address in api.ts
  4. Temporarily disable firewall

Camera not working​

  1. Grant camera permission when prompted
  2. iOS: Settings > Expo Go > Camera
  3. Android: Settings > Apps > Expo Go > Permissions

OCR not extracting text​

  1. Ensure good lighting
  2. Hold camera steady
  3. Frame the ingredient list clearly
  4. Try selecting a clearer image from gallery

App crashes on launch​

  1. Clear Expo Go cache: shake device > "Reload"
  2. Restart Expo development server
  3. Check terminal for error messages

Metro bundler issues​

# Kill existing processes
npx expo start --clear

# Or manually kill
lsof -i :8081 | grep LISTEN | awk '{print $2}' | xargs kill -9

Network Configuration​

Same Network Requirement​

The mobile device must be on the same network as your development machine.

Firewall Settings​

If connection fails, ensure port 8000 is allowed:

macOS:

# Check if firewall is enabled
sudo /usr/libexec/ApplicationFirewall/socketfilterfw --getglobalstate

# Allow Python/uvicorn through firewall
sudo /usr/libexec/ApplicationFirewall/socketfilterfw --add /usr/bin/python3

Windows:

  1. Open Windows Defender Firewall
  2. Click "Allow an app through firewall"
  3. Add Python or uvicorn