Mobile App Setup

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

Prerequisites

Requirement	Version	Purpose
Node.js	18+	JavaScript runtime
npm	9+	Package manager
Expo CLI	Latest	Development tools
Expo Go app	iOS/Android	Device testing

Quick Start

Step 1: Install Dependencies

cd mobile
npm install

Step 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.

Step 3: Start Backend API

In a separate terminal:

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

Step 4: Launch Mobile App

cd mobile
npx expo start

Step 5: Connect Your Device

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

Project Structure

mobile/
├── App.tsx                     # App entry with Auth & Theme providers
├── app.json                    # Expo configuration
├── package.json                # Dependencies
├── tsconfig.json               # TypeScript config
│
├── src/
│   ├── components/
│   │   ├── ImageCapture.tsx    # Camera & gallery interface
│   │   ├── IngredientCard.tsx  # Expandable ingredient details
│   │   ├── PrivacyPolicyModal.tsx # In-app privacy policy display
│   │   ├── ProfileAvatar.tsx   # User avatar (photo or initial)
│   │   ├── ProfileSelector.tsx # User profile, auth & 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
│   │   └── LoginScreen.tsx     # Authentication screen
│   │
│   ├── context/
│   │   ├── ThemeContext.tsx    # Dark/Light theme state
│   │   ├── AuthContext.tsx     # Firebase authentication state
│   │   └── PreferencesContext.tsx # User preferences with Firestore sync
│   │
│   ├── config/
│   │   └── firebase.ts         # Firebase configuration
│   │
│   ├── 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
    └── google-icon.png         # Google Sign-In button icon

Development Commands

Command	Purpose
npx expo start	Start development server
npx expo start --clear	Clear cache and start
npx expo start --tunnel	Run with tunnel (network issues)
npx tsc --noEmit	TypeScript type checking

Dependencies

Package	Purpose
expo	Development framework
expo-camera	Camera access
expo-image-picker	Gallery selection
expo-auth-session	OAuth authentication flow
firebase	Authentication & Firestore
@react-native-async-storage/async-storage	Local preferences storage
axios	HTTP client

Network Configuration

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

┌─────────────────────────────────────────────────────────────┐
│                    NETWORK SETUP                             │
│                                                              │
│    ┌─────────────┐         ┌─────────────┐                  │
│    │   Mobile    │  WiFi   │   Router    │                  │
│    │   Device    │◄───────►│  (Network)  │                  │
│    └─────────────┘         └──────┬──────┘                  │
│                                   │                          │
│                              WiFi/Ethernet                   │
│                                   │                          │
│                            ┌──────▼──────┐                  │
│                            │    Dev      │                  │
│                            │   Machine   │                  │
│                            └──────┬──────┘                  │
│                                   │                          │
│                              Port 8000                       │
│                                   │                          │
│                            ┌──────▼──────┐                  │
│                            │  FastAPI    │                  │
│                            │   Server    │                  │
│                            └─────────────┘                  │
└─────────────────────────────────────────────────────────────┘

Firewall Settings

If connection fails, ensure port 8000 is allowed through your firewall.

macOS

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

Windows

Open Windows Defender Firewall → Allow an app through firewall → Add Python or uvicorn

Troubleshooting

"Cannot connect to server"

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

Camera not working

Grant camera permission when prompted
iOS: Settings → Expo Go → Camera
Android: Settings → Apps → Expo Go → Permissions

OCR not extracting text

Ensure good lighting conditions
Hold camera steady
Frame the ingredient list clearly
Try selecting a clearer image from gallery

Metro bundler issues

# Kill existing processes and restart
npx expo start --clear

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