# TabProvider and useTab

Canonical page: https://docs.ovok.com/native-sdk/guide/components/tab/advanced-api

`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`.

```tsx
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.