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.

Standalone

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 (`to` present) or imperative nav (`to` omitted).
linkScroll	boolean	Passed to `<Link>` when items use `to`. Default false - softer tab-shell transitions.
linkReplace	boolean	Default true - tab hops swap the current history entry instead of stacking.
className	string	-