# NavigationBar

> Organism — orn-ui

> ⚠️ Requires <UIProvider>: This component (like every orn-ui component) must render inside a <UIProvider> ancestor, or it throws at runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Runs on Expo SDK 54, 55, 56 and 57, and on bare React Native >=0.81 with react >=19.1. No native modules — works in Expo Go, no prebuild.

## Installation

Install just this component (copies the source into your project, no npm dependency)
```bash
npx orn-ui add navigation-bar
```

Or install the whole package and import it
```tsx
pnpm add orn-ui
import { NavigationBar } from 'orn-ui/navigation-bar';
```

Depends on: core (theme + icons)

## Variants

### 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" />
```

## Full demo source

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

| Name | Type | Default | Description |
|---|---|---|---|
| `items` | `NavigationBarItem[]` | — | — |
| `activeKey` | `string` | — | — |
| `onChange` | `(key: string) => void` | — | — |
| `position?` | `'bottom' \| 'top'` | bottom | Edge of the screen the bar lives on. |
| `showLabels?` | `boolean` | true | — |
| `safeArea?` | `boolean` | true | Adds the safe area inset of the edge the bar lives on. |
| `style?` | `StyleProp<ViewStyle>` | — | — |