# Tile.Title

Canonical page: https://docs.ovok.com/native-sdk/guide/components/tile/title

Simple title text component that displays measurement task names with consistent typography and theme integration.

## Quick Example [#quick-example]

```tsx
import { Tile } from "@ovok/native";
import React from "react";

const TitleExample = () => {
  return (
    <Tile>
      <Tile.Title testID="measurement-title">
        Blood Pressure Measurement
      </Tile.Title>
    </Tile>
  );
};

export default TitleExample;
```

## Props [#props]

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

## Component Behavior [#component-behavior]

The Title component renders text using React Native Paper's Text component with:

1. **Typography**: Uses `titleLarge` variant from Material Design 3
2. **Font Family**: Custom font "DMSans_700Bold" for enhanced readability
3. **Font Size**: Fixed at 16px for consistent hierarchy
4. **Style Merging**: Combines default styles with custom styles passed via props

## Localization [#localization]

This component does not handle localization directly. Translation should be handled by the parent component:

```tsx
import { useTranslation } from "react-i18next";

export const LocalizedTitleExample = () => {
  const { t } = useTranslation();

  return (
    <Tile>
      <Tile.Title>{t("measurements.bloodPressure.title")}</Tile.Title>
    </Tile>
  );
};
```

Common translation keys used with Tile.Title:

```json
{
  "tile": {
    "bloodPressure": {
      "label": "Blood Pressure"
    },
    "bloodGlucose": {
      "label": "Blood Glucose"
    },
    "bodyWeight": {
      "label": "Body Weight"
    },
    "temperature": {
      "label": "Temperature"
    }
  }
}
```

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

This component uses the default text color from the theme through React Native Paper's Text component.

## Accessibility Features [#accessibility-features]

- **Semantic Role**: Inherits proper text semantics from React Native Paper
- **Screen Reader**: Text content is automatically read by screen readers
- **Font Scaling**: Respects user's system font size preferences
- **High Contrast**: Works with system accessibility settings

## Related Components [#related-components]

- [Tile.StartSection](/native-sdk/guide/components/tile/start-section/) - Header section that typically precedes the title
- [Tile.MeasuredValue](/native-sdk/guide/components/tile/measured-value/) - Value display that typically follows the title
- [Tile.Status](/native-sdk/guide/components/tile/status/) - Status text component with similar styling