Card.tsx

Purpose

This module provides the application’s standard card surface, used throughout all screens to group related content into visually distinct panels.

Its responsibilities include:

• Rendering a View with consistent background, border, border radius, padding, and shadow
• Optionally rendering a bold title above the card’s children
• Accepting an optional style override for per-callsite layout adjustments

Invariants

Title is Conditional

The title Text element is only rendered when the title prop is a non-empty truthy string.

No empty placeholder is rendered when title is omitted or undefined.

Style Override Appended Last

The style prop is spread as the second entry in the style array, after the base card style, allowing callers to override padding, margin, or background without specificity conflicts.

Exports

Card

export function Card({
	title?,
	children,
	style?,
}: {
	title?: string;
	children: React.ReactNode;
	style?: ViewStyle;
}): JSX.Element

Props

Visual Defaults