Data Display Components

Components for presenting content, information, and structured data. All components use semantic theme tokens and support light/dark modes.


import { Text, Avatar, Badge, Card, Chip, ListItem } from '@/common/components';

Text

The foundational typography component with 8 variants, semantic colors, and weight control. Extends React Native’s TextProps.

Variants


<Text variant="h1">Heading 1</Text>
<Text variant="h2">Heading 2</Text>
<Text variant="h3">Heading 3</Text>
<Text variant="body">Body text -- the default variant</Text>
<Text variant="bodySmall">Smaller body text</Text>
<Text variant="caption">Caption text</Text>
<Text variant="label">Label text</Text>
<Text variant="overline">OVERLINE TEXT</Text>

Colors and Weight


<Text color="primary">Primary text color</Text>
<Text color="secondary">Secondary, less emphasis</Text>
<Text color="accent">Accent / teal color</Text>
<Text color="link">Link-styled text</Text>
 
<Text weight="bold">Bold weight</Text>
<Text weight="semibold">Semibold weight</Text>
<Text variant="body" weight="medium" color="secondary">Combined styling</Text>

Alignment and Truncation


<Text align="center">Centered text</Text>
 
<Text numberOfLines={2}>
  This long text will be truncated after two lines with an ellipsis...
</Text>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	required	Content to render
`variant`	`'h1' \| 'h2' \| 'h3' \| 'body' \| 'bodySmall' \| 'caption' \| 'label' \| 'overline'`	`'body'`	Typography variant controlling size and line height
`weight`	`'regular' \| 'medium' \| 'semibold' \| 'bold'`	—	Font weight override
`color`	`'primary' \| 'secondary' \| 'tertiary' \| 'muted' \| 'inverse' \| 'accent' \| 'link'`	—	Semantic text color token
`align`	`'left' \| 'center' \| 'right'`	—	Horizontal text alignment

Text extends React Native’s TextProps, so you can use numberOfLines, ellipsizeMode, selectable, and all other standard text props.

Also documented under Typography with the full type scale reference.

Avatar

Displays a user or entity representation with three fallback layers: image, initials, and icon.

Image Avatar


<Avatar source={{ uri: 'https://example.com/photo.jpg' }} size="lg" />

Initials Fallback

When no source is provided, the component renders initials on a colored background.


<Avatar initials="JD" size="md" />

Icon Fallback

When neither source nor initials is provided, a custom icon is rendered.


import { Icon } from '@/common/components';
 
<Avatar icon={<Icon name="person-outline" size={20} />} size="md" />

Sizes

Size	Pixel Dimension (approx.)
`xs`	24px
`sm`	32px
`md`	40px (default)
`lg`	56px
`xl`	80px

Props

Prop	Type	Default	Description
`source`	`ImageSource`	—	Image source (takes priority over initials and icon)
`initials`	`string`	—	One or two character string for initials fallback
`icon`	`ReactNode`	—	Custom icon node as final fallback
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Avatar size
`accessibilityLabel`	`string`	—	Screen reader label

Fallback priority: source (image) > initials (text) > icon (custom node) > default person icon.

Badge

A compact status indicator with three visual variants and five color schemes. Can wrap a child element in dot mode.

Count Badge


<Badge count={5} />
<Badge count={150} maxCount={99} />  {/* Displays "99+" */}
<Badge count={3} variant="outline" colorScheme="success" />

Dot Badge

Wraps a child element with a small notification dot.


<Badge variant="dot" colorScheme="error">
  <Icon name="notifications-outline" size={24} />
</Badge>

Color Schemes


<Badge count={1} colorScheme="primary" />
<Badge count={2} colorScheme="success" />
<Badge count={3} colorScheme="warning" />
<Badge count={4} colorScheme="error" />
<Badge count={5} colorScheme="info" />

Props

