TabProvider and useTab
Share controlled tab state with a custom tab bar
- Stable unknown
- Release candidate since 1.16.1-rc.3
- Development since 1.16.1-dev.2111+9796905
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.
Last updated on