BTDeviceList

BTDeviceList reads deviceListItems from DeviceListProvider and renders a FlashList. The data is intentionally provider-owned, so the list cannot drift from status updates sent through the provider.

Props

type BTDeviceListProps = Omit<
  FlashListProps<DeviceListItem>,
  "data" | "renderItem"
> & {
  renderItem?: FlashListProps<DeviceListItem>["renderItem"];
  itemProps?: Omit<TouchableOpacityProps, "onPress" | "children"> & {
    onPress: (item: DeviceListItem, index: number) => void;
  };
};

data and the default renderItem are controlled by the component. Passing data, estimatedItemSize, or renderItem tuning values from an old example is not part of the current API. A custom renderItem is supported, and the remaining FlashList props are forwarded.

Example

<DeviceListProvider>
  <BTDeviceList
    testID="device-list"
    contentContainerStyle={{ padding: 16 }}
    itemProps={{
      accessibilityRole: "button",
      onPress: (item) => openDevice(item.deviceType),
    }}
  />
</DeviceListProvider>

The default renderer translates item.title, item.subtitle, and the devices.instructions key, displays the device image, and shows status. Any accessibility label or action semantics beyond the forwarded item props belong to the host app.

Custom rendering

<DeviceListProvider>
  <BTDeviceList
    renderItem={({ item, index }) => (
      <CustomDeviceRow item={item} index={index} />
    )}
  />
</DeviceListProvider>

To change the items themselves, use useDeviceList() inside DeviceListProvider and update setDeviceListItems. The type is DeviceListItem[], with deviceType restricted to IntegratedDevices.