PatientCard.Meta

A flexible container component for organizing patient metadata and secondary information. Provides consistent spacing and responsive layout for patient demographics and additional details.

Basic ExampleCopy Anchor Link

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

const appointment = {
  time: "10:00 AM",
  type: "Checkup",
};

const AppointmentMeta = () => (
  <PatientCard.Meta>
    <Text style={{ fontWeight: "600", color: "#007bff" }}>
      {appointment.time}
    </Text>
    <Text style={{ fontSize: 12, color: "#6c757d" }}>{appointment.type}</Text>
  </PatientCard.Meta>
);

export default AppointmentMeta;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/patient API reference.

Component BehaviorCopy Anchor Link

Layout SystemCopy Anchor Link

• Flexbox Container: Uses row direction with space-between alignment
• Responsive Wrapping: Automatically wraps content to new lines when needed
• Consistent Spacing: Applies theme-based gaps between child elements
• Center Alignment: Vertically centers all child components

Content OrganizationCopy Anchor Link

• Groups related patient information logically
• Maintains visual hierarchy with consistent spacing
• Supports mixed content types (text, chips, buttons)
• Provides flexible layout for various screen sizes

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

• theme.spacing(3) - Gap between child elements (12px default)

Layout ResponsivenessCopy Anchor Link

• Automatically adjusts for different screen widths
• Wraps content intelligently when space is constrained
• Maintains readable spacing on all device sizes
• Supports both portrait and landscape orientations