TabBar

Bottom app navigation: a row of equal-width destinations, each an icon over a short label, with exactly one active. The mobile idiom (the iOS 26 floating tab bar / Material 3 navigation bar), rendered through the glass functional layer.
iOS and web share the iOS 26 anatomy: a capsule that floats above the content (which scrolls beneath it), inset from the sides, with the safe-area inset kept under the capsule, and the selected destination raised as a capsule covering its whole cell. Android docks the Material 3 bar full-bleed with its 56 by 32 icon pill. In glass mode the selection is a control-layer pane on the active destination: the cell capsule on iOS and web, the icon pill on Android. Solid mode retains the ordinary platform surface.
iOS
Android
Web
tsx
<TabBar
items={[
{ key: "home", label: "Home", icon: (active) => <Icon home size={22} primary={active} muted={!active} /> },
{ key: "search", label: "Search", icon: (active) => <Icon search size={22} primary={active} muted={!active} /> },
{ key: "profile", label: "Profile", icon: (active) => <Icon user size={22} primary={active} muted={!active} /> }
]}
/>

Props

Prop
Description
items
required
TabBarItem[]
—
active
string
The active item's key; omit for uncontrolled use.
defaultActive
string
Initial active key for uncontrolled use (defaults to the first item's key).
onSelect
(key: string) => void
Called with the pressed destination's key (both modes).
testID
string
E2E hook forwarded to the tablist row.
bottomInset
number
Safe-area bottom inset, e.g. `insets.bottom`. It is added BELOW the bar's own symmetric vertical padding (not in place of it), so the bar clears the home indicator without making the bottom margin heavier than the top. Defaults to 0 (web desktop / no inset).
style
StyleProp<ViewStyle>
Outer layout composition only. Use bottomInset for the safe area.

Do & Don’t

Tab Bar

Don’t
Home
Search
Profile
Tinting every destination primary erases the active indicator: nothing tells you which tab is current.
Do
Exactly one destination carries the primary tint on both its icon and label, over the raised cell capsule on iOS and web or Material 3's active-indicator pill on Android; the rest stay muted, so the current tab is always singular and unmistakable. On web the capsule is what lets a bar and a Sidebar in the same app shell mark the current destination the same way across the breakpoint that swaps them.
← Steps
Tabs →