Skip to main content

Tabs

Use Tab for a small set of sibling views that share one screen context. The component is controlled: keep the active tab in application state and use onChange to switch the displayed content.

import { Tab } from "@ovok/native/tab";

<Tab value={activeTab} onChange={setActiveTab}>
  <Tab.Item value="overview">Overview</Tab.Item>
  <Tab.Item value="history">History</Tab.Item>
</Tab>

Render the selected panel from the same activeTab value. Use TabProvider and useTab when a custom tab bar needs the shared value and callback without the default Tab rendering. For top-level app navigation, use your router's navigation model rather than using tabs as a substitute for routes.

References​