BottomTabBar

Beta

Mobile-first bottom navigation bar with configurable tab items.

Installation

npm install @xaui/native

Import

import { BottomTabBar, BottomTabBarItem } from '@xaui/native/bottom-tab-bar'

Basic Usage

Minimal example showing the component with its default configuration.

import { BottomTabBar } from '@xaui/native/bottom-tab-bar'

export function Example() {
  return <BottomTabBar />
}

Basic

Stacked variant with icons and labels.

import { useState } from 'react'
import { BottomTabBar, BottomTabBarItem } from '@xaui/native/bottom-tab-bar'
import { HomeIcon } from '@xaui/icons/home'
import { SearchIcon } from '@xaui/icons/search'
import { PersonIcon } from '@xaui/icons/person'

export function BasicExample() {
  const [selected, setSelected] = useState('home')

  return (
    <BottomTabBar selectedKey={selected} onSelectionChange={setSelected}>
      <BottomTabBarItem itemKey="home" label="Home" icon={<HomeIcon />} />
      <BottomTabBarItem itemKey="search" label="Search" icon={<SearchIcon />} />
      <BottomTabBarItem itemKey="profile" label="Profile" icon={<PersonIcon />} />
    </BottomTabBar>
  )
}

Variants

Three layout variants: stacked, inline, and icon-only.

import { useState } from 'react'
import { BottomTabBar, BottomTabBarItem } from '@xaui/native/bottom-tab-bar'
import { Column } from '@xaui/native/view'
import { HomeIcon } from '@xaui/icons/home'
import { SearchIcon } from '@xaui/icons/search'
import { PersonIcon } from '@xaui/icons/person'
import { BookmarkIcon } from '@xaui/icons/bookmark'

const items = [
  { key: 'home', label: 'Home', icon: <HomeIcon /> },
  { key: 'search', label: 'Search', icon: <SearchIcon /> },
  { key: 'saved', label: 'Saved', icon: <BookmarkIcon /> },
  { key: 'profile', label: 'Profile', icon: <PersonIcon /> },
]

export function VariantsExample() {
  const [selected, setSelected] = useState('home')

  return (
    <Column gap={16}>
      <BottomTabBar variant="stacked" selectedKey={selected} onSelectionChange={setSelected}>
        {items.map(i => (
          <BottomTabBarItem key={i.key} itemKey={i.key} label={i.label} icon={i.icon} />
        ))}
      </BottomTabBar>

      <BottomTabBar variant="inline" selectedKey={selected} onSelectionChange={setSelected}>
        {items.map(i => (
          <BottomTabBarItem key={i.key} itemKey={i.key} label={i.label} icon={i.icon} />
        ))}
      </BottomTabBar>

      <BottomTabBar variant="icon-only" selectedKey={selected} onSelectionChange={setSelected}>
        {items.map(i => (
          <BottomTabBarItem key={i.key} itemKey={i.key} label={i.label} icon={i.icon} />
        ))}
      </BottomTabBar>
    </Column>
  )
}

Sizes

Three sizes control bar height and icon/label scaling.

import { useState } from 'react'
import { BottomTabBar, BottomTabBarItem } from '@xaui/native/bottom-tab-bar'
import { Column } from '@xaui/native/view'
import { HomeIcon } from '@xaui/icons/home'
import { SearchIcon } from '@xaui/icons/search'
import { PersonIcon } from '@xaui/icons/person'

export function SizesExample() {
  const [selected, setSelected] = useState('home')

  return (
    <Column gap={16}>
      {(['sm', 'md', 'lg'] as const).map(size => (
        <BottomTabBar
          key={size}
          size={size}
          selectedKey={selected}
          onSelectionChange={setSelected}
        >
          <BottomTabBarItem itemKey="home" label="Home" icon={<HomeIcon />} />
          <BottomTabBarItem itemKey="search" label="Search" icon={<SearchIcon />} />
          <BottomTabBarItem itemKey="profile" label="Profile" icon={<PersonIcon />} />
        </BottomTabBar>
      ))}
    </Column>
  )
}

