Skip to main content

BT Device UI Components

React Native UI components for displaying and managing Bluetooth medical device interfaces in healthcare applications.

Overview​

The BTDeviceItem module provides a comprehensive set of UI components for displaying medical device information, device lists, and instruction manuals. This module works closely with the bt-management module to provide a complete medical device user interface solution.

Features​

🏥 Medical Device Display​

  • Device List Component: Displays available medical devices with status indicators
  • Device Cards: Individual device cards showing connection status, device type, and actions
  • Real-time Status: Live connection status updates and visual indicators

📋 Device Management​

  • Device Selection: Interactive device selection with device-specific information
  • Instruction Display: Built-in PDF viewer for device instruction manuals
  • Status Tracking: Visual status indicators for connection, measuring, and error states

🎨 Customizable UI​

  • Compound Components: Flexible compound component architecture for custom layouts
  • Theme Integration: Full integration with the app theme system
  • Responsive Design: Optimized for various screen sizes and orientations

🔗 Seamless Integration​

  • Context Management: Built-in React context for device list state management
  • Type Safety: Full TypeScript support with comprehensive type definitions
  • Internationalization: Built-in support for multi-language device names and descriptions

Key Components​

ComponentDescriptionUse Case
BTDeviceListMain list component for displaying available devicesDevice selection screens
BTDeviceItemIndividual device card with compound sub-componentsCustom device layouts
BTDeviceInstructionPDF viewer for device instruction manualsHelp and instruction screens
DeviceListProviderContext provider for device list stateApp-wide device state management

Quick Start​

Basic Usage​

import React from "react";
import {
  BTDeviceList,
  DeviceListProvider,
  DeviceListItem,
} from "@modules/bt-device";

const DeviceSelectionScreen = () => {
  const handleDevicePress = (item: DeviceListItem, index: number) => {
    console.log("Selected device:", item.deviceType);
    // Navigate to device connection screen
  };

  return (
    <DeviceListProvider>
      <BTDeviceList
        itemProps={{
          onPress: handleDevicePress,
        }}
      />
    </DeviceListProvider>
  );
};

Custom Device Item​

import React from "react";
import { BTDeviceItem, DeviceStatus } from "@modules/bt-device";
import { IntegratedDevices } from "@modules/bt-management";

const CustomDeviceCard = () => {
  return (
    <BTDeviceItem onPress={() => console.log("Device pressed")}>
      <BTDeviceItem.TopContainer>
        <BTDeviceItem.Content>
          <BTDeviceItem.Title>Blood Pressure Monitor</BTDeviceItem.Title>
          <BTDeviceItem.SubTitle>Wellue BP2 Armfit+</BTDeviceItem.SubTitle>
          <BTDeviceItem.Status status={DeviceStatus.CONNECTED} />
        </BTDeviceItem.Content>
        <BTDeviceItem.Image uri="device-image-uri" />
      </BTDeviceItem.TopContainer>

      <BTDeviceItem.Divider />

      <BTDeviceItem.BottomContainer>
        <BTDeviceItem.SubTitle>View Instructions</BTDeviceItem.SubTitle>
      </BTDeviceItem.BottomContainer>
    </BTDeviceItem>
  );
};

Device Instructions​

import React from "react";
import { BTDeviceInstruction } from "@modules/bt-device";
import { IntegratedDevices } from "@modules/bt-management";

const InstructionScreen = ({
  deviceType,
}: {
  deviceType: IntegratedDevices;
}) => {
  const handleError = (error: Error) => {
    console.error("Failed to load instruction PDF:", error);
  };

  return (
    <BTDeviceInstruction
      deviceType={deviceType}
      onError={handleError}
      style={{ flex: 1 }}
    />
  );
};

Supported Medical Devices​

The module includes pre-configured support for 15+ medical device types:

Blood Pressure Monitors​

  • Wellue BP2 Armfit+: Advanced blood pressure monitor with ECG capability
  • AOJ-20A: Non-contact infrared thermometer with dual functionality

Glucose Meters​

  • TAIDOC TD4216: Professional glucose meter with automatic data sync
  • GlucoCheck Gold: Portable glucose meter with enhanced accuracy

