# Tile.Status

Canonical page: https://docs.ovok.com/native-sdk/guide/components/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 [#quick-example]

```tsx
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 [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/tile` API reference](/native-sdk/reference/tile).

## Device Status Types [#device-status-types]

The component supports these device status values:

### DeviceStatus.CONNECTED [#devicestatusconnected]

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

### DeviceStatus.DISCONNECTED [#devicestatusdisconnected]

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

### DeviceStatus.MEASURING [#devicestatusmeasuring]

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

### DeviceStatus.LOW_BATTERY [#devicestatuslow_battery]

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

## Component Behavior [#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 [#localization]

### Translation keys supplied by the app [#translation-keys-supplied-by-the-app]

The component uses these translation keys:

```json
{
  "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.

## Styling [#styling]

### Theme Colors Used [#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 [#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)

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

## Related Components [#related-components]

- [Tile.MeasuringSpinner](/native-sdk/guide/components/tile/measuring-spinner/) - Visual indicator for measuring state
- [Tile.NoMeasuredValue](/native-sdk/guide/components/tile/no-measured-value/) - Placeholder when device is disconnected
- [Tile.MeasuredValue](/native-sdk/guide/components/tile/measured-value/) - Result display when measurement completes