TabBar

Switches between the top-level places of an app.

When to use it

• Touch clients only: React Native and Compose.
• Use it for three to five places.
• It is a capsule that floats over the bottom of the screen, so give it a margin at the sides and below, inside the safe area.
• The selected tab sits in a pill of its own, so the selection does not depend on color.

Example

import { TabBar } from "@acme/ui-native";

<TabBar
  items={[
    { key: "home", label: "Home", icon: (color) => <HomeIcon color={color} /> },
    { key: "search", label: "Search", icon: (color) => <SearchIcon color={color} /> },
  ]}
  value={tab}
  onChange={setTab}
/>

Options

The React Native component’s props. Compose takes the same options under its own naming conventions.

Prop	Type	Notes
items	readonly { key: Key; label: string; icon: (color: string) => ReactNode }[]	Required. The icon is drawn above the label, 24 points square.
value	Key	Required.
onChange	(key: Key) => void	Required.

Source

Platform	File
React Native	packages/ui-native/src/TabBar.tsx
Compose Multiplatform	kotlin/ui/src/commonMain/kotlin/acme/ui/TabBar.kt