OptionCard — componente React Native

Instalación

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

npx orn-ui add option-card

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { OptionCard } from 'orn-ui/option-card';

Depende de:core (theme + icons)pressable-scale

Uso

cuándo usarlo — Elegir entre pocas opciones, cada una con un ícono — un método de pago, un tipo de envío.
layout — `horizontal` para una lista apilada; `vertical` para una grilla de dos o tres columnas.
isSelected / onPress — Selección controlada: el padre decide cuál está activa.

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

Variantes

layout="horizontal"

<View style={{ flexDirection: 'row', gap: 8 }}>
  <OptionCard label="Cash" iconName="check" isSelected={selected === 'cash'} onPress={() => setSelected('cash')} />
  <OptionCard label="Card" iconName="info" isSelected={selected === 'card'} onPress={() => setSelected('card')} />
</View>

layout="vertical"

<View style={{ flexDirection: 'row', gap: 8 }}>
  <OptionCard
    label="Cash"
    iconName="check"
    layout="vertical"
    isSelected={selectedVertical === 'cash'}
    onPress={() => setSelectedVertical('cash')}
  />
  <OptionCard
    label="Card"
    iconName="info"
    layout="vertical"
    isSelected={selectedVertical === 'card'}
    onPress={() => setSelectedVertical('card')}
  />
  <OptionCard
    label="Transfer"
    iconName="search"
    layout="vertical"
    isSelected={selectedVertical === 'transfer'}
    onPress={() => setSelectedVertical('transfer')}
  />
</View>

Código completo del demo

const variants: VariantDef[] = [
  {
    label: 'layout="horizontal"',
    content: (
      <View style={{ flexDirection: 'row', gap: 8 }}>
        <OptionCard label="Cash" iconName="check" isSelected={selected === 'cash'} onPress={() => setSelected('cash')} />
        <OptionCard label="Card" iconName="info" isSelected={selected === 'card'} onPress={() => setSelected('card')} />
      </View>
    ),
  },
  {
    label: 'layout="vertical"',
    content: (
      <View style={{ flexDirection: 'row', gap: 8 }}>
        <OptionCard
          label="Cash"
          iconName="check"
          layout="vertical"
          isSelected={selectedVertical === 'cash'}
          onPress={() => setSelectedVertical('cash')}
        />
        <OptionCard
          label="Card"
          iconName="info"
          layout="vertical"
          isSelected={selectedVertical === 'card'}
          onPress={() => setSelectedVertical('card')}
        />
        <OptionCard
          label="Transfer"
          iconName="search"
          layout="vertical"
          isSelected={selectedVertical === 'transfer'}
          onPress={() => setSelectedVertical('transfer')}
        />
      </View>
    ),
  },
];
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
`label`	`string`	—	—
`description?`	`string`	—	Línea secundaria: el detalle que decide la elección ("llega en 3 días").
`iconName?`	`IconName`	—	—
`isSelected`	`boolean`	—	—
`onPress`	`() => void`	—	—
`disabled?`	`boolean`	false	—
`layout?`	`'vertical' \| 'horizontal'`	horizontal	'vertical': ícono arriba, texto centrado abajo. 'horizontal': en fila.
`style?`	`StyleProp<ViewStyle>`	—	—