Theme Colors

Apply a design system color to the active indicator.

import { useState } from 'react'
import { BottomTabBar, BottomTabBarItem } from '@xaui/native/bottom-tab-bar'
import { Column } from '@xaui/native/view'
import { HomeIcon } from '@xaui/icons/home'
import { SearchIcon } from '@xaui/icons/search'
import { PersonIcon } from '@xaui/icons/person'

export function ThemeColorsExample() {
  const [selected, setSelected] = useState('home')

  return (
    <Column gap={16}>
      {(['primary', 'secondary', 'success', 'danger'] as const).map(color => (
        <BottomTabBar
          key={color}
          themeColor={color}
          selectedKey={selected}
          onSelectionChange={setSelected}
        >
          <BottomTabBarItem itemKey="home" label="Home" icon={<HomeIcon />} />
          <BottomTabBarItem itemKey="search" label="Search" icon={<SearchIcon />} />
          <BottomTabBarItem itemKey="profile" label="Profile" icon={<PersonIcon />} />
        </BottomTabBar>
      ))}
    </Column>
  )
}

Badge on Item

Attach a Badge component to any tab item.

import { useState } from 'react'
import { BottomTabBar, BottomTabBarItem } from '@xaui/native/bottom-tab-bar'
import { Badge } from '@xaui/native/badge'
import { HomeIcon } from '@xaui/icons/home'
import { NotificationsIcon } from '@xaui/icons/notifications'
import { PersonIcon } from '@xaui/icons/person'

export function BadgeExample() {
  const [selected, setSelected] = useState('home')

  return (
    <BottomTabBar selectedKey={selected} onSelectionChange={setSelected}>
      <BottomTabBarItem itemKey="home" label="Home" icon={<HomeIcon />} />
      <BottomTabBarItem
        itemKey="notifications"
        label="Alerts"
        icon={<NotificationsIcon />}
        badge={<Badge content={5} size="sm" />}
      />
      <BottomTabBarItem itemKey="profile" label="Profile" icon={<PersonIcon />} />
    </BottomTabBar>
  )
}

Active Icon

Swap to a filled icon variant when a tab is selected.

import { useState } from 'react'
import { BottomTabBar, BottomTabBarItem } from '@xaui/native/bottom-tab-bar'
import { HomeIcon } from '@xaui/icons/home'
import { HomeFilledIcon } from '@xaui/icons/home-filled'
import { SearchIcon } from '@xaui/icons/search'
import { PersonIcon } from '@xaui/icons/person'
import { PersonFilledIcon } from '@xaui/icons/person-filled'

export function ActiveIconExample() {
  const [selected, setSelected] = useState('home')

  return (
    <BottomTabBar selectedKey={selected} onSelectionChange={setSelected}>
      <BottomTabBarItem
        itemKey="home"
        label="Home"
        icon={<HomeIcon />}
        activeIcon={<HomeFilledIcon />}
      />
      <BottomTabBarItem itemKey="search" label="Search" icon={<SearchIcon />} />
      <BottomTabBarItem
        itemKey="profile"
        label="Profile"
        icon={<PersonIcon />}
        activeIcon={<PersonFilledIcon />}
      />
    </BottomTabBar>
  )
}

Expo Router Integration

Pass expo-router tab props directly to replace the default tab bar.

import { Tabs } from 'expo-router'
import { BottomTabBar } from '@xaui/native/bottom-tab-bar'
import { HomeIcon } from '@xaui/icons/home'
import { SearchIcon } from '@xaui/icons/search'
import { PersonIcon } from '@xaui/icons/person'

export default function TabLayout() {
  return (
    <Tabs
      tabBar={props => <BottomTabBar {...props} themeColor="primary" />}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, size }) => <HomeIcon color={color} size={size} />,
        }}
      />
      <Tabs.Screen
        name="search"
        options={{
          title: 'Search',
          tabBarIcon: ({ color, size }) => <SearchIcon color={color} size={size} />,
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color, size }) => <PersonIcon color={color} size={size} />,
        }}
      />
    </Tabs>
  )
}