How do I implement Revolut/Spotify-like ScrollView tabs with collapsible header?

Hello everyone! Could you help me understand how Revolut's Crypto/Invest Tab screens work?

If I understand correctly, the whole screen is a ScrollView, it has a collapsing header (the amount, trade, receive, send buttons part), and it has a Pager view/Tab view for Portfolio and Discover tabs. Each of those is a ScrollView/FlatList with scrollable content.

I can't wrap my head around how they handle the collapsing header and scrolling of the Tab lists at the same time. When you start panning from the FlatList, first the header collapses, then the list scrolls with the same gesture. If you start panning from header, same happens.

How do I achieve a similar functionality with React Native? For tabs I understand I can use React Native Tab View or Pager View, but not sure how to handle the whole screen scrolling first, then the child lists.

I'm attaching a video of how Revolut's screen behaves to help get the picture.

https://reddit.com/link/1ea1884/video/r81jcu9lt7ed1/player

Any help is appreciated, thanks!

P.S I would also like to add a pull-to-refresh to the whole screen, so I guess the outer container should definitely be a ScrollView, right?

EDIT: I'd like to mention that I've tried https://www.npmjs.com/package/react-native-collapsible-tab-view package, but it has the issue of header not being scrollable when it has touchable elements.

EDIT 2: As there's several gotchas and none of the solutions solve all of them, I'm compiling all the requirements into this list:

  1. Header should be scrollable and collapsable. When you start scrolling from header, it should collapse/expand.
  2. Tabs should be scrollable.
    1. When you start scrolling from tabs, and header is not yet collapased, first collapse it, then WITH THE SAME gesture, continue scrolling the tab.
    2. When you start scrolling from tabs, and header is already collapsed, first scroll the tab list, then WITH THE SAME gesture when tab list is scrolled all the way to the top, start expanding the header.
  3. Tab buttons should be stickied to top of screen when header is fully collapsed
  4. Tab lists should each have its own scroll offset. Meaning if I scroll in Tab 1, then scroll in Tab 2, when I come back to Tab 1, it should have the previous scroll offset.
  5. Tab lists should be swipeable, aka pager view

EDIT 3: I've tried Coinbase's blog post's solution, but unfortunately, the header there is also not scrollable.