Skip to main content

Bluetooth device UI

These components are presentational. BTProvider supplies Bluetooth events; DeviceListProvider supplies the default UI list state. The app decides how a device is selected and what a press should do.

Components​

  • BTDeviceItem is a compound, theme-aware TouchableOpacity card.
  • BTDeviceList renders the DeviceListProvider list with translated title and subtitle keys. It does not accept a data prop; replace the list state or pass a custom renderItem.
  • SupportedDeviceList renders the catalog's localized names, manufacturers, images, and exact image credits.
  • BTDeviceInstruction loads a manual for an IntegratedDevices key when one is configured in DEVICE_INSTRUCTION_PDFS.
  • DeviceListProvider and useDeviceList expose the list state and setter.

Basic device list​

import {
  BTDeviceList,
  DeviceListProvider,
} from "@ovok/native/bt-device";

<DeviceListProvider>
  <BTDeviceList
    itemProps={{
      onPress: (item, index) => openDevice(item.deviceType, index),
    }}
  />
</DeviceListProvider>;

The default list is initialized from the SDK's DeviceListItem[] constants. Its item fields are title, subtitle, deviceImageUri, status, and deviceType. title and subtitle are i18next keys, not already translated sentences.

Supported device catalog​

import { SupportedDeviceList } from "@ovok/native/bt-device";

<SupportedDeviceList />;

Use SUPPORTED_DEVICES when the app also needs the ready-to-pass acceptedDevices declarations. SupportedDeviceList is the display component and renders the exact creditsForImage value supplied by the catalog.

Composition​

BTDeviceItem exposes TopContainer, Content, Title, SubTitle, Status, Image, Divider, and BottomContainer. Its children are optional, and each subcomponent accepts only the props supported by its underlying React Native or Paper primitive. BTDeviceItem.Image uses the SDK's OptimizedImage props; consult that component's page for the exact shape.

Device list context​

DeviceListProvider initializes the SDK's default DeviceListItem[] collection. useDeviceList() returns the live collection and its React state setter:

const { deviceListItems, setDeviceListItems } = useDeviceList();

Use the setter to replace or update the display list used by BTDeviceList. This context controls presentation data only; it does not change BTProvider's accepted device declarations or the BLE scan.

Manuals​

import { IntegratedDevices } from "@ovok/native/bt-management";
import { BTDeviceInstruction } from "@ovok/native/bt-device-instructions";

<BTDeviceInstruction
  deviceType={IntegratedDevices.BP2}
  style={{ flex: 1 }}
  onError={(error) => reportManualError(error)}
/>

BTDeviceInstruction takes all PDFViewerProps except sourceURI. A missing manual calls onError, but the lookup returns an empty string and the underlying PDF viewer can remain in its loading state; render an app-owned empty/error state when a manual is not configured. DEVICE_INSTRUCTION_PDFS is a maintainer lookup table; apps should use the component rather than mutate the constant.