PatientCard.Gender

A visual gender indicator component with icon support and themed styling. Provides accessible gender display for healthcare applications with localization support and multiple visual variants.

Basic Example

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

const gender = "male" as const;

const ProviderGenderDisplay = () => <PatientCard.Gender gender={gender} />;

export default ProviderGenderDisplay;

Props

Name	Type	Required	Default	Description
gender	"male" | "female" | "other"	-	-	Patient gender value
showIcon	boolean	-	true	Whether to display gender icon
variant	"chip" | "default"	-	"chip"	Visual style variant
style	StyleProp<ViewStyle>	-	-	Custom styles for container
testID	string	-	-	Test identifier
textProps	TextProps	-	-	Props forwarded to text elements

Inherits all props from ViewProps

Component Behavior

Gender Icons

• Male: ♂ symbol with blue color theme (#2196F3)
• Female: ♀ symbol with pink color theme (#E91E63)
• Other: ⚲ symbol with purple color theme (#9C27B0)
• Unknown: Returns null (component doesn't render)

Visual Variants

• Chip: Bordered container with background color and rounded corners
• Default: Simple inline display with icon and text

Localization

The component uses these translation keys:

{
  "gender": {
    "male": "Male",
    "female": "Female",
    "other": "Other",
    "unknown": "Unknown"
  }
}

Styling

Theme Colors Used

• Gender-specific colors for icons and backgrounds
• theme.colors.outline - Fallback color for unknown gender
• theme.spacing(1) - Gap between icon and text (4px default)
• theme.spacing(3) - Chip horizontal padding (12px default)
• theme.borderRadius(3) - Chip corner radius (12px default)
• theme.fonts.labelMedium - Chip text typography
• theme.fonts.bodyMedium - Default variant typography