Skip to main content

UI integration flows

The ui module contains optional, themeable building blocks for common SDK flows. They are deliberately app-owned: they do not choose an authentication model, navigation structure, upload destination, device policy, localization system, or persistence implementation. An app can use one component for one device, compose several components, or use none of them.

Import the module from the package root or the focused subpath:

import {
  BluetoothStateNotice,
  ManualEntryForm,
  PairingFlow,
  useOvokUi,
} from "@ovok/native/ui";

Theme and slots​

useOvokUi({ theme, slots }) merges an optional OvokThemeOverride with the active react-native-paper theme and resolves the Button, Card, Text, Switch, TextInput, and ActivityIndicator slots. The SDK does not provide an OvokUiProvider; call the hook inside the app's PaperProvider or pass theme and slots to a component.

Theme overrides merge colors and fonts shallowly. The merged value is passed to the SDK component styles, but the default React Native Paper slot components still read the surrounding PaperProvider theme; a fonts override alone does not change their rendered typography. Use a Paper theme/provider or a custom Text slot when font overrides must be visible. Slots replace primitives, not the complete SDK component, so replacement components should accept the corresponding React Native Paper props. The spacing and borderRadius entries used by UI components must be functions; passing numeric values in a theme override causes those components to fail when they call the helpers.

<PaperProvider theme={appTheme}>
  <BluetoothStateNotice
    slots={{ Text: AppText }}
    onOpenSettings={() => navigation.navigate("BluetoothSettings")}
  />
</PaperProvider>

The shared UI API also exports OvokTheme, OvokThemeOverride, OvokUiProps, and OvokUiSlots. useOvokUi({ theme?, slots? }) returns the resolved { theme, slots } object for custom flows. mergeOvokTheme(base, override?) performs the same merge without reading the active Paper theme; top-level values are shallow-merged, while colors and fonts are merged one level deep.

Components​

Each flow has its own reference page with props and integration boundaries:

Composition guidance​

Mount BluetoothStateNotice near Bluetooth flows, place PairingFlow inside the Bluetooth runtime/provider used by the app, and pass the same app-owned storage and adapters to the corresponding hooks. Keep saving, auth, upload, navigation, analytics, and localization at the application boundary. These components are independent feature requests that can be adopted separately; using the catalog does not require using the pairing flow, and using a single device does not require exposing the full catalog.