# App UI components

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

Import the SDK's reusable UI components and shared theming helpers from
`@ovok/native/ui`:

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

These components render presentation and local interaction state. The app owns
navigation, active user and patient context, persistence, authorization policy, and
product-specific language. Use the separate [Reusable flows](/native-sdk/guide/components/ui/reusable-flows/)
section for pairing, manual entry, and adapter-driven health access.

## Components [#components]

| Component | What it renders | Reference |
| --- | --- | --- |
| `BluetoothStateNotice` | Bluetooth radio/permission status and a recovery action | [BluetoothStateNotice](/native-sdk/guide/components/ui/bluetooth-state-notice) |
| `BackgroundSyncSetting` | A switch for Bluetooth background-scan state | [BackgroundSyncSetting](/native-sdk/guide/components/ui/background-sync-setting) |
| `SupportedDevicesCatalogList` | Device catalog cards with metadata, credits, and optional manuals | [SupportedDevicesCatalogList](/native-sdk/guide/components/ui/supported-devices-catalog-list) |
| `EcgStripViewer` | A paged SVG ECG waveform from app-provided samples | [EcgStripViewer](/native-sdk/guide/components/ui/ecg-strip-viewer) |
| `MeasurementTrendChart` | One or more numeric series with optional normal range and thresholds | [MeasurementTrendChart and Sparkline](/native-sdk/guide/components/ui/measurement-trend-chart) |
| `UrineTestResult` | A urine-analysis measurement with analyte labels and usual-range state | [UrineTestResult](/native-sdk/guide/components/ui/urine-test-result) |

The focused flows are:

- [`PairingFlow`](/native-sdk/guide/components/ui/pairing-flow)
- [`ManualEntryForm`](/native-sdk/guide/components/ui/manual-entry-form)
- [`HealthImportCard`](/native-sdk/guide/components/ui/health-import-card)

## Theme and slots [#theme-and-slots]

`useOvokUi({ theme?, slots? })` returns a merged `OvokTheme` and resolved Paper
primitive slots (`ResolvedOvokUiSlots`: every slot except `UrineAnalyteRow` is always
set; a slot you omit or pass as `undefined` falls back to the Paper primitive). It reads the active React Native Paper theme when available and
supplies default theme and spacing helpers when no app theme is installed. There is
no separate UI provider.

The exports include `OvokTheme`, `OvokThemeOverride`, `OvokUiProps`, `OvokUiSlots`,
`UrineAnalyteRowProps`, and `mergeOvokTheme`. UI slots can replace `Button`, `Card`,
`Text`, `Switch`, `TextInput`, and `ActivityIndicator`; `UrineTestResult` also accepts
an `UrineAnalyteRow` renderer. Replacement components should accept the props of the
corresponding React Native Paper component.

The merge is shallow for top-level properties and one level deep for `colors` and
`fonts`. Components use `spacing` and `borderRadius` as functions, so overrides for
those entries must also be functions. For the app-level provider and typography
setup, see [Theme](/native-sdk/guide/components/theme/) and [App shell and providers](/native-sdk/guide/how-to/app-shell).

## Related guides [#related-guides]

- [App UI](/native-sdk/guide/modules/ui) — choose components and integrate them with the app shell.
- [Reusable flows](/native-sdk/guide/how-to/reusable-flows) — compose pairing, measurement entry, and health access.
- [Bluetooth](/native-sdk/guide/modules/bt-management) and [Health data](/native-sdk/guide/modules/data-sync) — configure the feature APIs behind UI.