NavigationBar — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add navigation-bar

Or install the whole package and import it

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

Depends on:core (theme + icons)

Usage

when to use — The app's top-level sections, always visible. For a step flow inside one screen, Steps.
items — Each entry: `key`, `label`, `iconName`, optional `badge`.
activeKey / onChange — Controlled: the active tab lives in your navigator, not in the bar.
position — `bottom` by default; `top` for a segment-style bar under a header.

Demo clip not recorded yet — see MEDIA.md

Variants

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

Full demo source

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

Also accepts testID, forwarded to the root node. It exists for end-to-end tests (Maestro drives the app by the accessibility tree) and has no effect on how the component looks or behaves.

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