Prop	Type	Default	Description
`variant`	`'solid' \| 'outline' \| 'dot'`	`'solid'`	Visual style variant
`size`	`'sm' \| 'md'`	`'md'`	Badge size
`colorScheme`	`'primary' \| 'success' \| 'error' \| 'warning' \| 'info'`	`'primary'`	Color scheme
`count`	`number`	—	Numeric value to display
`maxCount`	`number`	`99`	Maximum displayed count before showing `{max}+`
`children`	`ReactNode`	—	Child element wrapped by the badge (used with `dot` variant)

Card

A content container with three visual variants. Supports press interactions with animated feedback.

Variants


<Card>
  <Text>Default filled card</Text>
</Card>
 
<Card variant="elevated">
  <Text>Elevated card with shadow</Text>
</Card>
 
<Card variant="outlined">
  <Text>Outlined card with border</Text>
</Card>

Pressable Card


<Card pressable onPress={handleCardPress}>
  <Text variant="h3">Tap Me</Text>
  <Text color="secondary">This card responds to press with animation</Text>
</Card>

Props

Prop	Type	Default	Description
`variant`	`'filled' \| 'elevated' \| 'outlined'`	`'filled'`	Visual style variant
`pressable`	`boolean`	`false`	Enable press interactions
`onPress`	`() => void`	—	Press handler (only effective when `pressable` is true)
`children`	`ReactNode`	required	Content rendered inside the card

Card extends React Native’s ViewProps, so you can pass style, testID, and other standard view props.

Chip

A compact, selectable tag component with optional close button. Useful for filters, tags, and multi-select inputs.

Basic Usage


<Chip label="React Native" onPress={handleToggle} />
<Chip label="TypeScript" variant="solid" selected />

With Icon and Close


import { Icon } from '@/common/components';
 
<Chip
  label="Location"
  icon={<Icon name="location-outline" size={14} />}
  selected
  onClose={handleRemove}
/>

Sizes


<Chip label="Small" size="sm" />
<Chip label="Medium" size="md" />

Props

Prop	Type	Default	Description
`label`	`string`	required	Text content displayed inside the chip
`variant`	`'solid' \| 'outline'`	`'outline'`	Visual style variant
`size`	`'sm' \| 'md'`	`'md'`	Chip size
`selected`	`boolean`	`false`	Whether the chip is in a selected state
`onPress`	`() => void`	—	Press handler for toggling
`onClose`	`() => void`	—	Close handler (renders a close icon when provided)
`icon`	`ReactNode`	—	Optional icon rendered before the label
`disabled`	`boolean`	`false`	Disable the chip

ListItem

A structured list row with title, optional subtitle, and left/right content slots. Supports press interactions with animated feedback.

Basic Usage


<ListItem title="Profile" onPress={handleNavigate} />
 
<ListItem
  title="John Doe"
  subtitle="john@example.com"
  onPress={handleSelect}
/>

With Slots


import { Avatar, Icon, Switch } from '@/common/components';
 
<ListItem
  title="Account"
  subtitle="Manage your account settings"
  left={<Avatar initials="JD" size="sm" />}
  right={<Icon name="chevron-forward" variant="muted" />}
  onPress={handleNavigate}
/>
 
<ListItem
  title="Dark Mode"
  right={<Switch value={isDark} onValueChange={toggleDark} />}
/>

With Divider


<ListItem title="First Item" divider />
<ListItem title="Second Item" divider />
<ListItem title="Last Item" />

Props

Prop	Type	Default	Description
`title`	`string`	required	Primary text
`subtitle`	`string`	—	Secondary text below the title
`left`	`ReactNode`	—	Content rendered on the left (e.g., avatar, icon)
`right`	`ReactNode`	—	Content rendered on the right (e.g., badge, switch, chevron)
`onPress`	`() => void`	—	Press handler (makes the item pressable when provided)
`divider`	`boolean`	`false`	Render a divider below the item
`disabled`	`boolean`	`false`	Disable the list item
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant controlling dimensions