QuestionnaireHeader.Title

Displays the questionnaire title with automatic fallback and customizable styling.

Overview

The QuestionnaireHeader.Title component automatically displays the questionnaire title from the form context or allows for custom title override. It integrates with the theme system and forwards supported text props so the host app can provide its required accessibility semantics.

Basic Example

import { QuestionnaireForm } from "@ovok/native";
import { Questionnaire } from "@medplum/fhirtypes";

const questionnaire: Questionnaire = {
  resourceType: "Questionnaire",
  status: "draft",
  title: "Basic Header", // it will be displayed in the header
  item: [],
};

const BasicHeader = () => {
  return (
    <QuestionnaireForm questionnaire={questionnaire}>
      <QuestionnaireForm.Header>
        <QuestionnaireForm.Header.Title />
      </QuestionnaireForm.Header>
    </QuestionnaireForm>
  );
};

export default BasicHeader;

Props

Prop	Type	Default	Description
variant	string	'titleLarge'	Typography variant to use
style	StyleProp<TextStyle>	undefined	Custom styles for the title
...textProps	TextProps	-	All other Text props (accessibility, testID, etc.)

Features

• Automatic Title Display: Automatically retrieves and displays the questionnaire title from context
• Custom Override: Supports custom title content through children prop
• Theme Integration: Uses theme typography and colors automatically
• Accessibility: Forward supported text accessibility props from the host app
• Responsive: Typography scales appropriately across devices

Styling

Theme Variables Used

• theme.colors.onSurface - Default text color
• theme.fonts.headlineSmall - Default typography style