title: Collapsible header in react-native-reanimated with multiple tabs in React Native
body: <p>I'm trying to create a screen in React Native with 2 tabs (using <code>react-native-tab-view</code>) with the following layout:</p>
  
  <pre><code> ------------------------
  |   Collapsible Header   |
  |------------------------|  
  |    Tab A  |  Tab B     |
  |------------------------| 
  |                        |
  |                        |
  |        FlatList        |
  |         in Tab         |
  |         Content        |
  |                        |
  |                        |
  |                        |
  |                        |
   ------------------------
  </code></pre>
  
  <p>The layout I went for is absolute positioning for both the collapsible header AND the tab bar, and the FlatList actually covers the entire screen (and both the header and the tab bar are on top of it). To put the scrollable part after the tab bar, I added a <code>paddingTop</code> to the <code>contentContainerStyle</code> of the FlatList. This is the root of the issue - When scrolling in Tab A, then moving to Tab B, there will be a blank space because of that padding.</p>
  
  <p>I created a complete Expo project to show this issue: <a href="https://expo.io/@bartzy/collapsible-tab-view-example" rel="nofollow noreferrer">https://expo.io/@bartzy/collapsible-tab-view-example</a>
  This is the Github repo for the Expo project: <a href="https://github.com/bartzy/CollapsibleTabViewExample" rel="nofollow noreferrer">https://github.com/bartzy/CollapsibleTabViewExample</a></p>
  
  <p>Here's a quick video of the example app, showing the blank padding space after switching to Tab 2:
  <a href="https://i.stack.imgur.com/I3spU.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I3spU.gif" alt="enter image description here"></a></p>
  
  <p>I'd appreciate any idea on how to eliminate that blank space when moving between tabs, while keeping the desired collapsing behavior.</p>