Tab bar

Usage

The kit tab bar: opaque tints, label, and an active dot under the label so selection is not colour-only. TabBarItem is exported for custom bars.

API

<Tabs tabBar={(p) => <TabBar {...p} />}><Tabs.Screen options={{ title, tabBarIcon: tabIcon(HouseIcon) }} /></Tabs>

Get it

import { TabBar, TabBarItem, tabIcon } from '@/components/kit/tab-bar';

Details

Exports

TabBar, TabBarItem, tabIcon

Source

apps/mobile/components/kit/tab-bar.tsx

Packages

lucide-react-native@^1.21.0, react-native-safe-area-context@~5.7.0

Installs with

@kit-native/lib-haptics, @kit-native/lib-palette-context, @kit-native/lib-utils, @kit-native/text

Also searched as

bottom tabs, tab bar, active dot, navigation bar, tab icon

Registry JSON

/r/native/tab-bar.json