ThemeToggle — componente React Native

Instalación

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

npx orn-ui add theme-toggle

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { ThemeToggle } from 'orn-ui/theme-toggle';

Depende de:core (theme + icons)segmented-control

Uso

cuándo usarlo — Dejar elegir entre claro, oscuro o sistema — normalmente en ajustes.
labels — Reemplaza los tres textos incluidos cuando el producto los nombra distinto.

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

Variantes

Default labels

<ThemeToggle />

Custom labels

<ThemeToggle labels={{ system: 'System', light: 'Day', dark: 'Night' }} />

Código completo del demo

const variants: VariantDef[] = [
  { label: 'Default labels', content: <ThemeToggle /> },
  { label: 'Custom labels', content: <ThemeToggle labels={{ system: 'System', light: 'Day', dark: 'Night' }} /> },
];
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
`style?`	`StyleProp<ViewStyle>`	—	—
`labels?`	`Partial<Record<ThemeMode, string>>`	—	—