Skip to main content

Tile.Title

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

Quick Example​

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​

PropTypeRequiredDefaultDescription
childrenReactNode✓-Text content to display as title
styleStyleProp<TextStyle>--Custom text styles
testIDstring--Test identifier for automated testing

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​

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"
    }
  }
}

Styling​

Theme Colors Used​

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

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