# NavigationBar

> Organism — orn-ui

> ⚠️ Requiere <UIProvider>: Este componente (como todos los de orn-ui) debe renderizarse dentro de un ancestro <UIProvider>, o lanza un error en runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Corre en Expo SDK 54, 55, 56 y 57, y en React Native puro >=0.81 con react >=19.1. Sin módulos nativos — funciona en Expo Go, sin prebuild.

## Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)
```bash
npx orn-ui add navigation-bar
```

O instala el paquete completo e impórtalo
```tsx
pnpm add orn-ui
import { NavigationBar } from 'orn-ui/navigation-bar';
```

Depende de: core (theme + icons)

## Variantes

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

```tsx
<TabbedScreen />
```

### Default — icon, label and a badge for unread alerts

```tsx
<ControlledBar />
```

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

```tsx
<ControlledBar showLabels={false} />
```

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

```tsx
<ControlledBar position="top" />
```

## Código completo del demo

```tsx
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

| 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>` | — | — |