@ovok/native/ui
Ready-made measurement and device flows: pairing, manual entry, charts, calendars and ECG strips.
- Stable unknown
- Release candidate since 1.16.1-rc.3
- Development since 1.16.1-dev.2111+9796905
Ready-made measurement and device flows: pairing, manual entry, charts, calendars and ECG strips.
Import from @ovok/native/ui.
Components
Calendar
const Calendar: MemoExoticComponent<(__namedParameters) => Element>;Month calendar with selectable, markable days.
MeasurementTrendChart
const MeasurementTrendChart: MemoExoticComponent<(__namedParameters) => Element>;Line chart of measurement readings with optional normal range and threshold lines.
Sparkline
const Sparkline: MemoExoticComponent<(props) => Element>;Compact MeasurementTrendChart with small default dimensions.
BackgroundSyncSetting()
function BackgroundSyncSetting(__namedParameters): Element;Card with a switch to enable background Bluetooth sync and its current status.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | BackgroundSyncSettingProps |
Returns
Element
BluetoothStateNotice()
function BluetoothStateNotice(__namedParameters): Element | null;Card that explains why Bluetooth is unavailable and offers the fixing action; renders nothing when Bluetooth is on.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | BluetoothStateNoticeProps |
Returns
Element | null
EcgStripViewer()
function EcgStripViewer(__namedParameters): Element;Paged ECG strip on a millimetre grid.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | EcgStripViewerProps |
Returns
Element
FlowFrame()
function FlowFrame(__namedParameters): Element;Layout primitive for host-owned, multi-step flows. It does not navigate or save data.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | FlowFrameProps |
Returns
Element
HealthImportCard()
function HealthImportCard<TType>(__namedParameters): Element;Card with a switch to enable health data import and the access status per type.
Type Parameters
Parameters
| Parameter | Type |
|---|---|
__namedParameters | HealthImportCardProps<TType> |
Returns
Element
ManualEntryForm()
function ManualEntryForm(__namedParameters): Element;Form to enter and save a measurement manually, validated against the field ranges.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | ManualEntryFormProps |
Returns
Element
NearbyDevicePrompt()
function NearbyDevicePrompt(__namedParameters): Element;Modal that asks whether a nearby device is the user's and pairs it on acceptance.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | NearbyDevicePromptProps |
Returns
Element
PairingFlow()
function PairingFlow(__namedParameters): Element;Lists nearby Bluetooth devices and pairs the one the user selects.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | PairingFlowProps |
Returns
Element
PeriodCalendar()
function PeriodCalendar(__namedParameters): Element;Calendar that highlights date ranges, such as menstrual periods.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | PeriodCalendarProps |
Returns
Element
PrerequisiteGate()
function PrerequisiteGate<T>(__namedParameters): Element;Loads host-defined, account-scoped prerequisites before rendering children. This is a UI gate only; backend authorization remains authoritative.
Type Parameters
Parameters
| Parameter | Type |
|---|---|
__namedParameters | PrerequisiteGateProps<T> |
Returns
Element
SupportedDevicesCatalogList()
function SupportedDevicesCatalogList(__namedParameters): Element;Scrollable catalog of supported devices with photo, measurements and manual link.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | SupportedDevicesCatalogListProps |
Returns
Element
UrineTestResult()
function UrineTestResult(__namedParameters): Element;Lists the analytes of a urine test with their values and usual ranges.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | UrineTestResultProps |
Returns
Element
Hooks
useOvokUi()
function useOvokUi(__namedParameters?): object;Resolves the theme and UI slots from the Paper theme, overrides and slot replacements.
Parameters
| Parameter | Type |
|---|---|
__namedParameters? | OvokUiProps |
Returns
| Name | Type | Description |
|---|---|---|
slots | ResolvedOvokUiSlots | UI primitives with the react-native-paper defaults filled in. |
theme | OvokTheme | Active theme with the override merged in. |
Functions
mergeOvokTheme()
function mergeOvokTheme(base, override?): OvokTheme;Merges a theme override over a base theme, including colors and fonts.
Parameters
| Parameter | Type |
|---|---|
base | OvokTheme |
override? | OvokThemeOverride |
Returns
Interfaces
BackgroundSyncSettingProps
Props of BackgroundSyncSetting.
Extends
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
canEnable? | () => Promise<boolean> | Checked before turning sync on; resolve false to mark it restricted. | UseBackgroundSyncOptions.canEnable |
description? | ReactNode | Text under the heading; defaults to a platform-specific description. | - |
enabled? | boolean | Initial state; defaults to off. | UseBackgroundSyncOptions.enabled |
onEnabledChange? | (enabled) => void | Promise<void> | Called before the new state is applied, for example to persist it. | UseBackgroundSyncOptions.onEnabledChange |
reasonLabels? | Partial<Record<string, string>> | Overrides the reason texts. | - |
slots? | Partial<OvokUiSlots> | Replace individual primitives without forking an SDK component. | OvokUiProps.slots |
statusLabels? | Partial<Record<"blocked" | "on" | "off" | "restricted", string>> | Overrides the status texts. | - |
testID? | string | Test identifier of the card. | - |
theme? | OvokThemeOverride | A partial theme is merged with the active react-native-paper theme. | OvokUiProps.theme |
title? | string | Card heading. | - |
BluetoothStateNoticeCopy
Texts shown for one Bluetooth state.
Properties
| Property | Type | Description |
|---|---|---|
action? | string | Label of the action button. |
body? | string | Explanatory text. |
heading? | string | Heading text. |
BluetoothStateNoticeProps
Props of BluetoothStateNotice.
Extends
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
bleManager? | BleManager | BLE manager used to read the Bluetooth state. | - |
copy? | Partial<Record< | "unsupported" | BluetoothPermissionStatus | "on" | "off" | "unauthorized", BluetoothStateNoticeCopy>> | Per-state text overrides. | - |
onOpenSettings? | () => void | Promise<void> | Opens the settings screen; defaults to the OS Bluetooth or app settings. | - |
requestPermission? | () => Promise<boolean> | Requests Bluetooth permission; resolves true when granted. | - |
settingsAction? | string | Label that forces the settings action button. | - |
slots? | Partial<OvokUiSlots> | Replace individual primitives without forking an SDK component. | OvokUiProps.slots |
testID? | string | Test identifier of the notice. | - |
theme? | OvokThemeOverride | A partial theme is merged with the active react-native-paper theme. | OvokUiProps.theme |
title? | string | Overrides the notice heading. | - |
CalendarDayMarker
Highlight applied to a calendar day.
Properties
CalendarProps
Props of Calendar.
Extends
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
defaultSelectedDate? | CalendarDateInput | Initial selected date when uncontrolled. | - |
defaultVisibleMonth? | CalendarDateInput | Initial visible month when uncontrolled. | - |
getMarkerForDate? | (date) => CalendarDayMarker | undefined | Resolves the marker for a date. | - |
isDateDisabled? | (date) => boolean | Returns true for dates that cannot be selected. | - |
labelForDate? | (date) => string | Returns the accessibility label for a date. | - |
locale? | string | BCP 47 locale for month and weekday names. | - |
markers? | readonly CalendarDayMarker[] | Day markers to display. | - |
maxDate? | CalendarDateInput | Latest selectable date. | - |
minDate? | CalendarDateInput | Earliest selectable date. | - |
nextMonthLabel? | string | Accessibility label of the next-month button. | - |
onDateSelect? | (date) => void | Called when the user selects a date. | - |
onVisibleMonthChange? | (month) => void | Called when the visible month changes. | - |
previousMonthLabel? | string | Accessibility label of the previous-month button. | - |
selectedDate? | CalendarDateInput | null | Controlled selected date; null clears the selection. | - |
slots? | Partial<OvokUiSlots> | Replace individual primitives without forking an SDK component. | OvokUiProps.slots |
testID? | string | Test identifier prefix. | - |
theme? | OvokThemeOverride | A partial theme is merged with the active react-native-paper theme. | OvokUiProps.theme |
visibleMonth? | CalendarDateInput | Controlled visible month. | - |
weekStartsOn? | WeekStartsOn | First day of the week. | - |
EcgStripViewerProps
Props of EcgStripViewer.
Extends
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
gain? | number | Gain in millimetres per millivolt. Standard ECG paper uses 10. | - |
initialPage? | number | Page shown first, 0-based. | - |
onPageChange? | (page, pageCount) => void | Called when the page changes with the page index and page count. | - |
pageDurationSeconds? | number | Seconds of ECG shown per page. | - |
sampleRate | number | Samples per second. | - |
samples | readonly number[] | ECG samples in millivolts, in chronological order. | - |
slots? | Partial<OvokUiSlots> | Replace individual primitives without forking an SDK component. | OvokUiProps.slots |
speed? | number | Speed in millimetres per second. Standard ECG paper uses 25. | - |
testID? | string | Test identifier of the viewer. | - |
theme? | OvokThemeOverride | A partial theme is merged with the active react-native-paper theme. | OvokUiProps.theme |
FlowFrameProps
Props of FlowFrame.
Extends
OvokUiPropsOmit<ViewProps,"children">
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
backLabel? | string | Label of the back button. | - |
children? | ReactNode | Main content. | - |
contentStyle? | StyleProp<ViewStyle> | Style of the layout container. | - |
currentStep? | number | Current step, 1-based, for the progress bar. | - |
footer? | ReactNode | Content pinned to the bottom. | - |
handleAndroidBack? | boolean | Whether the Android back button calls onBack. | - |
header? | ReactNode | Extra content below the heading and progress bar. | - |
keyboardBehavior? | "height" | "padding" | "position" | How the layout avoids the keyboard. | - |
keyboardVerticalOffset? | number | Vertical offset for keyboard avoidance. | - |
onBack? | () => boolean | void | Called when the back button or Android back is pressed; return false to let Android handle it. | - |
progressAccessibilityLabel? | string | Accessibility label of the progress bar. | - |
safeAreaEdges? | Edge[] | Safe area edges to respect. | - |
slots? | Partial<OvokUiSlots> | Replace individual primitives without forking an SDK component. | OvokUiProps.slots |
theme? | OvokThemeOverride | A partial theme is merged with the active react-native-paper theme. | OvokUiProps.theme |
title? | string | Heading shown in the header. | - |
totalSteps? | number | Total steps for the progress bar. | - |
HealthImportCardProps
Props of HealthImportCard.
Extends
Type Parameters
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
adapter | HealthImportAdapter<TType> | Platform adapter that reads and authorizes health data. | - |
background? | boolean | Whether to also enable background import. | - |
labelForType? | (type) => string | Returns the display label of a data type. | - |
progress? | Partial<Record<TType, SyncProgress>> | Sync progress per data type. | - |
reasonLabels? | Partial<Record<NonNullable<SyncPauseReason | undefined>, string>> | Overrides the progress reason texts. | - |
slots? | Partial<OvokUiSlots> | Replace individual primitives without forking an SDK component. | OvokUiProps.slots |
statusLabels? | Partial<Record<"started" | "completed" | "failed" | "idle" | "syncing" | "paused", string>> | Overrides the progress status texts. | - |
testID? | string | Test identifier of the card. | - |
theme? | OvokThemeOverride | A partial theme is merged with the active react-native-paper theme. | OvokUiProps.theme |
title? | string | Card heading. | - |
types | readonly TType[] | Health data types to import. | - |
ManualEntryFormProps
Props of ManualEntryForm.
Extends
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
initialValues? | Partial<Record<string, number>> | Prefilled values keyed by field. | - |
labelForField? | (field) => string | Returns the display label of a field. | - |
labelForUnit? | (unit) => string | Returns the display label of a unit. | - |
measurementTypeKey | MeasurementTypeKey | Measurement type whose fields the form shows. | - |
onSaved? | (input) => void | Called after the measurement is saved. | - |
recordedAt? | Date | Initial measurement time. | - |
saveMeasurement | (input) => Promise<unknown> | Persists the entered measurement; a rejection is shown as the form error. | - |
slots? | Partial<OvokUiSlots> | Replace individual primitives without forking an SDK component. | OvokUiProps.slots |
testID? | string | Test identifier of the form. | - |
theme? | OvokThemeOverride | A partial theme is merged with the active react-native-paper theme. | OvokUiProps.theme |
title? | string | Form heading. | - |
ManualEntrySaveInput
Measurement the user entered by hand.
Properties
| Property | Type | Description |
|---|---|---|
data | Record<string, number> | Entered values keyed by field. |
measurementTypeKey | MeasurementTypeKey | Type of the measurement. |
recordedAt | Date | When the measurement was taken. |
MeasurementReading
One chart reading.
Properties
| Property | Type | Description |
|---|---|---|
at | number | Timestamp of the reading, epoch milliseconds. |
values | number[] | Values of each plotted series at that time. |
MeasurementTrendChartProps
Props of MeasurementTrendChart.
Extends
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
height? | number | Chart height in pixels. | - |
normalRange? | readonly [number, number] | Shaded normal range as [min, max]. | - |
readings | readonly MeasurementReading[] | Readings to plot in time order. | - |
slots? | Partial<OvokUiSlots> | Replace individual primitives without forking an SDK component. | OvokUiProps.slots |
testID? | string | Test identifier of the chart. | - |
theme? | OvokThemeOverride | A partial theme is merged with the active react-native-paper theme. | OvokUiProps.theme |
thresholds? | readonly number[] | Values drawn as dashed lines. | - |
width? | number | Chart width in pixels. | - |
NearbyDevicePromptProps
Props of NearbyDevicePrompt.
Extends
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
declinedStorageKey? | string | Key under which declined devices are stored. | - |
enabled? | boolean | Whether the prompt may appear. | - |
hint? | string | Extra text shown under the title; {{name}} is replaced by the device name. | - |
labels? | Record<string, string> | Overrides the visible copy. | - |
onError? | (error, device?) => void | Called when pairing fails. | - |
onPaired? | (device) => void | Called after the device is paired. | - |
slots? | Partial<OvokUiSlots> | Replace individual primitives without forking an SDK component. | OvokUiProps.slots |
storage | PairedDeviceStorage | Storage used to remember paired devices. | - |
storageKey? | string | Key under which paired devices are stored. | - |
testID? | string | Test identifier of the modal. | - |
theme? | OvokThemeOverride | A partial theme is merged with the active react-native-paper theme. | OvokUiProps.theme |
OvokUiProps
Theme and slot customisation accepted by SDK UI components.
Extended by
BluetoothDevicePickerPropsEcgStripViewerPropsFlowFramePropsManualEntryFormPropsSupportedDevicesCatalogListPropsBluetoothStateNoticePropsPairingFlowPropsNearbyDevicePromptPropsUrineTestResultPropsHealthImportCardPropsBackgroundSyncSettingPropsMeasurementTrendChartPropsCalendarPropsBluetoothDevicePickerProps
Properties
| Property | Type | Description |
|---|---|---|
slots? | Partial<OvokUiSlots> | Replace individual primitives without forking an SDK component. |
theme? | OvokThemeOverride | A partial theme is merged with the active react-native-paper theme. |
OvokUiSlots
Replaceable UI primitives.
Properties
| Property | Type | Description |
|---|---|---|
ActivityIndicator | ComponentType<ViewProps & RefAttributes<View> & object> | Loading indicator primitive. |
Button | ComponentType<Omit<Props, "ref"> & RefAttributes<View>> | Button primitive. |
Card | ComponentType<( | Omit<OutlinedCardProps & $Omit<Omit<Props, "ref"> & RefAttributes<View>, "mode"> & object, "ref"> | Omit<ElevatedCardProps & $Omit<Omit<Props, "ref"> & RefAttributes<View>, "mode"> & object, "ref"> | Omit<ContainedCardProps & $Omit<Omit<Props, "ref"> & RefAttributes<View>, "mode"> & object, "ref">) & RefAttributes<View>> | Card primitive. |
Switch | ComponentType<SwitchProps & RefAttributes<Switch> & object> | Switch primitive. |
Text | ComponentType<TextProps & object & object> | Text primitive. |
TextInput | ComponentType<TextInputProps & RefAttributes<TextInput> & object & RefAttributes<TextInputHandles>> | Text input primitive. |
UrineAnalyteRow | ComponentType<UrineAnalyteRowProps> | Row used to render a urine test analyte. |
PairingFlowProps
Props of PairingFlow.
Extends
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
getDeviceImage? | (device) => string | undefined | Returns an image URI for a device. | - |
labels? | Record<string, string> | Override visible copy, including keys from BluetoothErrorCode. | - |
onError? | (error, device?) => void | Called when pairing fails. | - |
onPaired? | (device) => void | Called after a device is paired. | - |
onPairingCode? | (code, device) => void | Promise<void> | Called with the code the user enters when the device requires one. | - |
renderDevice? | (device, actions) => ReactNode | Replaces the default device row; return undefined to keep the default. | - |
renderEmpty? | (state) => ReactNode | Renders content when no device is found. | - |
renderHeader? | (state) => ReactNode | Renders content above the device list. | - |
slots? | Partial<OvokUiSlots> | Replace individual primitives without forking an SDK component. | OvokUiProps.slots |
storage | PairedDeviceStorage | Storage used to remember paired devices. | - |
storageKey? | string | Key under which paired devices are stored. | - |
testID? | string | Test identifier of the root view. | - |
theme? | OvokThemeOverride | A partial theme is merged with the active react-native-paper theme. | OvokUiProps.theme |
PeriodDateRange
Inclusive date range of a period.
Properties
| Property | Type | Description |
|---|---|---|
endDate | CalendarDateInput | Last day of the period. |
startDate | CalendarDateInput | First day of the period. |
SupportedDevicesCatalogListProps
Props of SupportedDevicesCatalogList.
Extends
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
devices? | readonly SupportedDeviceDefinition[] | Devices to list; defaults to the supported device catalog. | - |
labelForMeasurementType? | (type) => string | Returns the display label of a measurement type. | - |
onSelect? | (device) => void | Called when the user selects a device. | - |
renderCredit? | (device) => ReactNode | Replaces the image credit line. | - |
renderManual? | (device) => ReactNode | Replaces the manual link. | - |
renderMeasurementTypes? | (device) => ReactNode | Replaces the measured types line. | - |
renderPairingTips? | (device) => ReactNode | Replaces the pairing tips. | - |
renderPhoto? | (device) => ReactNode | Replaces the device photo. | - |
slots? | Partial<OvokUiSlots> | Replace individual primitives without forking an SDK component. | OvokUiProps.slots |
testID? | string | Test identifier of the list. | - |
theme? | OvokThemeOverride | A partial theme is merged with the active react-native-paper theme. | OvokUiProps.theme |
UrineAnalyteRowProps
Props of a custom urine analyte row slot.
Properties
| Property | Type | Description |
|---|---|---|
accessibilityLabel | string | Screen reader label for the row. |
analyteKey | string | Stable key of the analyte. |
isOutsideUsualRange | boolean | Whether the value is outside the usual range. |
name | string | Display name of the analyte. |
rangeLabel? | string | Formatted usual range, when known. |
theme | OvokTheme | Resolved theme to render with. |
value | string | Formatted measured value. |
UrineTestResultProps
Props of UrineTestResult.
Extends
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
accessibilityLabelForAnalyte? | (key, fallback) => string | Returns the screen reader label of an analyte row. | - |
labelForAnalyte? | (key, fallback) => string | Returns the display label of an analyte given its key and default label. | - |
measurement | UrineAnalyzeMeasurement | Urine analysis measurement to display. | - |
showOnlyMeasured? | boolean | Hides analytes that have no value. | - |
slots? | Partial<OvokUiSlots> | Replace individual primitives without forking an SDK component. | OvokUiProps.slots |
testID? | string | Test identifier of the card. | - |
theme? | OvokThemeOverride | A partial theme is merged with the active react-native-paper theme. | OvokUiProps.theme |
Type Aliases
OvokTheme
type OvokTheme = MD3Theme & object;React Native Paper MD3 theme extended with spacing and radius helpers.
Type Declaration
| Name | Type | Description |
|---|---|---|
borderRadius() | (value) => number | Converts a radius unit to pixels. |
fontFamily? | string | Font family applied to SDK text. |
spacing() | (value) => number | Converts a spacing unit to pixels. |
OvokThemeOverride
type OvokThemeOverride = Partial<Omit<OvokTheme, "colors" | "fonts">> & object;Partial theme merged over the active theme.
Type Declaration
| Name | Type | Description |
|---|---|---|
colors? | Partial<OvokTheme["colors"]> | Color overrides. |
fonts? | Partial<OvokTheme["fonts"]> | Font overrides. |
PairingFlowRenderState
type PairingFlowRenderState = object;State passed to the custom render callbacks.
Properties
devices
devices: readonly RuntimeDevice[];Nearby devices found.
error?
error?: string;Message of the last pairing error.
paired
paired: readonly string[];IDs of the remembered devices.
selected?
selected?: RuntimeDevice;Device being paired.
status
status: PairingFlowStatus;Current pairing status.
PairingFlowStatus
type PairingFlowStatus = "idle" | "pairing" | "code-required" | "paired" | "error";Stage of the pairing flow.
PeriodCalendarProps
type PeriodCalendarProps = Omit<CalendarProps, "markers" | "getMarkerForDate"> & object;Props of PeriodCalendar: calendar props except markers.
Type Declaration
| Name | Type | Description |
|---|---|---|
labelForPeriodDate()? | (date) => string | Returns the accessibility label of a period day. |
periodLabel? | string | Accessibility label and legend text for period days. |
periods | readonly PeriodDateRange[] | Date ranges to highlight; overlapping or adjacent ranges are merged. |
showLegend? | boolean | Whether to show the legend. |
PrerequisiteGateProps
type PrerequisiteGateProps<T> = object;Props of PrerequisiteGate.
Type Parameters
Properties
check
check: () => Promise<T | null | undefined>;Load account-scoped requirements from the host's authorized data source.
Returns
Promise<T | null | undefined>
children
children: React.ReactNode;Content rendered once no requirement is pending.
onError?
onError?: (error) => void;Check failures fail open; use this callback for logging or telemetry.
Parameters
| Parameter | Type |
|---|---|
error | unknown |
Returns
void
pending?
pending?: React.ReactNode;Shown while checking. Defaults to nothing, so protected children never flash.
renderRequired
renderRequired: (requirement, refresh) => React.ReactNode;Render the required task and call refresh after its save succeeds.
Parameters
| Parameter | Type |
|---|---|
requirement | T |
refresh | () => void |
Returns
React.ReactNode
scopeKey
scopeKey: string;Identifies the account scope; changing it re-runs the check.
ResolvedOvokUiSlots
type ResolvedOvokUiSlots = Omit<OvokUiSlots, "UrineAnalyteRow"> & Partial<Pick<OvokUiSlots, "UrineAnalyteRow">>;Slots after useOvokUi fills the react-native-paper defaults; only UrineAnalyteRow stays optional.
Last updated on