Skip to main content

Questionnaire Response Form

The Questionnaire Response Form module provides a comprehensive solution for rendering FHIR-based questionnaires in React Native applications. It offers multi-page navigation, various input types, conditional logic, and seamless integration with FHIR healthcare standards.

Overview​

The Questionnaire Response Form module is built using a compound component pattern, providing maximum flexibility for different questionnaire types and healthcare workflows while maintaining FHIR compliance and visual consistency across your healthcare application.

Basic Example​

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

const questionnaire: Questionnaire = {
  resourceType: "Questionnaire",
  id: "123",
  title: "My Questionnaire",
  status: "active",
  item: [
    {
      linkId: "1",
      text: "What is your name?",
      type: "string",
    },
    {
      linkId: "2",
      text: "What is your age?",
      type: "integer",
    },
    {
      linkId: "3",
      text: "What is your email?",
      type: "string",
    },
  ],
};

const QuestionnaireResponseScreen = () => {
  return (
    <QuestionnaireForm questionnaire={questionnaire}>
      <QuestionnaireForm.Header>
        <QuestionnaireForm.Header.Title />
      </QuestionnaireForm.Header>
      <QuestionnaireForm.Content>
        <QuestionnaireForm.Content.Item />
      </QuestionnaireForm.Content>
      <QuestionnaireForm.Navigation>
        <QuestionnaireForm.Navigation.PreviousButton />
        <QuestionnaireForm.Navigation.NextButton />
        <QuestionnaireForm.Navigation.SubmitButton />
      </QuestionnaireForm.Navigation>
    </QuestionnaireForm>
  );
};

export default QuestionnaireResponseScreen;

Props​

PropTypeRequiredDescription
questionnaireQuestionnaire✅FHIR Questionnaire resource to render
initialValuesQuestionnaireFormValues❌Initial form values
pagedboolean❌Enable paged mode (default: true)
onSubmitFunction❌Custom submission handler
onSuccessFunction❌Success callback for automatic submission
onErrorFunction❌Error callback for automatic submission
styleViewStyle❌Custom styling for the container
...viewPropsViewProps❌Standard React Native View props

Key Features​

  • 📋 FHIR Compliance: Full support for FHIR Questionnaire and QuestionnaireResponse resources
  • 🔀 Multi-page Navigation: Seamless navigation between questionnaire pages with progress tracking
  • 🎯 Field Type Support: Comprehensive support for text, boolean, choice, date, and numeric fields
  • 🔧 Conditional Logic: Advanced conditional questions using FHIR enableWhen specifications
  • ✅ Form Validation: Built-in validation with customizable rules and real-time feedback
  • 🧩 Compound Components: Flexible UI composition with sub-components for maximum customization
  • 🌐 Internationalization: Multi-language support for global healthcare applications
  • 📱 Responsive Design: Adaptive layouts for different screen sizes and orientations
  • 🎭 Theming: Integration with React Native Paper theming system

Components​