PairingFlow

PairingFlow renders devices discovered by the active Bluetooth runtime, starts pairing, presents a pairing-code field when the runtime requests one, and remembers the ID of a device after it becomes bonded. Import it from @ovok/native/ui and render it beneath BTProvider.

import { BTProvider } from "@ovok/native/bt-management";
import { PairingFlow } from "@ovok/native/ui";

<BTProvider bleManager={bleManager} acceptedDevices={acceptedDevices}>
  <PairingFlow
    storage={pairedDeviceStorage}
    onPairingCode={(code, device) => confirmPairingCode(device, code)}
    onPaired={(device) => navigation.navigate("DeviceDetails", { id: device.id })}
    onError={(error, device) => reportPairingError(error, device?.id)}
  />
</BTProvider>

BTProvider owns discovery and the BLE runtime. This component does not create a manager or start a scan. Supply a PairedDeviceStorage implementation; the flow stores a JSON array of IDs, not device objects or credentials.

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/ui API reference.

Pairing lifecycleCopy Anchor Link

The flow exposes these statuses through render state and custom device actions:

onPairingCode receives the trimmed value and selected runtime device. The flow does not confirm the code itself; provide a handler for the device's pairing procedure. A resolved handler returns the status to pairing. The matching bonded event updates the visible status to paired; after the underlying pair operation resolves, the flow stores the ID and calls onPaired only if it observed that event. If the pair operation rejects, the flow reports an error and does not store the ID.

The default row starts pairing and shows optional device image, name, manufacturer, and pair action. It does not render a forget control. To offer forgetting, supply renderDevice and call actions.forget() from your row. That method asks the active Bluetooth manager to forget the device, then removes its ID from storage; it rejects if the manager is not ready.

PairingFlowRenderState contains devices, paired IDs, optional selected device, status, and optional error. renderHeader and renderEmpty receive this state. renderDevice receives one device and an actions object:

{
  pair: () => Promise<void>;
  forget: () => Promise<void>;
  status: PairingFlowStatus;
}

The status is shared by the flow's current selection. If rows need independent per-device state or richer accessibility behavior, own that presentation in the custom row.

The labels keys and default copy are:

The default pairing, paired, and remembered messages include the selected device name or count. A value supplied in labels replaces the message verbatim; the flow does not interpolate placeholders in custom strings.

See Reusable flows for integration guidance and Bluetooth for provider and device discovery setup.