# KeyValueRow

> Atom — orn-ui

> ⚠️ Requiere <UIProvider>: Este componente (como todos los de orn-ui) debe renderizarse dentro de un ancestro <UIProvider>, o lanza un error en runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Corre en Expo SDK 54, 55, 56 y 57, y en React Native puro >=0.81 con react >=19.1. Sin módulos nativos — funciona en Expo Go, sin prebuild.

## Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)
```bash
npx orn-ui add key-value-row
```

O instala el paquete completo e impórtalo
```tsx
pnpm add orn-ui
import { KeyValueRow } from 'orn-ui/key-value-row';
```

Depende de: core (theme + icons)

## Variantes

### Totals

```tsx
<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

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

### Custom node

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

## Código completo del demo

```tsx
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>` | — | — |