How to render Tabs in StickyHeaderScrollView along with scrollable header.

[yadavmurari111]

Feature request

I am looking at React Native Sticky Parallax Header library and I'm a bit confused about it.

I want to have a 'Tabbed Header Pager', but with a custom Header, which seems to be not possible through inbuilt options. I tried creating a view on top of the tabs and animating it myself, but still the 4 tabs ( each containing flatlist) are not performant.

Custom Sticky Header looks good to my requirements, But I am not sure how to get the tabs working on it. I see renderTabs method , but the tabs aren't visible. No props for supplying the tabs[]

How to achieve the 'Tabbed Header Pager' with a custom header?

[mateusz1913]

👋 @yadavmurari111

To check how to use renderTabs prop, you can go to dedicated docs section, or go straight to example repo

[yadavmurari111]

@mateusz1913

We were using 0.4x version of sticky-parallax-header to implement a profile page. ( Adding screen capture here )

We used StickyParallaxHeader , as in below code

<StickyParallaxHeader
bounces
snapToEdge
tabs={tabs}
snapValue={5}
snapStopThreshold={5}
snapStartThreshold={4}
foreground={renderHeader()}
horizontalScrollBounces
rememberTabScrollPosition
parallaxHeight={headerHeight}
onChangeTab={tab => setCurrentTabIndex(tab.i)}
scrollEvent={e => {
setScrollHeight(e.nativeEvent.contentOffset.y);
setFlatlistHeight(e.nativeEvent.contentSize.height);
}}
/>

The issue with this implementation was we were facing a threashold issue while scrolling through the flatlist we are rendering inside the tab body. So to resolve this, we upgraded to 1.x of sticky-parallax-header

Now, while upgrading it was confusing that which combination we will use to achieve the same screen / view what we wrere having in old one. We were achieving the blow things with 0.4x

1. A custom header ( for showing user profile , with some buttons and clickable items )
2. This header was scrollable ( on scroll from header will work )
3. The tabs under the header were collapsible while scrolling to top and the tabs are gesture controlled ( swipe to switch tabs )

Now, after upgrading to 1.x

we need TabbedHeaderPager kind of implementation but , it lacks

1. Custom header ( which is achievable through readerTabBar ) , but this is not scrollable as we had done in 0.4
2. The tabs rendering the flatlist were not performant in terms of scrolling, the same issues we faced in 0.4 was there, related to threashold.
3. This above scroll threashold issue is not there when we tried - StickyHeaderScrollview / StickyHeaderflatlist . But in this case, we can't achieve the tabs to be collapsible ( not sticking at top while scrolling ) and also the scroll on the header part is not there.

We are trying to achieve something like what Instagram has in their profile page ( screenshot below )

In a nutshell, we had one problem i.e the scroll threashold performance of flatlist inside tabs in 0.4x , and with the upgrade we have multiple problems / not able to achieve the design/ux requirements what we achieved in 0.4. ( 0.4 to 1.x improved the tab switching performance though )

Could you kindly advice on this ?