Pulse Oximeters​

  • Wellue Oxyfit: Professional pulse oximeter with real-time monitoring
  • OxySmart PC60WF: Advanced pulse oximeter with data logging

Thermometers​

  • TAIDOC TD1107 CleverTemp: Smart infrared thermometer
  • FORA IR20: Professional non-contact thermometer
  • Andesfit B33A: Bluetooth-enabled digital thermometer

Scales & Body Composition​

  • Viatom F4: Smart scale with body composition analysis
  • FORA W550: Medical-grade digital scale
  • Transtek Tele-RPM: Remote patient monitoring scale

Specialized Devices​

  • Cosinuss One: Multi-parameter ear sensor
  • AliveCor KardiaMobile: Mobile ECG device
  • BC401: Multi-parameter urine analyzer

Architecture​

Component Hierarchy​

DeviceListProvider (Context)
├── BTDeviceList (Main List)
│   ├── BTDeviceItem (Individual Cards)
│   │   ├── BTDeviceItem.TopContainer
│   │   │   ├── BTDeviceItem.Content
│   │   │   │   ├── BTDeviceItem.Title
│   │   │   │   ├── BTDeviceItem.SubTitle
│   │   │   │   └── BTDeviceItem.Status
│   │   │   └── BTDeviceItem.Image
│   │   ├── BTDeviceItem.Divider
│   │   └── BTDeviceItem.BottomContainer
│   └── Custom renderItem (Optional)
└── BTDeviceInstruction (PDF Viewer)

State Management​

The module uses React Context for managing device list state:

interface DeviceListContext {
  deviceListItems: DeviceListItem[];
  setDeviceListItems: React.Dispatch<React.SetStateAction<DeviceListItem[]>>;
}

Type System​

Comprehensive TypeScript support with key types:

interface DeviceListItem {
  title: string; // Internationalization key for device name
  subtitle: string; // Internationalization key for device description
  deviceImageUri: string; // Base64 or URI for device image
  status: DeviceStatus; // Current connection/measurement status
  deviceType: IntegratedDevices; // Device type from bt-management
}

Integration with BT Management​

The bt-device module is designed to work seamlessly with the bt-management module:

Status Synchronization​

import { DeviceStatus } from "@modules/bt-management";
import { useDeviceList } from "@modules/bt-device";

const DeviceManager = () => {
  const { setDeviceListItems } = useDeviceList();

  const handleDeviceStatusUpdate = (
    status: DeviceStatus,
    device: DeviceData,
    measurementType?: MeasurementTypeKey,
  ) => {
    setDeviceListItems((prev) =>
      prev.map((item) =>
        item.deviceType === device.name ? { ...item, status } : item,
      ),
    );
  };

  return (
    <BTProvider
      onDeviceStatusUpdated={handleDeviceStatusUpdate}
      // ... other props
    >
      <BTDeviceList />
    </BTProvider>
  );
};

Device Type Mapping​

The module automatically maps device types from bt-management to display information:

// Device list items are pre-configured with IntegratedDevices enum
const deviceItem: DeviceListItem = {
  title: "devices.viatom.wellue-bp2-title",
  subtitle: "devices.viatom.wellue-bp2-subtitle",
  deviceType: IntegratedDevices.BP2,
  status: DeviceStatus.DISCONNECTED,
  deviceImageUri: deviceImages.bp2DeviceImage,
};

Styling and Theming​

Theme Integration​

All components use the app theme system for consistent styling:

import { useAppTheme } from "@modules/theme";

const ThemedComponent = () => {
  const theme = useAppTheme();

  return (
    <View
      style={{
        backgroundColor: theme.colors.surface,
        borderRadius: theme.borderRadius(4),
        padding: theme.spacing(4),
      }}
    >
      {/* Component content */}
    </View>
  );
};

Customization Options​

Components support extensive customization through props:

<BTDeviceList
  contentContainerStyle={{ padding: 20 }}
  ItemSeparatorComponent={() => <View style={{ height: 15 }} />}
  itemProps={{
    style: { marginHorizontal: 10 },
    onPress: handleDevicePress,
  }}
