KeyValueRow — componente React Native

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add key-value-row

O instala el paquete completo e impórtalo

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

Depende de:core (theme + icons)

Uso

cuándo usarlo — Pares de solo lectura apilados en columna: totales, detalle de una orden, un resumen antes de confirmar.
value — Acepta un nodo, no solo un string — un Badge o un monto en negrita funcionan.
labelStyle / valueStyle — Destacar la última fila de un total sin armar un componente aparte.

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

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" />} />

Código completo del demo

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

Nombre	Tipo	Por defecto	Descripción
`label`	`ReactNode`	—	—
`value`	`ReactNode`	—	—
`style?`	`StyleProp<ViewStyle>`	—	—
`labelStyle?`	`StyleProp<TextStyle>`	—	—
`valueStyle?`	`StyleProp<TextStyle>`	—	—