Native

BottomTabBar

An app's root navigation (the promotion ladder): up to four primary tabs, the rest in a More sheet, with a 2px accent stripe over the active tab.

Source · API

Examples

Loading examples…

API

From COMPONENTS.md; setup for every native component is on React Native.

Component	Notes
`BottomTabBar`	Root navigation bar (promotion ladder). ≤4 primary tabs; overflow into a "More" `BottomSheet`. 2px accent top stripe on active tab.

Promotion-ladder replacement for the desk sidebar. ≤4 primary tabs visible; extras go into a "More" sheet.

import { BottomTabBar } from 'achery-ui/native'
import type { BottomTabItem } from 'achery-ui/native'

const tabs: BottomTabItem[] = [
  { value: 'today',    label: 'Today',    glyph: 'calendar' },
  { value: 'projects', label: 'Projects', glyph: 'folder' },
  { value: 'metrics',  label: 'Metrics',  glyph: 'chart-bar' },
  { value: 'inbox',    label: 'Inbox',    glyph: 'inbox' },
  { value: 'settings', label: 'Settings', glyph: 'settings' }, // overflows to More
]

<BottomTabBar
  items={tabs}
  value={activeTab}
  onValueChange={setActiveTab}
  safeAreaBottom={34}  // useSafeAreaInsets().bottom
/>

Prop	Type	Default
`items`	`BottomTabItem[]`	required
`value`	`string`	required
`onValueChange`	`(value: string) => void`	required
`safeAreaBottom`	`number`	`0`
`style`	`ViewStyle`	—

BottomTabItem:

Field	Type	Notes
`value`	`string`	Unique key
`label`	`string`	Shown beneath icon
`glyph`	`GlyphName`	From the Achery icon set
`hidden`	`boolean`	Exclude from bar entirely