/>

Performance Optimizations​

Efficient List Rendering​

Uses FlashList for optimal performance with large device lists:

import { FlashList } from "@shopify/flash-list";

// Automatically handles virtualization and memory management
<FlashList
  data={deviceListItems}
  renderItem={renderDeviceItem}
  estimatedItemSize={177}
/>;

Image Optimization​

Device images are optimized for performance:

import { OptimizedImage } from "@modules/image";

// Automatic sizing and caching
<OptimizedImage width={65} height={65} uri={deviceImageUri} />;

Accessibility​

Screen Reader Support​

Components include proper accessibility labels:

<BTDeviceItem
  accessibilityLabel={`${deviceName} - ${connectionStatus}`}
  accessibilityRole="button"
>
  {/* Component content */}
</BTDeviceItem>

Keyboard Navigation​

Supports keyboard navigation for accessibility compliance.

Testing​

Component Testing​

import { render, fireEvent } from "@testing-library/react-native";
import { BTDeviceList, DeviceListProvider } from "@modules/bt-device";

describe("BTDeviceList", () => {
  it("renders device items correctly", () => {
    const { getByText } = render(
      <DeviceListProvider>
        <BTDeviceList />
      </DeviceListProvider>,
    );

    expect(getByText("Blood Pressure Monitor")).toBeTruthy();
  });

  it("handles device selection", () => {
    const mockOnPress = jest.fn();
    const { getByTestId } = render(
      <DeviceListProvider>
        <BTDeviceList itemProps={{ onPress: mockOnPress }} />
      </DeviceListProvider>,
    );

    fireEvent.press(getByTestId("device-item-0"));
    expect(mockOnPress).toHaveBeenCalled();
  });
});

Best Practices​

Device List Management​

  1. Use Context Provider: Always wrap device components in DeviceListProvider
  2. Status Updates: Keep device status synchronized with bt-management
  3. Error Handling: Implement proper error handling for instruction PDFs
  4. Performance: Use FlatList optimization techniques for large lists

Custom Layouts​

  1. Compound Components: Leverage compound component pattern for flexibility
  2. Theme Consistency: Use theme system for consistent styling
  3. Accessibility: Include proper accessibility labels and roles
  4. Testing: Write comprehensive tests for custom implementations

Common Patterns​

Healthcare Dashboard​

const HealthcareDashboard = () => {
  return (
    <DeviceListProvider>
      <ScrollView>
        <Text style={styles.title}>Available Devices</Text>
        <BTDeviceList
          itemProps={{
            onPress: (device) => navigateToDevice(device.deviceType),
          }}
        />
      </ScrollView>
    </DeviceListProvider>
  );
};

Device Selection Modal​

const DeviceSelectionModal = ({ visible, onSelect, onClose }) => {
  return (
    <Modal visible={visible} onRequestClose={onClose}>
      <DeviceListProvider>
        <BTDeviceList
          itemProps={{
            onPress: (device) => {
              onSelect(device);
              onClose();
            },
          }}
        />
      </DeviceListProvider>
    </Modal>
  );
};

Dependencies​

  • @shopify/flash-list: High-performance list rendering
  • react-native-paper: Material Design components (Divider)
  • iconsax-react-nativejs: Icon library for UI elements
  • react-i18next: Internationalization support
  • @modules/theme: App theme system
  • @modules/image: Optimized image components
  • @modules/pdf: PDF viewer functionality
  • @modules/bt-management: Device type definitions and status enums

Migration Guide​

From v1.x to v2.x​

Key changes in the latest version:

  1. Context Provider: DeviceListProvider is now required
  2. Type Updates: Enhanced TypeScript definitions
  3. Performance: Migration to FlashList from FlatList
  4. Accessibility: Improved screen reader support
// Old (v1.x)
<BTDeviceList data={devices} onPress={handlePress} />

// New (v2.x)
<DeviceListProvider>
  <BTDeviceList itemProps={{ onPress: handlePress }} />
</DeviceListProvider>