KeyValueRow — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add key-value-row

Or install the whole package and import it

pnpm add orn-ui
import { KeyValueRow } from 'orn-ui/key-value-row';

Depends on:core (theme + icons)

Usage

when to use — Read-only pairs stacked in a column: totals, order details, a summary before confirming.
value — Takes a node, not only a string — a Badge or a bold amount works.
labelStyle / valueStyle — Emphasize the last row of a total without building a separate component.

Demo clip not recorded yet — see MEDIA.md

Variants

Totals

<View style={{ gap: 8 }}>
  <KeyValueRow label="Subtotal" value="$300.00" />
  <KeyValueRow label="Tax" value="$40.00" />
  <KeyValueRow label="Total" value="$340.00" labelStyle={{ fontWeight: '700' }} valueStyle={{ fontWeight: '700' }} />
</View>

Numeric value

<KeyValueRow label="Items" value={12} />

Custom node

<KeyValueRow label="Status" value={<Badge label="PAID" variant="success" />} />

Full demo source

const variants: VariantDef[] = [
  {
    label: 'Totals',
    content: (
      <View style={{ gap: 8 }}>
        <KeyValueRow label="Subtotal" value="$300.00" />
        <KeyValueRow label="Tax" value="$40.00" />
        <KeyValueRow label="Total" value="$340.00" labelStyle={{ fontWeight: '700' }} valueStyle={{ fontWeight: '700' }} />
      </View>
    ),
  },
  { label: 'Numeric value', content: <KeyValueRow label="Items" value={12} /> },
  { label: 'Custom node', content: <KeyValueRow label="Status" value={<Badge label="PAID" variant="success" />} /> },
];
return <VariantList variants={variants} />;

Props

Name	Type	Default	Description
`label`	`ReactNode`	—	—
`value`	`ReactNode`	—	—
`style?`	`StyleProp<ViewStyle>`	—	—
`labelStyle?`	`StyleProp<TextStyle>`	—	—
`valueStyle?`	`StyleProp<TextStyle>`	—	—