GuidesComponentsBluetooth device UI

BTDeviceItem

Compound themed row for Bluetooth device cards and lists.

  • Stable unknown
  • Release candidate since 1.16.1-rc.3
  • Development since 1.16.1-dev.2111+9796905

BTDeviceItem is a themed, pressable container with compound layout parts. BTDeviceList uses these parts for its default row; apps can compose them in custom lists.

Import it from @ovok/native/bt-device.

import { BTDeviceItem } from "@ovok/native/bt-device";
import { DeviceStatus } from "@ovok/native/bt-management";

<BTDeviceItem onPress={openDevice}>
  <BTDeviceItem.TopContainer>
    <BTDeviceItem.Content>
      <BTDeviceItem.Title>Blood pressure monitor</BTDeviceItem.Title>
      <BTDeviceItem.SubTitle>Manufacturer</BTDeviceItem.SubTitle>
      <BTDeviceItem.Status status={DeviceStatus.CONNECTED} />
    </BTDeviceItem.Content>
    <BTDeviceItem.Image uri={imageUri} />
  </BTDeviceItem.TopContainer>
  <BTDeviceItem.Divider />
  <BTDeviceItem.BottomContainer>
    <BTDeviceItem.SubTitle>Instructions</BTDeviceItem.SubTitle>
  </BTDeviceItem.BottomContainer>
</BTDeviceItem>;

The compound parts are TopContainer, Content, Title, SubTitle, Status, Image, Divider, and BottomContainer. Their names are properties on BTDeviceItem; import the parent component rather than importing those implementation files directly.

The root accepts React Native TouchableOpacityProps and children. It uses the active SDK app theme for surface, border, radius, shadow, and elevation. The parts provide the row structure; use normal React Native styles and accessibility props for product-specific behavior.

See BTDeviceList for the prebuilt list.

Last updated on