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 ExampleCopy Anchor Link

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;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/tile API reference.

Device Status TypesCopy Anchor Link

The component supports these device status values:

DeviceStatus.CONNECTEDCopy Anchor Link

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

DeviceStatus.DISCONNECTEDCopy Anchor Link

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

DeviceStatus.MEASURINGCopy Anchor Link

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

DeviceStatus.LOW_BATTERYCopy Anchor Link

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

Component BehaviorCopy Anchor Link

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

LocalizationCopy Anchor Link

Translation keys supplied by the appCopy Anchor Link

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

The SDK requests these keys through the app's react-i18next resources; it does not ship the English strings shown above. If a key is missing, the raw key may be rendered.

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

• 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 AccessibilityCopy Anchor Link

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)

The 700 shades are defaults, not a contrast guarantee. Check the actual palette against the app's background in every supported theme.

Related ComponentsCopy Anchor Link

• Tile.MeasuringSpinner - Visual indicator for measuring state
• Tile.NoMeasuredValue - Placeholder when device is disconnected
• Tile.MeasuredValue - Result display when measurement completes