# App UI

Canonical page: https://docs.ovok.com/native-sdk/guide/modules/ui

`@ovok/native/ui` provides optional React Native components for common health-app
screens and interactions. Use them where they fit your product, then keep routing,
active-patient context, authorization policy, persistence, and localization in the
host app. The SDK components do not require you to adopt a particular navigation
library or app architecture.

This guide covers the UI module and its integration boundaries. The [reusable flows
guide](/native-sdk/guide/how-to/reusable-flows) covers the higher-level pairing, manual-entry, and health
access flows. For provider order and app initialization, see [App shell and
providers](/native-sdk/guide/how-to/app-shell).

## Import the feature you need [#import-the-feature-you-need]

Use the focused `ui` subpath for these optional components:

~~~tsx
import {
  BluetoothStateNotice,
  EcgStripViewer,
  MeasurementTrendChart,
} from "@ovok/native/ui";
~~~

Use the other public modules for their feature APIs:

| Need | Import from | App boundary |
| --- | --- | --- |
| Shared SDK theme provider and theme tokens | `@ovok/native` | App shell; see [Theme](/native-sdk/guide/components/theme/) |
| Bluetooth permissions, runtime, and device hooks | `@ovok/native/bt-management` | `BTProvider` around Bluetooth routes |
| HealthKit and Health Connect authorization/import | `@ovok/native/data-sync` | Platform authorization provider around the import route |
| Socket integration | `@ovok/native/socket` | App-owned endpoint, authentication, and subscriptions |
| Reusable UI flows | `@ovok/native/ui` | Component-specific providers and adapters |

Install the peers required by the components you import. The [installation guide](/native-sdk/guide/how-to/installation)
lists peers and native configuration by feature.

## Start with the app shell [#start-with-the-app-shell]

Place app-wide client and design-system providers in your root shell. The SDK's
`ThemeProvider` loads the DM Sans font files and provides a generated React Native
Paper theme. Add the optional bottom-sheet and keyboard providers only when the app
uses components that need them. Follow [App shell and providers](/native-sdk/guide/how-to/app-shell) for the
provider tree and import aliases.

UI components call `useOvokUi`, which reads the current Paper theme and supplies
fallback spacing and border-radius helpers. There is no separate `OvokUiProvider`.
Use the SDK `ThemeProvider` or your own `PaperProvider` for app-wide Paper styling;
component-level `theme` overrides and `slots` are for focused changes.

## Choose a component by job [#choose-a-component-by-job]

The [`@ovok/native/ui` reference](/native-sdk/guide/components/ui/) catalogs every export and links
to its props page.

| Component | Use it for | Integration boundary |
| --- | --- | --- |
| [`BluetoothStateNotice`](/native-sdk/guide/components/ui/bluetooth-state-notice) | Explaining Bluetooth radio or permission state and offering recovery | Pass the app's long-lived `BleManager`; it does not scan. |
| [`SupportedDevicesCatalogList`](/native-sdk/guide/components/ui/supported-devices-catalog-list) | Showing supported device metadata and manuals | The app handles the selected catalog entry; the component does not connect. |
| [`EcgStripViewer`](/native-sdk/guide/components/ui/ecg-strip-viewer) | Rendering already-decoded ECG samples as a paged waveform | The app owns sample decoding and interpretation. |
| [`MeasurementTrendChart` and `Sparkline`](/native-sdk/guide/components/ui/measurement-trend-chart) | Plotting prepared numeric time-series values | The app supplies ordering, labels, units, and clinical context. |
| [`UrineTestResult`](/native-sdk/guide/components/ui/urine-test-result) | Presenting an existing urine-analysis measurement | Supply localized labels and the result; the component does not interpret it clinically. |
| [`BackgroundSyncSetting`](/native-sdk/guide/components/ui/background-sync-setting) | Letting a user toggle Bluetooth background scanning | Render beneath `BTProvider`; keep app preference state synchronized with `backgroundSync.enabled`. |

Pairing, manual entry, and the adapter-driven health access card are grouped under
[Reusable flows](/native-sdk/guide/how-to/reusable-flows).

## Other SDK UI surfaces [#other-sdk-ui-surfaces]

The `ui` subpath is one component family in the SDK. The other app-facing component
families have their own references:

| Surface | Reference |
| --- | --- |
| Theme provider, colors, spacing, and theme hook | [Theme](/native-sdk/guide/components/theme/) |
| Sign-in, registration, profile, password, and session UI | [Auth components](/native-sdk/guide/components/auth/) |
| Bluetooth provider, hooks, and device-management UI | [Bluetooth management](/native-sdk/guide/components/bt-management/) and [device catalog](/native-sdk/guide/modules/bt-device) |
| Health authorization and import components | [Data sync](/native-sdk/guide/components/data-sync/) |
| SDK UI widgets in the `ui` subpath | [App UI components](/native-sdk/guide/components/ui/) |

## Adapt theme and primitives [#adapt-theme-and-primitives]

All UI components accept the shared `OvokUiProps` where applicable:

~~~tsx
<BluetoothStateNotice
  bleManager={bleManager}
  theme={{ colors: { primary: "#1457A6" } }}
  slots={{ Text: AppText, Button: AppButton }}
  onOpenSettings={() => navigation.navigate("BluetoothSettings")}
/>
~~~

`OvokThemeOverride` merges shallowly at the top level and one level deep for `colors`
and `fonts`. `spacing` and `borderRadius` are functions used by the UI, so provide
functions for those values when overriding them. The `slots` object replaces
individual React Native Paper primitives: `Button`, `Card`, `Text`, `Switch`,
`TextInput`, and `ActivityIndicator`. `UrineTestResult` also supports an
`UrineAnalyteRow` slot. Replacement components should accept the corresponding Paper
props and preserve accessibility behavior.

Use `ThemeProvider` or `PaperProvider` when typography or colors should be consistent
throughout the app. A component-level `fonts` override is not a replacement for
configuring Paper typography. The SDK loads DM Sans assets through `ThemeProvider`,
but does not automatically select them for Paper text variants.

## Keep decisions with the app [#keep-decisions-with-the-app]

The UI module is presentation and integration glue. The app owns:

- navigation after a successful action;
- the active patient and account;
- permission rationale, consent, and product policy;
- saving manual entries and uploading measurements;
- HealthKit or Health Connect record mappings and import services;
- translations, analytics, and app-specific error handling.

Mount providers only around routes that need their side effects. `PairingFlow` needs
an active `BTProvider`; actual HealthKit and Health Connect imports use
[`DataSync`](/native-sdk/guide/components/data-sync/), while `HealthImportCard` needs an app-owned
adapter and only presents its status and request interaction.

## API reference [#api-reference]

Every export of `@ovok/native/ui`, with signatures, props and types, is in the [`ui` API reference](/native-sdk/reference/ui).