@healthcloudai/hc-vitals-import-ui

React Native UI for importing vitals from Apple HealthKit (iOS) and Google Health Connect (Android) into the Healthcheck platform. Companion UI package to the @healthcloudai/hc-vitals-import api-connector.

What it does

1. Checks health data availability on the device (native ImportVitals bridge module, react-native-health, or react-native-health-connect).
2. Requests read permissions for vitals (heart rate, HRV, blood pressure, SpO₂, temperature, respiratory rate, steps, weight, glucose).
3. Fetches records since the last sync date (incremental sync).
4. POSTs the records to the EHR services backend in batches of 50, with exponential-backoff retry on 5xx / network errors.
5. Queues failed payloads offline and retries them automatically; keeps a sync history; optionally syncs on a background interval.

Install

npm install @healthcloudai/hc-vitals-import-ui \
  @healthcloudai/hc-vitals-import \
  @healthcloudai/hc-login-connector \
  @healthcloudai/hc-http

Optional peers (install the ones your app uses):

• @react-native-async-storage/async-storage — persistent sync state (falls back to in-memory)
• @expo/vector-icons — Feather icons (falls back to unicode glyphs)
• expo-haptics — button haptics (no-op if missing)
• react-native-health — iOS HealthKit permission prompt
• react-native-health-connect — Android Health Connect JS fallback

On iOS/Android the package prefers the app's native ImportVitals bridge module (ImportVitals.swift / ImportVitalsModule.kt) when present.

Usage

import {
  useImportVitals,
  ImportVitalsSyncButton,
  ImportVitalsStatusCard,
  ImportVitalsQueueBanner,
  ImportVitalsWebFallback,
} from "@healthcloudai/hc-vitals-import-ui";
import { HCImportVitalsClient } from "@healthcloudai/hc-vitals-import";
import { HCLoginClient } from "@healthcloudai/hc-login-connector";
import { FetchClient } from "@healthcloudai/hc-http";

const httpClient = new FetchClient();
const loginClient = new HCLoginClient(httpClient);

loginClient.configure("healthcheck", "dev");

const connector = new HCImportVitalsClient(httpClient, loginClient);

export default function ImportVitalsScreen() {
  const vitals = useImportVitals({
    connector,
    onNavigate: (route, params) => navigation.navigate(route, params),
  });

  if (Platform.OS === "web") {
    return <ImportVitalsWebFallback onClose={() => navigation.goBack()} />;
  }

  return (
    <View>
      <ImportVitalsSyncButton onPress={vitals.sync} isSyncing={vitals.isSyncing} />
      <Text>{vitals.syncStatus}</Text>
      <Text>Last sync: {vitals.lastSyncDate ?? "Never"}</Text>

      <ImportVitalsQueueBanner
        count={vitals.queueSize}
        onRetry={vitals.retryQueue}
        isProcessing={vitals.isSyncing}
      />

      <ImportVitalsStatusCard icon="upload-cloud" label="Queued" value={String(vitals.queueSize)} />
    </View>
  );
}

Config

| Option | Type | Description | |---|---|---| | connector | VitalsImportConnector | Configured connector that owns API URLs, authentication, and vitals requests. | | theme | Partial<ImportVitalsTheme>? | Optional component color overrides. | | storage | VitalsStorage? | Custom key-value storage (default AsyncStorage). | | onNavigate | (route, params) => void | Navigation callback. | | logger | (level, message, metadata) => void | Optional logger (default silent). |

Theming

Components ship with sensible light-mode defaults. Override individual colors via the theme prop:

<ImportVitalsSyncButton
  onPress={vitals.sync}
  isSyncing={vitals.isSyncing}
  theme={{ primary: theme.primary, buttonText: theme.buttonText }}
/>

Advanced

VitalsImportService and HealthProviderService are exported for consumers who need direct access (e.g. headless background sync). The api-connector client HCImportVitalsClient is re-exported for convenience.