Skip to main content

PatientCard.Name

A text component for displaying patient names with configurable formatting options. Built to work with FHIR HumanName resources and provides intelligent fallbacks for missing or incomplete name data in healthcare applications.

Basic Example​

import { PatientCard } from "@ovok/native";
import * as React from "react";

const BasicPatientName: React.FC = () => {
  return <PatientCard.Name name={[{ given: ["John"], family: "Doe" }]} />;
};

export default BasicPatientName;

Props​

NameTypeRequiredDefaultDescription
nameHumanName[]--Array of FHIR HumanName objects
format"firstLast" | "lastFirst"-"firstLast"Name display format
styleStyleProp<TextStyle>--Custom styles for the text
testIDstring--Test identifier for the component

Inherits all props from TextProps

Component Behavior​

Name Formatting​

  • firstLast: "John Michael Doe" format (given names followed by family name)
  • lastFirst: "Doe, John Michael" format (family name followed by given names)
  • Multiple Given Names: Automatically joins multiple given names with spaces
  • Missing Data Handling: Gracefully handles missing given or family names

Fallback Logic​

  1. Uses the first HumanName object from the array
  2. Falls back to "Unknown Patient" for completely missing names
  3. Shows only available name parts when some fields are missing
  4. Returns empty display for invalid or empty name objects

FHIR Compliance​

  • Fully compatible with FHIR R4 HumanName structure
  • Supports given and family name components
  • Handles arrays of given names appropriately
  • Ignores FHIR use, text, and other metadata fields

Styling​

Theme Colors Used​

  • theme.colors.onSurface - Primary text color for patient names
  • theme.fonts.headlineSmall - Typography scale for prominent name display