SegmentedControl — componente React Native

Instalación

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

npx orn-ui add segmented-control

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { SegmentedControl } from 'orn-ui/segmented-control';

Depende de:core (theme + icons)

Uso

cuándo usarlo — Pocas opciones, todas visibles a la vez, siempre una seleccionada — un switch de vista o rango. Para una lista más larga u opcional, Select.
options / value / onChange — Controlado y genérico, mismo patrón que Select — el valor conserva su tipo.
disabled — Por opción o para todo el control.

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

Variantes

Switch the range of a chart — three options

<View style={{ gap: 12 }}>
  <SegmentedControl options={RANGES} value={range} onChange={setRange} />
  <Body>Showing the last {range}.</Body>
</View>

Two options — reads like an on/off switch

<SegmentedControl
  options={[
    { value: 'left', label: 'Left' },
    { value: 'right', label: 'Right' },
  ]}
  value={side}
  onChange={setSide}
/>

One option disabled — e.g. a plan not available yet

<SegmentedControl
  options={[...RANGES.slice(0, 2), { value: 'month', label: 'Month', disabled: true }]}
  value={range}
  onChange={setRange}
/>

The whole control disabled — while its data loads

<SegmentedControl options={RANGES} value={range} onChange={setRange} disabled />

Código completo del demo

const variants: VariantDef[] = [
  {
    label: 'Switch the range of a chart — three options',
    content: (
      <View style={{ gap: 12 }}>
        <SegmentedControl options={RANGES} value={range} onChange={setRange} />
        <Body>Showing the last {range}.</Body>
      </View>
    ),
  },
  {
    label: 'Two options — reads like an on/off switch',
    content: (
      <SegmentedControl
        options={[
          { value: 'left', label: 'Left' },
          { value: 'right', label: 'Right' },
        ]}
        value={side}
        onChange={setSide}
      />
    ),
  },
  {
    label: 'One option disabled — e.g. a plan not available yet',
    content: (
      <SegmentedControl
        options={[...RANGES.slice(0, 2), { value: 'month', label: 'Month', disabled: true }]}
        value={range}
        onChange={setRange}
      />
    ),
  },
  {
    label: 'The whole control disabled — while its data loads',
    content: <SegmentedControl options={RANGES} value={range} onChange={setRange} disabled />,
  },
];
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
`options`	`SegmentedControlOption<T>[]`	—	—
`value`	`string`	—	—
`onChange`	`(value: T) => void`	—	—
`disabled?`	`boolean`	—	—
`style?`	`StyleProp<ViewStyle>`	—	—