TabProvider and useTab

TabProvider exposes a controlled value and onChange pair through TabContext. useTab reads that pair from a descendant. Use this API when you need to build a custom tab bar; the standard Tab already composes the provider and Tab.Item.

import { TabProvider, useTab } from "@ovok/native/tab";

function CustomTabButton({ value, children }) {
  const tabs = useTab();
  return (
    <Button onPress={() => tabs.onChange(value)}>
      {tabs.value === value ? `• ${children}` : children}
    </Button>
  );
}

<TabProvider value={activeTab} onChange={setActiveTab}>
  <CustomTabButton value="overview">Overview</CustomTabButton>
</TabProvider>

useTab throws outside TabProvider. TabContext and TabContextType are exported for advanced integrations; prefer the hook for component code.