# HealthImportCard

Canonical page: https://docs.ovok.com/native-sdk/guide/components/ui/health-import-card

`HealthImportCard` renders health-access state and per-type status for an app-provided `HealthImportAdapter`. It can also display optional `SyncProgress` values. Import the component from `@ovok/native/ui` and the adapter type from `@ovok/native/bt-management`.

~~~tsx
import { HealthImportCard } from "@ovok/native/ui";
import type { HealthImportAdapter } from "@ovok/native/bt-management";

type HealthType = "steps" | "weight";

const adapter: HealthImportAdapter<HealthType> = {
  getStatus: async (type) => readPermissionStatus(type),
  request: async (types, background) => {
    await requestAppHealthAccess(types, { background });
  },
};

<HealthImportCard
  types={["steps", "weight"]}
  adapter={adapter}
  background
  labelForType={(type) => healthTypeLabels[type]}
/>
~~~

This is an adapter-driven UI component. It does not configure HealthKit or Health Connect, and it does not start the SDK's `DataSync` import pipeline. For those integrations, see [`DataSync`](/native-sdk/guide/components/data-sync/) and the [HealthKit and Health Connect guide](/native-sdk/guide/modules/data-sync).

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/ui` API reference](/native-sdk/reference/ui).

## Status and request behavior [#status-and-request-behavior]

The component calls `getStatus` for each listed type on mount and after a successful request. It shows these built-in labels:

| Adapter status | Displayed state |
| --- | --- |
| `authorized` | Up to date |
| `shouldRequest` | Waiting for permission |
| `refused` | Not shared |
| `unsupported` | Unavailable on this device |
| No status yet | Checking access |

The card is enabled only when every listed type is `authorized`. It marks refused types with an additional notice. If `getStatus` fails, the card displays the error and keeps that type's previous status, if one was already available.

Turning the card on calls `adapter.request(types, background)` and refreshes the statuses when the promise resolves. Turning it off only changes local UI state. The adapter contract has no revoke, stop, or cancel method, so switching off does not revoke OS permission or stop an app-owned import service. The card does not subscribe to permission changes made elsewhere; refresh or remount it from app-owned state when access may have changed in system settings.

The built-in copy goes through `react-i18next` with the English text above as the default, so it renders unchanged until your app adds these keys to its locale resources:

| Key | Default |
| --- | --- |
| `health-import-card.title` | Health data import |
| `health-import-card.status.authorized` | Up to date |
| `health-import-card.status.shouldRequest` | Waiting for permission |
| `health-import-card.status.refused` | Not shared |
| `health-import-card.status.unsupported` | Unavailable on this device |
| `health-import-card.status.checking` | Checking access |
| `health-import-card.not-shared` | Some data types are not shared. You can enable them in your health app. |
| `health-import-card.connect` | Connect health data |
| `health-import-card.stop` | Stop import |

An explicit `title` prop still wins over the translated title. `statusLabels` and `reasonLabels` customize only the nested sync-progress list; type names come from `labelForType`.

See [Reusable flows](/native-sdk/guide/how-to/reusable-flows) for the app integration boundary.