Skip to content

Custom tab bar

Replace the default tab bar — or pin content that survives collapse.

renderTabBar={...}

Pass renderTabBar for a fully custom bar — pill buttons, a progress indicator, anything. The tab bar stays pinned while the header collapses, so it’s also the right home for content that must remain visible (a reading-progress bar, a search field).

DefaultTabBar styling

When you don’t pass renderTabBar, DefaultTabBar is used. It’s accessible (tablist / tab roles, selected state) and stylable: scrollable (default true; false = equal-width tabs), backgroundColor, activeColor, inactiveColor, indicatorColor, style, tabStyle, labelStyle, indicatorStyle, and renderLabel.

Reference

renderTabBar (props: TabBarRenderProps) => ReactNode

Render your own tab bar. Default: DefaultTabBar.