← mobile

TLDR: Testing React Native App Locally with Expo

Quick Start (5 minutes)

1. Prerequisites

# Make sure you have Node.js and npm installed
node --version  # Should be v18+
npm --version

# Install Expo CLI globally (if not already installed)
npm install -g expo-cli

2. Install Dependencies

# From project root
cd apps/mobile
npm install --legacy-peer-deps

Note: We use --legacy-peer-deps to handle React version conflicts between dependencies.

3. Set Up Environment Variables

Create apps/mobile/.env file:

# Backend API URL (your local backend)
EXPO_PUBLIC_API_URL=http://localhost:3001

# Supabase (get these from your Supabase dashboard)
EXPO_PUBLIC_SUPABASE_URL=your_supabase_url_here
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here

Note: If you're using the same Supabase instance as the web app, check apps/frontend/.env.local for these values.

4. Start Backend (if not running)

# From project root
cd apps/backend
npm install
npm run dev  # Should start on port 3001

5. Start Expo

# From apps/mobile directory
npx expo start

Or use the npm script:

npm start  # This runs npx expo start

This will:

  • Start the Expo dev server
  • Show a QR code in terminal
  • Open Expo DevTools in browser

6. Run on Device/Simulator

Option A: Physical Device

  1. Install Expo Go app on your phone (iOS App Store or Google Play)

  2. Scan the QR code from terminal with:

    • iOS: Open Expo Go app → Tap "Scan QR Code" (NOT the Camera app)
    • Android: Expo Go app

    Troubleshooting QR Code Issues:

    • If Camera app says "no usable data": Use Expo Go app directly to scan
    • If still not working: Make sure phone and computer are on same WiFi
    • Alternative: Use tunnel mode: npx expo start --tunnel (slower but works across networks)
    • Manual entry: In Expo Go, tap "Enter URL manually" and enter: exp://10.0.0.221:8081 (replace with your IP)

Option B: iOS Simulator (Mac only)

npm run ios
# Or press 'i' in the Expo terminal

Option C: Android Emulator

npm run android
# Or press 'a' in the Expo terminal
# (Requires Android Studio + emulator set up)

Option D: Web Browser

npm run web
# Or press 'w' in the Expo terminal

Testing New Features

Sleep Tracking

  1. Go to Stream tab
  2. Tap the mood slider (bottom right)
  3. Tap "Log Sleep" button
  4. Enter hours slept and save
  5. Verify sleep entry appears in Stream

Energy Tracking

  1. Go to Dashboard tab
  2. Tap "+" to create new entry
  3. Scroll to "Energy" section
  4. Select energy level (0-10)
  5. Save entry
  6. Verify energy shows in entry card

Analysis

  1. Go to Settings tab
  2. Tap "Journal Analysis"
  3. Tap "Trigger Analysis" button
  4. Select granularity (day/week/month)
  5. Wait for analysis to complete
  6. Tap analysis card to view details

JQ Bridge

  1. Go to Settings tab
  2. Tap "JQ Bridge"
  3. Tap "Add New Connection"
  4. Enter email and set permissions
  5. View connections list

Chatbot

  1. Look for JQ button (bottom right, purple pulsing)
  2. Tap to open chatbot
  3. Type a message and send
  4. Wait for JQ response

Encouragement Drops

  1. Go to Stream tab
  2. Tap on any entry
  3. Look for "Send Drop" option (if available)
  4. Or go to Settings → Encouragement Drops
  5. View received drops

Common Issues & Fixes

"Network request failed"

  • Fix: Make sure backend is running on http://localhost:3001
  • Fix: If using physical device, use your computer's IP address: 
    # Find your IP (Mac/Linux)
ifconfig | grep "inet " | grep -v 127.0.0.1

# Then in .env:
EXPO_PUBLIC_API_URL=http://YOUR_IP:3001

"Missing Supabase environment variables"

  • Fix: Make sure .env file exists in apps/mobile/ with both Supabase variables

"No usable data" when scanning QR code (iPhone)

  • Fix: Don't use Camera app - open Expo Go app directly and tap "Scan QR Code"
  • Fix: Make sure both devices are on same WiFi network
  • Fix: Try tunnel mode: npx expo start --tunnel (works across networks)
  • Fix: Manually enter URL in Expo Go: exp://YOUR_IP:8081 (get IP from terminal output)

"Cannot connect to Expo"

  • Fix: Make sure phone and computer are on same WiFi network
  • Fix: Try tunnel mode: npx expo start --tunnel (slower but more reliable)

"Module not found" errors

  • Fix: Run npm install --legacy-peer-deps again in apps/mobile/
  • Fix: Clear cache: npx expo start -c

Date picker not working

  • Fix: Install missing package: 
    cd apps/mobile
npm install @react-native-community/datetimepicker --legacy-peer-deps

"Invalid hook call" or React version conflicts

  • Fix: This is usually caused by multiple React versions. We use --legacy-peer-deps to resolve this: 
    cd apps/mobile
rm -rf node_modules package-lock.json
npm install --legacy-peer-deps

Quick Commands Reference

# Start Expo
npx expo start
# Or use npm script: npm start

# Start with tunnel (for testing on different networks)
npx expo start --tunnel

# Clear cache and restart
npx expo start -c

# Run on specific platform
npm run ios
npm run android
npm run web

# Install new package (always use --legacy-peer-deps)
cd apps/mobile
npm install package-name --legacy-peer-deps

# Check logs
# Press 'j' in Expo terminal to open debugger

Testing Checklist

  • App opens without errors
  • Can sign in/sign up
  • Can create journal entry
  • Can add mood and energy to entry
  • Can log sleep entry
  • Sleep entries appear in Stream
  • Can trigger analysis
  • Can view analysis details
  • Can create JQ Bridge connection
  • Can open chatbot
  • Can send/receive drops
  • All navigation works

Pro Tips

  1. Hot Reload: Changes auto-reload (shake device to open dev menu)
  2. Debugging: Press j in Expo terminal to open React Native Debugger
  3. Logs: Check Expo terminal for console logs
  4. Reload: Shake device → "Reload" or press r in terminal
  5. Performance: Use npx expo start --no-dev for production-like performance
  6. Always use --legacy-peer-deps: When installing packages, always add --legacy-peer-deps flag to avoid React version conflicts

Need Help?

TLDR EXPO TESTING LOCAL — Docs | HiveJournal