Tabs in StickyHeaderScrollview

[msl2000]

Feature request

Hi, I am trying to implement tabs in the StickyHeaderScrollview component and found the renderTabs prop. The only thing I cannot find is to how to actually implement the tabs themselves in the component. is there any documentation I can find this on?

I had a look at the TabbedHeaderPager and found the Pager component there but is not accessible through normal means.

Any help would be appreciated.

[mateusz1913]

👋 @msl2000

We have a section about customization of tabbed header, but if you want to do it with "from scratch" ⬇️ :

StickyHeaderScrollView is a primitive component which can be used to build custom sticky header experience. If you want to do custom tabs layout, you have to pass your custom tab bar into renderTabs and custom tab pager as a children

const CustomTabbedHeaderPager = () => {
  return (
    <StickyHeaderScrollView
      renderHeader={() => {
        // Render your custom header
        return <CustomHeader />
      }}
      renderTabs={() => {
        // render your custom tab bar
        return <CustomTabBar />
      }}
    >
      {/** pass your custom tab pager layout here */}
      <CustomTabPager />
    </StickyHeaderScrollView>
  )
}

Here we have example of such custom header layout with StickyHeaderScrollView (docs section here), where we customize renderHeader and pass custom content as children. In your case, you would have to additionally pass your custom tab bar to renderTabs and pass custom pager as a StickyHeaderScrollView's children

[msl2000]

Thanks for the response! I think I got the whole part with creating my own tabs in the StickyHeaderScrollView.

My main issue at the moment is implementing the CustomTabPager component that you had in the above snippet. I can't use react navigation or carousels because of conflicting scroll heights. I noticed in the source code there is a component Pager but it isn't accessible through imports. Would you happen to have an example Custom Pager available?

[mateusz1913]

Your custom pager should basically be a horizontal ScrollView/FlatList, which accepts a ref to make programmatical scrolling between pages available

You can start by "copy-pasting" Pager implementation into your project and removing all not-available imports - at the end you will have Animated.ScrollView with a ref, and the children should be array of child pages

On the other hand, you can also try to check if react-native-pager-view will work here (it also accepts ref for programmatical scroll and it already handles pages layout on the native side)