Tab Bar

Basic

This is the basic example of the TabBar component. It allows you to display a horizontal bar with tabs and switch between them. The appearance may vary based on the color mode (light or dark).

Shop

Search

Cart

Wishlist

Account

const EcommerceComponent = () => {
  const [activeTab, setActiveTab] = useState<number>(0);

  const ecommerceTabs = [
    { label: "Shop", icon: Home },
    { label: "Search", icon: Search },
    { label: "Cart", icon: ShoppingCart },
    { label: "Wishlist", icon: Heart },
    { label: "Account", icon: User },
  ];

  return (
    <TabBar>
      {ecommerceTabs.map((tab, index) => (
        <Tab
          key={`ecommerce-${index}`}
          onPress={() => setActiveTab(index)}
          isFocused={activeTab === index}
        >
          <Tab.Icon>
            <tab.icon />
          </Tab.Icon>
          <Tab.Label>{tab.label}</Tab.Label>
        </Tab>
      ))}
    </TabBar>
  );
};

Icon Only

This is an example of the TabBar component with icon-only tabs. Each tab displays only an icon. You can switch between tabs by tapping on them. The appearance may vary based on the color mode (light or dark).

const SocialMediaComponent = () => {
  const [activeTab, setActiveTab] = useState<number>(0);

  const socialTabs = [
    { label: "Feed", icon: Home },
    { label: "Explore", icon: Compass },
    { label: "Messages", icon: MessageCircle },
    { label: "Notifications", icon: Bell },
    { label: "Profile", icon: User },
  ];

  return (
    <TabBar>
      {socialTabs.map((tab, index) => (
        <Tab
          key={`social-${index}`}
          onPress={() => setActiveTab(index)}
          isFocused={activeTab === index}
        >
          <Tab.Icon>
            <tab.icon />
          </Tab.Icon>
        </Tab>
      ))}
    </TabBar>
  );
};

Label Only

This is an example of the TabBar component with label-only tabs. Each tab displays only a label. You can switch between tabs by tapping on them. The appearance may vary based on the color mode (light or dark).

Overview

Wallet

Cards

Settings

const FinanceAppComponent = () => {
  const [activeTab, setActiveTab] = useState<number>(0);

  const financeTabs = [
    { label: "Overview", icon: BarChart3 },
    { label: "Wallet", icon: Wallet },
    { label: "Cards", icon: ShoppingCart },
    { label: "Settings", icon: Settings },
  ];

  return (
    <TabBar>
      {financeTabs.map((tab, index) => (
        <Tab
          key={`finance-${index}`}
          onPress={() => setActiveTab(index)}
          isFocused={activeTab === index}
        >
          <Tab.Label>{tab.label}</Tab.Label>
        </Tab>
      ))}
    </TabBar>
  );
};

Long Text On Each Tab

This is an example of the TabBar component with long text on each tab. Each tab displays a long label text. You can switch between tabs by tapping on them. The appearance may vary based on the color mode (light or dark).

Breaking News

Technology

Entertainment

Sports Today

const NewsReaderComponent = () => {
  const [activeTab, setActiveTab] = useState<number>(0);

  const newsTabs = [
    { label: "Breaking News", icon: Bell },
    { label: "Technology", icon: Settings },
    { label: "Entertainment", icon: Music },
    { label: "Sports Today", icon: Heart },
  ];

  return (
    <TabBar _container={{ width: "$full" }}>
      {newsTabs.map((tab, index) => (
        <Tab
          key={`news-${index}`}
          onPress={() => setActiveTab(index)}
          isFocused={activeTab === index}
        >
          <Tab.Label>{tab.label}</Tab.Label>
        </Tab>
      ))}
    </TabBar>
  );
};

Custom Tab Icon Size

This is an example of the TabBar component with custom tab icon size. Each tab displays a label and an icon with a custom size. You can switch between tabs by tapping on them. The appearance may vary based on the color mode (light or dark).

Library

Browse

Radio

Search

