# SymmetricGrid

> Molecule — 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 symmetric-grid
```

O instala el paquete completo e impórtalo
```tsx
pnpm add orn-ui
import { SymmetricGrid } from 'orn-ui/symmetric-grid';
```

Depende de: core (theme + icons)

## Variantes

### columns={2} — default, last row of 1 centered

```tsx
<SymmetricGrid
  data={ITEMS}
  columns={2}
  keyExtractor={(item) => item.id}
  renderItem={(item) => <Tile name={item.name} />}
/>
```

### columns={3} — same 5 items, different grid

```tsx
<SymmetricGrid
  data={ITEMS}
  columns={3}
  keyExtractor={(item) => item.id}
  renderItem={(item) => <Tile name={item.name} />}
/>
```

### balanceLastRow={false} — incomplete row left-aligned instead of centered

```tsx
<SymmetricGrid
  data={ITEMS}
  columns={2}
  balanceLastRow={false}
  keyExtractor={(item) => item.id}
  renderItem={(item) => <Tile name={item.name} />}
/>
```

## Código completo del demo

```tsx
const variants: VariantDef[] = [
  {
    label: 'columns={2} — default, last row of 1 centered',
    content: (
      <SymmetricGrid
        data={ITEMS}
        columns={2}
        keyExtractor={(item) => item.id}
        renderItem={(item) => <Tile name={item.name} />}
      />
    ),
  },
  {
    label: 'columns={3} — same 5 items, different grid',
    content: (
      <SymmetricGrid
        data={ITEMS}
        columns={3}
        keyExtractor={(item) => item.id}
        renderItem={(item) => <Tile name={item.name} />}
      />
    ),
  },
  {
    label: 'balanceLastRow={false} — incomplete row left-aligned instead of centered',
    content: (
      <SymmetricGrid
        data={ITEMS}
        columns={2}
        balanceLastRow={false}
        keyExtractor={(item) => item.id}
        renderItem={(item) => <Tile name={item.name} />}
      />
    ),
  },
];
return <VariantList variants={variants} />;
```

## Props

| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `data` | `T[]` | — | — |
| `renderItem` | `(item: T, index: number) => ReactElement<unknown, string \| JSXElementConstructor<any>>` | — | — |
| `keyExtractor` | `(item: T, index: number) => string` | — | — |
| `columns?` | `number` | 2 | Columnas por fila. |
| `gap?` | `number` | theme.tokens.spacing.md | Separación entre celdas, en ambos ejes. |
| `balanceLastRow?` | `boolean` | true | Última fila incompleta: centrada (simétrica) en vez de pegada a la izquierda con un hueco a la derecha. |
| `style?` | `StyleProp<ViewStyle>` | — | — |