App UI components
Import the SDK's reusable UI components and shared theming helpers from
@ovok/native/ui:
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 section for pairing, manual entry, and adapter-driven health access.
Components
| Component | What it renders | Reference |
|---|---|---|
BluetoothStateNotice | Bluetooth radio/permission status and a recovery action | BluetoothStateNotice |
BackgroundSyncSetting | A switch for Bluetooth background-scan state | BackgroundSyncSetting |
SupportedDevicesCatalogList | Device catalog cards with metadata, credits, and optional manuals | SupportedDevicesCatalogList |
EcgStripViewer | A paged SVG ECG waveform from app-provided samples | EcgStripViewer |
MeasurementTrendChart | One or more numeric series with optional normal range and thresholds | MeasurementTrendChart and Sparkline |
UrineTestResult | A urine-analysis measurement with analyte labels and usual-range state | UrineTestResult |
The focused flows are:
Theme and slots
useOvokUi({ theme?, slots? }) returns a merged OvokTheme and resolved Paper
primitive slots. 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 and App shell and providers.
Related guides
- App UI — choose components and integrate them with the app shell.
- Reusable flows — compose pairing, measurement entry, and health access.
- Bluetooth and Health data — configure the feature APIs behind UI.