const MediaPlayerComponent = () => {
  const [activeTab, setActiveTab] = useState<number>(0);

  const mediaTabs = [
    { label: "Library", icon: BookOpen },
    { label: "Browse", icon: Compass },
    { label: "Radio", icon: Music },
    { label: "Search", icon: Search },
  ];

  return (
    <TabBar>
      {mediaTabs.map((tab, index) => (
        <Tab
          key={`media-${index}`}
          iconSize={32}
          onPress={() => setActiveTab(index)}
          isFocused={activeTab === index}
        >
          <Tab.Icon>
            <tab.icon />
          </Tab.Icon>
          <Tab.Label>{tab.label}</Tab.Label>
        </Tab>
      ))}
    </TabBar>
  );
};

Override Color Mode

This is an example of the TabBar component with an overridden color mode. The color mode is determined by the colorMode prop, allowing you to switch between light and dark modes. Each tab displays a label and an icon. You can switch between tabs by tapping on them.

Analytics

Reports

Alerts

Settings

const DashboardComponent = () => {
  const [activeTab, setActiveTab] = useState<number>(0);

  const dashboardTabs = [
    { label: "Analytics", icon: BarChart3 },
    { label: "Reports", icon: BookOpen },
    { label: "Alerts", icon: Bell },
    { label: "Settings", icon: Settings },
  ];

  return (
    <TabBar colorMode="dark">
      {dashboardTabs.map((tab, index) => (
        <Tab
          key={`dashboard-${index}`}
          onPress={() => setActiveTab(index)}
          isFocused={activeTab === index}
        >
          <Tab.Icon>
            <tab.icon />
          </Tab.Icon>
          <Tab.Label>{tab.label}</Tab.Label>
        </Tab>
      ))}
    </TabBar>
  );
};

Override Accent Color on TabBar

This is an example of the TabBar component with an overridden accent color. The accent color is set to 'red'. You can switch between light and dark modes using the colorMode prop. Each tab displays a label and an icon. You can switch between tabs by tapping on them.

Workouts

Progress

Nutrition

Profile

const FitnessAppComponent = () => {
  const [activeTab, setActiveTab] = useState<number>(0);

  const fitnessTabs = [
    { label: "Workouts", icon: Heart },
    { label: "Progress", icon: BarChart3 },
    { label: "Nutrition", icon: BookOpen },
    { label: "Profile", icon: User },
  ];

  return (
    <TabBar accentColor="emerald">
      {fitnessTabs.map((tab, index) => (
        <Tab
          key={`fitness-${index}`}
          onPress={() => setActiveTab(index)}
          isFocused={activeTab === index}
        >
          <Tab.Icon>
            <tab.icon />
          </Tab.Icon>
          <Tab.Label>{tab.label}</Tab.Label>
        </Tab>
      ))}
    </TabBar>
  );
};

Override Accent Color on Tab

This is an example of the TabBar component with overridden accent colors on individual tabs. Each tab can have its own accent color specified through the accentColor prop. You can switch between light and dark modes using the colorMode prop. Each tab displays a label and an icon. You can switch between tabs by tapping on them.

Gallery

Music

Reading

Saved

const CreativeStudioComponent = () => {
  const [activeTab, setActiveTab] = useState<number>(0);

  const creativeTabs = [
    { label: "Gallery", icon: Camera, accentColor: "pink" },
    { label: "Music", icon: Music, accentColor: "violet" },
    { label: "Reading", icon: BookOpen, accentColor: "amber" },
    { label: "Saved", icon: Bookmark, accentColor: "emerald" },
  ];

  return (
    <TabBar>
      {creativeTabs.map((tab, index) => (
        <Tab
          key={`creative-${index}`}
          accentColor={tab.accentColor}
          onPress={() => setActiveTab(index)}
          isFocused={activeTab === index}
        >
          <Tab.Icon>
            <tab.icon />
          </Tab.Icon>
          <Tab.Label>{tab.label}</Tab.Label>
        </Tab>
      ))}
    </TabBar>
  );
};