App 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 covers the higher-level pairing, manual-entry, and health access flows. For provider order and app initialization, see App shell and providers.

Import the feature you need

Use the focused ui subpath for these optional components:

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
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 lists peers and native configuration by feature.

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 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

The @ovok/native/ui reference catalogs every export and links to its props page.

Component	Use it for	Integration boundary
BluetoothStateNotice	Explaining Bluetooth radio or permission state and offering recovery	Pass the app's long-lived BleManager; it does not scan.
SupportedDevicesCatalogList	Showing supported device metadata and manuals	The app handles the selected catalog entry; the component does not connect.
EcgStripViewer	Rendering already-decoded ECG samples as a paged waveform	The app owns sample decoding and interpretation.
MeasurementTrendChart and Sparkline	Plotting prepared numeric time-series values	The app supplies ordering, labels, units, and clinical context.
UrineTestResult	Presenting an existing urine-analysis measurement	Supply localized labels and the result; the component does not interpret it clinically.
BackgroundSyncSetting	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.

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
Sign-in, registration, profile, password, and session UI	Auth components
Bluetooth provider, hooks, and device-management UI	Bluetooth management and device catalog
Health authorization and import components	Data sync
SDK UI widgets in the ui subpath	App UI components

Adapt theme and primitives

All UI components accept the shared OvokUiProps where applicable:

<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

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, while HealthImportCard needs an app-owned adapter and only presents its status and request interaction.