Tile.Title

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

Quick ExampleCopy Anchor Link

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;

PropsCopy Anchor Link

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

Component BehaviorCopy Anchor Link

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

LocalizationCopy Anchor Link

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

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:

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

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

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

Accessibility FeaturesCopy Anchor Link

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

• Tile.StartSection - Header section that typically precedes the title
• Tile.MeasuredValue - Value display that typically follows the title
• Tile.Status - Status text component with similar styling