Skip to content

Conversation

rafabulsing
Copy link
Contributor

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 Screenshot_1746016976 Screenshot_1746016964
Scrollable Screenshot_1746017008 image

And here's a more realistic example of the way this might be used (and my motivation for this PR in the first place):

image

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?

@saulsharma
Copy link

any update on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants