Skip to Content
Applications@loop/loop-health-mobile

@loop/loop-health-mobile — Protocol Adherence Tracker

Native mobile app for iOS and Android built with Expo and React Native. Provides dose logging, protocol tracking, and biomarker visualization for Loop Health customers.

Purpose

The mobile app serves as the primary tool for daily protocol adherence:

Core Functions

  • Dose Logging: Quick capture of dose times, amounts, and administration routes
  • Protocol Tracking: Visual timeline of active protocols and upcoming doses
  • Reminders: Push notifications for scheduled doses
  • Biomarker Trends: Mobile-optimized charts for lab results
  • Offline Support: Local-first architecture with background sync

Use Cases

  • Log doses immediately after administration
  • Review protocol adherence at a glance
  • Track how you feel after each dose
  • View lab results and trends on mobile
  • Receive reminders for upcoming doses

Complements the web app by providing a lightweight, fast interface optimized for daily protocol management.

Architecture

Screen Structure

Authenticated Screens (app/(tabs)/)

  • index.tsx — Dashboard (today’s doses, upcoming reminders)
  • protocols.tsx — Protocol list and calendar view
  • log.tsx — Quick dose logging form
  • biomarkers.tsx — Lab result trends
  • profile.tsx — Settings and account management

Auth Screens (app/(auth)/)

  • sign-in.tsx — Login with Clerk
  • sign-up.tsx — Registration flow
  • forgot-password.tsx — Password reset

Modal Screens (app/(modal)/)

  • dose-detail.tsx — Edit or delete dose log
  • protocol-detail.tsx — Protocol information and dosing schedule
  • biomarker-detail.tsx — Detailed biomarker trend

Key Components

Dose Logger (components/DoseLogger.tsx)

  • One-tap logging for scheduled doses
  • Manual entry for missed or off-schedule doses
  • Photo capture for injection sites
  • Notes and side effects tracking

Protocol Timeline (components/ProtocolTimeline.tsx)

  • Visual representation of protocol duration
  • Color-coded adherence indicators
  • Swipe gestures for quick logging
  • Upcoming dose preview

Biomarker Charts (components/BiomarkerCharts.tsx)

  • Line charts for trend visualization
  • Reference range overlays
  • Touch interactions for data points
  • Offline caching of chart data

Push Notifications (utils/notifications.ts)

  • Scheduled local notifications for doses
  • Background task for notification scheduling
  • Custom notification actions (log dose, snooze)

Key Features

Dose Logging

  • Quick Log: One-tap logging from push notification
  • Manual Entry: Full form for detailed logging
  • Photo Capture: Document injection sites
  • Side Effects: Track how you feel after each dose
  • Offline Support: Logs saved locally and synced when online

Protocol Management

  • Active Protocols: View all current protocols
  • Calendar View: See doses by day, week, or month
  • Adherence Score: Visual indicator of protocol compliance
  • Dose History: Review all logged doses
  • Protocol Details: View dosing instructions and protocol goals

Biomarker Tracking

  • Interactive Charts: Touch-enabled trend visualization
  • Reference Ranges: See optimal ranges for each biomarker
  • Lab Result Details: Full lab report viewing
  • Trend Analysis: Identify patterns over time

Reminders & Notifications

  • Scheduled Reminders: Notifications for each dose
  • Smart Timing: Adjust reminder times per protocol
  • Snooze Option: Delay reminders by 15/30/60 minutes
  • Daily Summary: End-of-day adherence notification

Offline-First Architecture

  • Local Storage: All data cached locally with Expo SQLite
  • Background Sync: Automatic sync when online
  • Conflict Resolution: Last-write-wins with timestamp comparison
  • Optimistic Updates: Instant UI updates before server confirmation

Biometric Security

  • Face ID / Touch ID: Optional biometric lock
  • App Lock: Require authentication after inactivity
  • Secure Storage: Encrypted local storage for sensitive data

Tech Stack

  • Framework: Expo SDK 52
  • UI Library: React Native
  • Navigation: Expo Router (file-based routing)
  • State Management: Zustand + React Query
  • Local Database: Expo SQLite
  • Auth: Clerk React Native SDK
  • Charts: Victory Native for data visualization
  • Push Notifications: Expo Notifications
  • Storage: Expo SecureStore for sensitive data
  • HTTP Client: Axios with retry logic

Package Dependencies

Platform API: Consumes API from @loop/my-loop-health at /api/v1/*

Development

Local Setup

# Install dependencies
pnpm install
 
# Set environment variables
cp apps/loop-health-mobile/.env.example apps/loop-health-mobile/.env
 
# Start Expo development server
pnpm --filter @loop/loop-health-mobile dev
 
# Run on iOS simulator
pnpm --filter @loop/loop-health-mobile ios
 
# Run on Android emulator
pnpm --filter @loop/loop-health-mobile android

Required Environment Variables

# API
EXPO_PUBLIC_API_URL=https://my.loop.health/api/v1
 
# Clerk Auth
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_...

Testing on Devices

iOS (physical device):

# Install Expo Go from App Store
# Scan QR code from terminal
pnpm --filter @loop/loop-health-mobile dev

Android (physical device):

# Install Expo Go from Play Store
# Scan QR code from terminal
pnpm --filter @loop/loop-health-mobile dev

Commands

pnpm dev              # Start Expo dev server
pnpm ios              # Run iOS simulator
pnpm android          # Run Android emulator
pnpm typecheck        # Type check
pnpm lint             # Lint code
pnpm test             # Run tests
pnpm build:ios        # Build iOS app
pnpm build:android    # Build Android app

Deployment

Build Configuration

iOS (eas.json - ios profile)

  • Bundle identifier: health.loop.mobile
  • Distribution: App Store or TestFlight
  • Code signing: Managed by EAS

Android (eas.json - android profile)

  • Package name: health.loop.mobile
  • Distribution: Google Play or APK
  • Code signing: Managed by EAS

EAS Build

# Build for iOS
eas build --platform ios --profile production
 
# Build for Android
eas build --platform android --profile production
 
# Submit to App Store
eas submit --platform ios --profile production
 
# Submit to Google Play
eas submit --platform android --profile production

Over-the-Air Updates

# Publish update to production channel
eas update --channel production --message "Fix dose logging bug"
 
# Publish update to staging channel
eas update --channel staging --message "Test new biomarker charts"

App Store Metadata

  • App Name: Loop Health
  • Category: Health & Fitness
  • Age Rating: 17+ (medical content)
  • Permissions: Notifications, Camera, Biometric Authentication

See Also

@loop/loop-health@loop/call-booking