QuestionnaireHeader.Subtitle

Displays progress information using an app-owned i18next translation key and formatting.

Overview

The QuestionnaireHeader.Subtitle component automatically displays progress information for questionnaires, showing current page/step information with customizable prefix text. It provides real-time updates as users navigate through the form.

Basic Example

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

const questionnaire: Questionnaire = {
  resourceType: "Questionnaire",
  status: "draft",
  title: "Basic Header",
  item: [
    {
      linkId: "1",
      text: "What is your name?",
      type: "string",
    },
  ],
};

const BasicHeader = () => {
  return (
    <QuestionnaireForm questionnaire={questionnaire}>
      <QuestionnaireForm.Header>
        <QuestionnaireForm.Header.Title />
        <QuestionnaireForm.Header.Subtitle prefix="Step" />
      </QuestionnaireForm.Header>
    </QuestionnaireForm>
  );
};
export default BasicHeader;

Props

Prop	Type	Default	Description
prefix	string	questionnaire-form.header.subtitle	i18next key receiving currentItemNumber and totalItems interpolation values
style	StyleProp<TextStyle>	-	Custom styling for the subtitle text
children	React.ReactNode	-	Custom subtitle content override

Features

• Automatic Progress Display: Shows current page/step information automatically
• Customizable Prefix: Add custom text before progress information
• Real-time Updates: Updates automatically as user navigates
• Custom Content Override: Replace automatic content with custom text
• Theme Integration: Uses theme colors and typography

Styling

Theme Colors

• theme.colors.onSurfaceVariant - Default text color
• theme.fonts.bodyMedium - Default typography style

Localization

The component uses these translation keys:

{
  "questionnaire-form": {
    "header": {
      "subtitle": "{currentItemNumber} of {totalItems}"
    }
  }
}