React-native-tab-view: 【help】how can i resolve sticky tab view inside scrollview

[YouHan26]

Found a same issue, but not I want.

Expected behaviour

I have three flatlist using react-native-tab-view. And the tab view inside parent scrollview.
when the tab view is not scroll to header of screen, the parent scrollview will always scroll even if touch the tab view content.
But after the tab view scroll to header of screen, the child flatlist of tab view can scroll auto.
When drag down, the child flatlist will scroll first. And when child flatlist scroll to top, parent scrollview will start to scroll down.

Actual behaviour

none

Code sample, screenshots

none

What have you tried

I use scrollEnabled attribute to resolve this case. When tab view scroll to header of screen. Set parent scrollendabled false and child flatlist scrollendable true.
It does work. But it always pause when tab view scroll to header or leave.
Because only one component can response panresponder event at the same time.
Any advice ? Thanks very much and pardon my poor English...

[onlybenyang]

Maybe the stickyHeaderIndices of ScrollView would give u a hand. However, you need render the tab header yourself in

[Crash--]

We arrive at the the same conclusion: i.e. dealing ourself with the tab header.

I was expecting that using <TabBar> outside of <TabViewAnimated> would be trivial. But no. We can't use <TabBar> and we need to rewrite all this stuff. It's pretty bad since the <TabBar> component deal with a lot of use case...

Is there a way to make <TabBar> outside a <TabViewAnimated> ?

[satya164]

Don't nest the TabView inside a ScrollView. The FlatList cannot optimize it's rendering when you do that. Listen to scroll events and apply translation to the tab bar to make it sticky.

Example: https://snack.expo.io/@satya164/collapsible-header-with-tabview

[happyjosh]

@satya164 How to set same offset when there are multiple page?

[ShabareeshSunku]

@satya164 in the expo snack you mentioned above, once the header is collapsed and if we navigate to another tab, can see some whitespace on the tab, coz of padding being set. Any workaround to fix that issue?

[YouHan26]

@satya164 now I came a nested tab view case. I have a animated scroll tab view like below above, and one of its tab have another tab view. The child tab view will sticky follow parent tab, I want to use scroll y to manual control scrollenabled, but it's very trouble, have any advice ? thanks sooo much~

[YouHan26]

after read react-native-tab-view source code, i know how to do it.

[ovalsky]

@YouHan26 I have the same issue, thank for any advice.

[alpamys-qanybet]

@YouHan26, @ovalsky, can you share your code?

[YouHan26]

Example: https://snack.expo.io/@satya164/collapsible-header-with-tabview

[cobarx]

@satya164, @YouHan26 Your example is great. I'd like to make the area above the contact list including the tabs support scrolling the contact list up as well. I've been trying different approaches but am not sure how to do it. Any suggestions on how to tackle this?

[alpamys-qanybet]

@cobarx, I hoped to get working sample, tab header works only with one current tab. If you find working solution plz share with me.

[AkilLis]

@satya164 Tested on v1.0.2. There is error appears. I guess latest changes break things. Link

[AkilLis]

It seems to me TabViewAnimated is no longer exist.

[bhagwantg]

@ShabareeshSunku , @cobarx , @alpamys-qanybet , I also had that problem, here's what I did,

1. Create global variables to store the scrollamounts in different tabs or you can use redux, whichever you prefer.
2. Use componentDidUpdate() method in each of the routes to sync up the scrollamount using scrollTo() method, in my case I used scrollToOffset() of flatlist. You can disable the animation to make it scroll without noticing!
3. Use componentDidMount() in tab view to reset the scrollamounts!
   Done!

[satya164]

https://blog.expo.io/implementation-complex-animation-in-react-native-by-example-search-bar-with-tab-view-and-collapsing-68bb43be2dcb?source=collection_home---6------5----------------

[imansalhi]

@satya164 TabViewAnimated class is not exist in react-native-tab-viewVersion 1.0 #575

[justinushermawan]

Don't nest the TabView inside a ScrollView. The FlatList cannot optimize it's rendering when you do that. Listen to scroll events and apply translation to the tab bar to make it sticky.

Example: https://snack.expo.io/@satya164/collapsible-header-with-tabview

@satya164 How can I make it expands when scrolling top and collapses when scrolling down like this https://i.stack.imgur.com/CjAI4.gif?

[justinushermawan]

@ShabareeshSunku , @cobarx , @alpamys-qanybet , I also had that problem, here's what I did,

1. Create global variables to store the scrollamounts in different tabs or you can use redux, whichever you prefer.
2. Use componentDidUpdate() method in each of the routes to sync up the scrollamount using scrollTo() method, in my case I used scrollToOffset() of flatlist. You can disable the animation to make it scroll without noticing!
3. Use componentDidMount() in tab view to reset the scrollamounts!
   Done!

@bhagwantg I just got the similar problem, may I ask for your help?

[githubLXD333]

Can try:
1、set lazy;
2、Set up other pages height to 0, when onIndexChange.

[kamlesh1000]

@bhagwantg, @satya164, Can anyone please help me with the sample code? I got the same problem. When one of the tab is scrolled, other tabs leave the white spaces (gap) on the top as much as the other tab is scrolled.
Sample video:
https://drive.google.com/open?id=12tUHDntUlIQ40xcSqLvACbdZ3kdB8BR-

[KingAmo]

any update on this? i believe sticky TabBar nested in ScrollView is a very common use case, @satya164 could you please help?

[maitham]

any update on this? i believe sticky TabBar nested in ScrollView is a very common use case, @satya164 could you please help?

Managed to get a solution, not proud of it but it works. The flat list needs to be optimised

https://gist.github.com/maitham/6e0841800d88bf9c289fc45bbc903b1d

[akug17]

@maitham good but not perfect, buggy and sometimes tabs do not sync, any solutions or in case if you perfected this ? i really need to implement this behavior in my project

[anhkieet]

Do we have any solutions for this?

[jehartzog]

https://medium.com/@linjunghsuan/implementing-a-collapsible-header-with-react-native-tab-view-24f15a685e07 works perfectly and it easier to implement in your own project than the other working solution in this thread.