SymmetricGrid — componente React Native

Instalación

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

npx orn-ui add symmetric-grid

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { SymmetricGrid } from 'orn-ui/symmetric-grid';

Depende de:core (theme + icons)

Uso

cuándo usarlo — Una grilla de cards o tiles donde una última fila corta, si no, se lee como un layout roto.
columns — `2` por defecto. El ancho de celda es `100 / columns`, así la fila sigue llenando parejo en cualquier pantalla.
balanceLastRow — Centra por defecto una última fila incompleta en vez de dejarla pegada a la izquierda con un hueco a la derecha.
gap — Aplica a ambos ejes. Sin definir, hereda el `spacing.md` del theme.

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

Variantes

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

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

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

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

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

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

Código completo del demo

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