title: How to create a custom collapsible header in React Native?
body: <p>Below is a demo screen of what I want to implement.</p>
  
  <p><a href="https://i.stack.imgur.com/3eTJi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3eTJi.png" alt="enter image description here"></a></p>
  
  <p>So, what I want to do is that when I swipe up on the green area, I want the yellow area to move up along with it, and also the below blue box area (which is <code>FlatList</code> in my case).</p>
  
  <p>When the yellow area is finally hidden, I want the green area to stick at the top of the screen and the user can scroll in the below blue box area.</p>
  
  <p>How can I do it with <code>PanResponder</code> and <code>Animated</code> API? As far as I know, it can be done using Interpolation but I'm not able to get the logic in this case. </p>