QuestionnaireHeader

The header components provide title display and progress tracking for questionnaire forms. These components work together to create informative headers that guide users through multi-page questionnaires with clear navigation context.

Overview

The header component system consists of a main container and specialized sub-components for displaying questionnaire titles and progress information. All components are designed to be accessible, themeable, and responsive across different screen sizes.

Components

• QuestionnaireHeader.Title - Displays questionnaire title with customizable styling
• QuestionnaireHeader.Subtitle - Shows progress information and custom subtitle text

Features

• 📋 Title Display: Automatic questionnaire title rendering with fallback support
• 📊 Progress Tracking: Real-time progress information for multi-page questionnaires
• 🎨 Customizable: Full styling control with theme integration
• ♿ Accessible: Screen reader support and proper heading semantics
• 📱 Responsive: Adapts to different screen sizes and orientations

Quick Start

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

const questionnaire: Questionnaire = {
  resourceType: "Questionnaire",
  status: "draft",
  title: "Basic Header",
  item: [],
};

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

Props

QuestionnaireHeader

Prop	Type	Default	Description
style	StyleProp<ViewStyle>	undefined	Custom styles to override default header styling
children	ReactNode	undefined	Child components (typically Title and Subtitle)
...viewProps	ViewProps	-	All other React Native View props (testID, accessible, etc.)

Features:

• Consistent header spacing and layout
• Theme integration with automatic styling
• Responsive design for different screen sizes
• Accessibility support with proper semantic roles

Styling

Theme Colors Used

The header components use the following theme values by default:

• theme.colors.surface - Header background color
• theme.spacing() - Consistent spacing throughout header components