Expo React Native Mobile Apps

The Digital Healthcare Platform includes a mobile application layer developed using Expo and React Native. This system produces two distinct applications—the Patient app and the Clinic app—from a single TypeScript codebase within the monorepo.

The mobile apps interact with the core API to provide healthcare services on iOS and Android devices. They utilize shared design tokens and internationalization packages to ensure consistency with the web platform.

Sources: README.md:10-10, apps/mobile/package.json:4-4

Multi-App Architecture

The project uses the APP_VARIANT environment variable to differentiate between the Patient and Clinic applications during build and runtime. This allows a single codebase to serve different user roles with specific configurations and layouts.

Application Variants

The system defines two specific variants:

• Patient: Built with the slug dhc-patient, intended for portrait orientation.
• Clinic: Built with the slug dhc-clinic, supporting default (including landscape) orientation for tablet use.

Sources: apps/mobile/app.config.ts:7-14

The diagram shows how the environment variable steers the configuration to produce different application bundles.
Sources: apps/mobile/app.config.ts:16-35

Build and Execution Scripts

The following scripts in apps/mobile/package.json manage the application lifecycle:

Sources: apps/mobile/package.json:7-10

Configuration and Metadata

Configuration is managed dynamically via app.config.ts. This file handles bundle identifiers, permissions, and platform-specific settings based on the active variant.

Platform Specifics

• iOS: Both apps support iPad. The Clinic app allows Split View and Slide Over, while the Patient app is restricted to full screen.
• Android: Package names are generated using a configurable prefix (default: dev.dhc). Permissions are managed granularly and added only when required by specific features.
• Routing: The system uses expo-router with typed routes enabled for type-safe navigation.

Sources: apps/mobile/app.config.ts:24-42

UI and Layout Logic

The mobile applications utilize a shared theme and responsive layout logic. The Clinic app specifically implements a two-pane layout for larger screens (tablets).

Responsive Panes

The Home component determines the layout based on the variant and the current window width. If the width exceeds TWO_PANE_MIN_WIDTH (768px) and the app is in clinic mode, it renders a list pane and a consultation pane side-by-side.

Sources: apps/mobile/app/index.tsx:7-15, apps/mobile/src/theme.ts:7-7

The flowchart describes the conditional logic used to toggle between mobile and tablet layouts in the Clinic application.
Sources: apps/mobile/app/index.tsx:9-11

Design Tokens and Theme

The mobile apps consume design tokens defined in @dhc/tokens. These tokens include:

• Colors: Brand (teal/green), Neutral (slates/white), and Status (success/danger).
• Typography: Scaled font sizes from xs (12px) to 3xl (30px).
• Spacing: A numeric scale for consistent margins and padding.
• Touch Targets: A minimum touch target of 44px is enforced for accessibility.

Sources: packages/tokens/src/index.ts:5-40, apps/mobile/src/theme.ts:4-4

Development Workflow

Mobile development requires a specific environment setup as the apps use native modules that are not compatible with the standard Expo Go client.

1. Environment: Requires Node 22 and pnpm 10.
2. Native Modules: Developers must use Expo development builds (EAS profiles development-patient or development-clinic).
3. API Interaction: The mobile apps utilize @dhc/api-client to communicate with the Fastify backend.
4. Internationalization: Strings are sourced from @dhc/i18n, supporting both English and Hindi.

Sources: README.md:38-42, README.md:73-73, apps/mobile/package.json:14-17

Summary

The Expo React Native mobile applications provide a cross-platform solution for patients and clinic staff. By leveraging a single codebase with variant-based configuration, the project maintains two distinct store entries while sharing 100% of the business logic, design tokens, and API client code. The architecture prioritizes tablet support for clinic operations through responsive two-pane layouts and strictly enforced design standards.

Sources: apps/mobile/app.config.ts:4-5, apps/mobile/src/theme.ts:7-7