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.

ComponentsCopy Anchor Link

The focused flows are:

• PairingFlow
• ManualEntryForm
• HealthImportCard

Theme and slotsCopy Anchor Link

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 and App shell and providers.

Related guidesCopy Anchor Link

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