Loop Health Mobile App

The Loop Health mobile app is a comprehensive health optimization companion built with Expo React Native. It provides seamless access to Luna AI, supply tracking, push notifications, and onboarding flows — all optimized for daily health management on iOS and Android.

Overview

The mobile app serves as the primary interface for Loop Health members to:

• Chat with Luna AI — Access intelligent health guidance with streaming responses
• Track Supply Levels — Monitor peptide supplies and receive reorder alerts
• Manage Notifications — Stay on top of doses, supplies, and health milestones
• Complete Onboarding — Streamlined 5-screen setup with biometric authentication
• View Health Data — Access lab results, protocols, and health insights

Tech Stack

Key Features

Luna AI Chat Interface

• Streaming Responses — Real-time AI responses via Server-Sent Events
• Chat History — Persistent conversation storage across sessions
• Suggested Prompts — Context-aware quick actions
• Voice Input — Speech-to-text for hands-free interaction
• Rich Media — Support for images, charts, and formatted responses

Supply Tracking Dashboard

• Real-time Calculations — Automatic supply level monitoring
• Low Supply Alerts — Proactive notifications before running out
• Reorder Integration — Direct links to purchase more supplies
• Manual Adjustments — Override calculations when needed
• Visual Indicators — Color-coded status for quick assessment

Push Notifications (Knock Integration)

• 6 Notification Workflows — Daily doses, supply alerts, milestones, etc.
• Smart Scheduling — Personalized timing based on user preferences
• Deep Linking — Direct navigation to relevant app sections
• Batch Management — Efficient notification grouping and delivery

Onboarding Experience

• 5-Screen Flow — Welcome, permissions, biometrics, preferences, completion
• Intent Tracking — Capture user goals and health objectives
• Biometric Setup — Face ID/Touch ID for secure app access
• State Persistence — Resume onboarding if interrupted

Architecture

Screen Structure

Authenticated Screens (app/(tabs)/)

• index.tsx — Dashboard with supply cards and Luna chat
• chat.tsx — Full-screen Luna AI interface
• supplies.tsx — Detailed supply management
• profile.tsx — Settings and account management

Onboarding Screens (app/(onboarding)/)

• welcome.tsx — Introduction and value proposition
• permissions.tsx — Push notification permissions
• biometrics.tsx — Biometric authentication setup
• preferences.tsx — Health goals and notification settings
• complete.tsx — Onboarding completion

Modal Screens (app/(modal)/)

• supply-adjustment.tsx — Manual supply level adjustments
• notification-settings.tsx — Detailed notification preferences

Key Components

LunaChat (components/LunaChat.tsx)

• Streaming message interface with typing indicators
• Message history with infinite scroll
• Suggested prompt buttons
• Voice input integration

SupplyCard (components/SupplyCard.tsx)

• Visual supply level indicators
• Reorder buttons and alerts
• Last updated timestamps
• Manual adjustment controls

NotificationManager (utils/notifications.ts)

• Knock webhook integration
• Local notification scheduling
• Deep link handling
• Badge count management

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_...
 
# Knock Notifications
EXPO_PUBLIC_KNOCK_PUBLISHABLE_KEY=pk_...
EXPO_PUBLIC_KNOCK_USER_ID_PREFIX=loop_
 
# Feature Flags
EXPO_PUBLIC_ENABLE_VOICE_INPUT=true
EXPO_PUBLIC_ENABLE_BIOMETRICS=true

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

Package Dependencies

• @loop/core — Result type, error handling, logging
• @loop/shared — Zod schemas, types, constants
• @loop/auth — Clerk authentication helpers

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

Deployment

EAS Build Configuration

iOS (eas.json - ios profile)

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

Android (eas.json - android profile)

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

Build Commands

# 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 "Add new supply tracking features"
 
# Publish update to staging channel
eas update --channel staging --message "Test Luna AI improvements"

Mobile App Sections

Onboarding Flow

5-screen onboarding experience with intent tracking, permissions, and biometric setup.

Luna Chat Interface

AI chat with streaming responses, history persistence, and suggested prompts.

Supply Tracking

Dashboard cards, calculations, alerts, and reorder integration.

Push Notifications

Knock integration with 6 workflows, deep linking, and smart scheduling.

See Also

• Expo Documentation 
• Clerk React Native SDK 
• Knock Mobile SDK 
• Vercel AI SDK 
• @loop/my-loop-health API