Skip to main content

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 Example​

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;

Props​

NameTypeRequiredDefaultDescription
childrenReact.ReactNode--Metadata components to display
styleStyleProp<ViewStyle>--Custom styles for container

Inherits all props from ViewProps

Component Behavior​

Layout System​

  • 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 Organization​

  • 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

Styling​

Theme Colors Used​

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

Layout Responsiveness​

  • 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