Skip to main content

BTDeviceItem

BTDeviceItem is a TouchableOpacity with optional children and theme-aware container styling. It exposes these compound members:

TopContainer, Content, Title, SubTitle, Status, Image, Divider, and BottomContainer.

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</BTDeviceItem.Title>
      <BTDeviceItem.SubTitle>Viatom BP2</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>

Prop forwarding​

  • BTDeviceItem accepts TouchableOpacityProps; its children are optional.
  • TopContainer, Content, and BottomContainer accept their ViewProps.
  • Title and SubTitle accept their supported Paper text props.
  • Status accepts status plus supported text props, with its children owned by the component.
  • Image accepts OptimizedImageProps.
  • Divider is the react-native-paper divider.

The container applies the theme border radius, surface, outline, and shadow before the caller's style. Accessibility labels, roles, and test IDs are caller-owned and should describe the app's action rather than a hard-coded SDK action.