Stepper — componente React Native

Instalación

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

npx orn-ui add stepper

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { Stepper } from 'orn-ui/stepper';

Depende de:core (theme + icons)

Uso

cuándo usarlo — Cantidades numéricas chicas que se ajustan a mano: unidades, porciones, ítems.
value / onChangeText — El valor es un string: el campo sigue siendo editable y el estado vacío no se convierte en NaN.
size — `md` por defecto, `sm` dentro de filas densas como la línea de un carrito.

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

Variantes

size="md"

<Stepper
  value={qty}
  onChangeText={setQty}
  onIncrement={() => setQty((q) => String(Number(q) + 1))}
  onDecrement={() => setQty((q) => String(Math.max(0, Number(q) - 1)))}
/>

size="sm"

<Stepper
  value={qtySmall}
  onChangeText={setQtySmall}
  onIncrement={() => setQtySmall((q) => String(Number(q) + 1))}
  onDecrement={() => setQtySmall((q) => String(Math.max(0, Number(q) - 1)))}
  size="sm"
/>

Código completo del demo

const variants: VariantDef[] = [
  {
    label: 'size="md"',
    content: (
      <Stepper
        value={qty}
        onChangeText={setQty}
        onIncrement={() => setQty((q) => String(Number(q) + 1))}
        onDecrement={() => setQty((q) => String(Math.max(0, Number(q) - 1)))}
      />
    ),
  },
  {
    label: 'size="sm"',
    content: (
      <Stepper
        value={qtySmall}
        onChangeText={setQtySmall}
        onIncrement={() => setQtySmall((q) => String(Number(q) + 1))}
        onDecrement={() => setQtySmall((q) => String(Math.max(0, Number(q) - 1)))}
        size="sm"
      />
    ),
  },
];
return <VariantList variants={variants} />;

Props

Además acepta testID, que se reenvía al nodo raíz. Existe para los tests end-to-end (Maestro maneja la app por el árbol de accesibilidad) y no cambia en nada cómo se ve ni cómo se comporta el componente.

Nombre	Tipo	Por defecto	Descripción
`value`	`string`	—	—
`onChangeText`	`(text: string) => void`	—	—
`onIncrement`	`() => void`	—	—
`onDecrement`	`() => void`	—	—
`size?`	`'sm' \| 'md' \| 'lg'`	md	Escala del control: alto, botones, ícono y tipografía.
`block?`	`boolean`	false	Ocupa todo el ancho disponible y el input absorbe el espacio extra.
`editable?`	`boolean`	true	En false el valor solo se cambia con los botones: el teclado no se abre y el campo pierde el fondo que lo anuncia como editable.
`min?`	`number`	—	Mínimo permitido. Deshabilita "-" al alcanzarlo y acota lo tipeado al salir del campo. Los negativos se aceptan solo si `min` es negativo.
`max?`	`number`	—	Máximo permitido. Deshabilita "+" al alcanzarlo y acota lo tipeado.
`allowDecimals?`	`boolean`	false	Acepta separador decimal, normalizando la coma a punto.
`style?`	`StyleProp<ViewStyle>`	—	—
`incrementAccessibilityLabel?`	`string`	Increment	—
`decrementAccessibilityLabel?`	`string`	Decrement	—