Skip to main content

Tile.Status

Device connection status indicator that displays the current state of a Bluetooth measurement device with color-coded text and localized status messages.

Quick Example​

import { DeviceStatus, Tile } from "@ovok/native";
import React from "react";

const StatusExample = () => {
  return (
    <Tile>
      <Tile.Status status={DeviceStatus.CONNECTED} testID="device-status" />
    </Tile>
  );
};

export default StatusExample;

Props​

PropTypeRequiredDefaultDescription
statusDeviceStatus✓-Current device connection status

Inherits all TextProps from React Native Paper except children

Device Status Types​

The component supports these device status values:

DeviceStatus.CONNECTED​

  • Color: Green (700 shade)
  • Meaning: Device is connected and ready for measurement
  • Translation Key: tile.status.connected

DeviceStatus.DISCONNECTED​

  • Color: Red (700 shade)
  • Meaning: Device is not connected or out of range
  • Translation Key: tile.status.disconnected

DeviceStatus.MEASURING​

  • Color: Blue (700 shade)
  • Meaning: Device is actively taking a measurement
  • Translation Key: tile.status.measuring

DeviceStatus.LOW_BATTERY​

  • Color: Orange (700 shade)
  • Meaning: Device battery is low and needs charging
  • Translation Key: tile.status.low_battery

Component Behavior​

The Status component:

  1. Color Mapping: Automatically maps device status to appropriate theme colors
  2. Text Display: Shows localized status text based on the status value
  3. Typography: Uses small, consistent text styling (12px, regular weight)
  4. Color Memoization: Optimizes color calculations for performance

Localization​

Translation Keys​

The component uses these translation keys:

{
  "tile": {
    "status": {
      "connected": "Connected",
      "disconnected": "Disconnected",
      "measuring": "Measuring...",
      "low_battery": "Low Battery"
    }
  }
}
  • tile.status.connected - Device is connected and ready
  • tile.status.disconnected - Device is not connected
  • tile.status.measuring - Device is actively measuring
  • tile.status.low_battery - Device battery is low

Styling​

Theme Colors Used​

  • theme.colors.green[700] - Connected status
  • theme.colors.red[700] - Disconnected status
  • theme.colors.blue[700] - Measuring status
  • theme.colors.orange[700] - Low battery status

Color Accessibility​

The component uses semantic colors that provide clear meaning:

  • Green: Positive state (connected/ready)
  • Red: Error state (disconnected/unavailable)
  • Blue: Active state (measuring/in progress)
  • Orange: Warning state (low battery/attention needed)

All colors use the 700 shade for sufficient contrast against light backgrounds.