NavigationBar — componente React Native

Instalación

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

npx orn-ui add navigation-bar

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { NavigationBar } from 'orn-ui/navigation-bar';

Depende de:core (theme + icons)

Uso

cuándo usarla — Las secciones de nivel superior de la app, siempre visibles. Para un flujo por pasos dentro de una pantalla, Steps.
items — Cada ítem: `key`, `label`, `iconName`, `badge` opcional.
activeKey / onChange — Controlado: el tab activo vive en tu navegador, no en la barra.
position — `bottom` por defecto; `top` para una barra tipo segmento debajo de un header.

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

Variantes

A real tab bar — tap an item, the screen above it changes

<TabbedScreen />

Default — icon, label and a badge for unread alerts

<ControlledBar />

showLabels={false} — icons only, for a denser bar

<ControlledBar showLabels={false} />

position="top" — a top tab bar instead of bottom

<ControlledBar position="top" />

Código completo del demo

const variants: VariantDef[] = [
  {
    label: 'A real tab bar — tap an item, the screen above it changes',
    content: <TabbedScreen />,
  },
  {
    label: 'Default — icon, label and a badge for unread alerts',
    content: <ControlledBar />,
  },
  {
    label: 'showLabels={false} — icons only, for a denser bar',
    content: <ControlledBar showLabels={false} />,
  },
  {
    label: 'position="top" — a top tab bar instead of bottom',
    content: <ControlledBar position="top" />,
  },
];
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
`items`	`NavigationBarItem[]`	—	—
`activeKey`	`string`	—	—
`onChange`	`(key: string) => void`	—	—
`position?`	`'bottom' \| 'top'`	bottom	Borde de la pantalla donde vive la barra.
`showLabels?`	`boolean`	true	—
`safeArea?`	`boolean`	true	Agrega el inset de safe area del borde donde vive la barra.
`style?`	`StyleProp<ViewStyle>`	—	—