feat: Custom tab header component
Added the option for providing a custom tab header component. It can be provided for the entire tab group, or just to a specific tab.
{/* All `TabScreen`s will use the custom header component */}
<Tabs
TabHeaderComponent={MyCustomHeader}
>
<TabScreen />
<TabScreen />
<TabScreen />
</Tabs>
{/* Only the first `TabScreen` will use the custom header component */}
<Tabs>
<TabScreen
TabHeaderComponent={MyCustomHeader}
/>
<TabScreen />
<TabScreen />
</Tabs>
Some changes were made so that the tabs can adapt to different sized custom headers, but the end result for the default header style is unchanged.
| Mode | Without custom header | With custom header |
|---|---|---|
| Fixed | ||
| Scrollable |
And here's a more realistic example of the way this might be used (and my motivation for this PR in the first place):
TabHeaderComponent receives the same props as TabsHeaderItem. Note that does make TabsHeaderItem props part of the public API, even though it is not exported. Maybe it would be good to make that official by exporting it? Or at least exporting type TabHeaderComponent = typeof TabsHeaderItem?
any update on this?