Skip to main content

Questionnaire Response Form

Public API exported from @ovok/native

Every symbol below is re-exported from the package barrel — you can import { X } from '@ovok/native' for any of them. Earlier guidance treated some of these as "internal-only"; that's no longer accurate, the barrel was expanded in #139 so the docs and the public surface match.

  • QuestionnaireForm — compound component (QuestionnaireForm.Content, QuestionnaireForm.Navigation, etc.). Pass questionnaire, initialValues, EITHER onSubmit (full control) OR onSuccess+onError (built-in submit). paged?: boolean for multi-page wizards.
  • QuestionnaireFormProvider — standalone Formik provider — mount when you want a custom form layout instead of the default QuestionnaireForm compound.
  • QuestionnaireNavigationProvider — pager state provider for multi-page questionnaires.
  • useQuestionnaireForm — hook returning the FormikBag (values, setFieldValue, submitForm, isSubmitting, errors) — must be used inside a QuestionnaireFormProvider or QuestionnaireForm.
  • useQuestionnaireNavigation — hook returning { currentPage, goNext, goPrev, isLastPage } — must be used inside a QuestionnaireNavigationProvider.
  • useQuestionnaireNavigationState, useNavigationHandlers, useInitialSelectedValues — lower-level hooks for building custom form internals.
  • QuestionnaireFormContext, QuestionnaireNavigationContext — underlying React contexts.
  • QuestionnaireFormProps, QuestionnaireFormProviderProps, QuestionnaireFormContextType, QuestionnaireHeaderProps, QuestionnaireFormValues, ResponseValues, ExtendedQuestionnaireItem, QuestionnaireResponse — TypeScript types.
  • QuestionnaireSubmitUtils — helper utilities for crafting QuestionnaireResponse resources outside the 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​