QuestionnaireContent

The content components handle the rendering of questionnaire items and form content. These components provide flexible display modes for both paged and single-page questionnaires while managing conditional logic and error display.

Overview

The content component system consists of a main container and specialized sub-components for different display modes. Components automatically handle conditional item rendering, error states, and accessibility requirements for healthcare questionnaires.

Components

• QuestionnaireContent.Item - Renders current questionnaire item for paged mode
• QuestionnaireContent.AllItems - Displays all items in single scrollable view
• QuestionnaireContent.Error - Shows validation and submission errors

Features

• 📋 Item Rendering: Automatic field type selection based on FHIR specifications
• 🔄 Conditional Logic: Real-time evaluation of enableWhen rules
• 📊 Multiple Display Modes: Support for both paged and single-page questionnaires
• ❌ Error Handling: Comprehensive error display with accessibility support
• ♿ Accessible: Screen reader support and proper form semantics
• 🎨 Customizable: Full styling control with theme integration

Quick Start

Paged Mode

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",
    },
    {
      linkId: "2",
      text: "What is your age?",
      type: "integer",
    },
  ],
};

const PagedContent = () => {
  return (
    <QuestionnaireForm questionnaire={questionnaire}>
      <QuestionnaireForm.Content>
        <QuestionnaireForm.Content.Item />
        <QuestionnaireForm.Content.Error />
      </QuestionnaireForm.Content>
    </QuestionnaireForm>
  );
};

export default PagedContent;

Single Page Mode

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",
    },
    {
      linkId: "2",
      text: "What is your age?",
      type: "integer",
    },
  ],
};

const SinglePageContent = () => {
  return (
    <QuestionnaireForm questionnaire={questionnaire}>
      <QuestionnaireForm.Content>
        <QuestionnaireForm.Content.AllItems />
        <QuestionnaireForm.Content.Error />
      </QuestionnaireForm.Content>
    </QuestionnaireForm>
  );
};

export default SinglePageContent;

Props

QuestionnaireContent

Prop	Type	Default	Description
style	StyleProp<ViewStyle>	undefined	Custom styles for the content container
children	ReactNode	undefined	Child components (typically Item, AllItems, and Error)
...viewProps	ViewProps	-	All other React Native View props (testID, accessible, etc.)

Styling

Theme Colors Used

The content components use the following theme values by default:

• theme.colors.surface - Content background color
• theme.colors.onSurface - Primary text color
• theme.colors.surfaceVariant - Secondary background color
• theme.colors.errorContainer - Error background color
• theme.colors.onErrorContainer - Error text color
• theme.spacing() - Consistent spacing throughout content components
• theme.borderRadius() - Consistent border radius for containers