Component

Tab bar

A floating, frosted-glass bar of icon-and-label tabs anchored to the bottom of the screen, with badge support per tab.

The primitive

tab bar.tsx

<NativeTabBar
  items={[
    { key: "home", label: "Home", icon: <HouseLine size={24} /> },
    { key: "activity", label: "Activity", icon: <ArrowsLeftRight size={24} /> },
    { key: "cards", label: "Cards", icon: <CreditCard size={24} />, badge: 2 },
    { key: "profile", label: "Profile", icon: <User size={24} /> },
  ]}
  activeKey={activeKey}
  onSelect={setActiveKey}
/>

Example

Anchored to the bottom of the home screen, floating over whatever content scrolls beneath it.

tab-bar-example.tsx

<div className="relative">
  <HomeScreenContent />
  <NativeTabBar items={tabs} activeKey={activeKey} onSelect={setActiveKey} />
</div>

Capabilities

Prop	Type	Description
itemsrequired	NativeTabBarItem[]	—
activeKeyrequired	string	—
onSelect	(key: string) => void	Fires before navigation — e.g. haptics (`href` present) or imperative nav (`href` omitted).
linkScroll	boolean	Passed to `<Link>` when items use `href`. Default false — softer tab-shell transitions.
linkReplace	boolean	Default true — tab hops swap the current history entry instead of stacking.
className	string	—