TabBar

TabBar, a React Native component for iOS, Android and web: Bottom navigation, with an optional native variant.

Usage

import { useState } from 'react';
import { TabBar } from './components/ui/tabbar';

const ITEMS = [
  { value: 'home', label: 'Home', icon: 'home' as const },
  { value: 'orders', label: 'Orders', icon: 'shopping-bag' as const },
  { value: 'account', label: 'Account', icon: 'user' as const },
];

export default function Example() {
  const [tab, setTab] = useState('home');
  return <TabBar items={ITEMS} value={tab} onValueChange={setTab} />;
}

Props

Prop	Type	Default	Description
`value`	`string`
`label`	`string`	'Main'
`icon`	`FeatherName \| ImageSourcePropType`		A Feather icon name, or your own single-color artwork.
`nativeIcon`	`{ ios?: string; android?: string }`		Icon names for the platform tab bar: SF Symbols, Material icons.
`testID`	`string`
`items`	`readonly TabBarItem[]`
`value`	`string`
`defaultValue`	`string`
`onValueChange`	`(value: string) => void`
`label`	`string`	'Main'	Names the bar for screen readers.
`style`	`StyleProp<ViewStyle>`
`testID`	`string`
`native`	`boolean`		Renders the real platform tab bar, Liquid Glass on iOS 26+, when `@leoanimesh/ferrule-native` is available.
`bar`	`ReactNode`		The `TabBar`.
`children`	`ReactNode`