How to make header in flatlist not go down when pull-to-refresh?

Question

React Native

Greetings. I have a FlatList with a header. When you drag down to update, the header goes down along with the list items:


But I want the header to stay on top and only the items go down:


This could be done by taking the header out of the list and just putting it in front of the flatlist. But then the header will always stay at the top, and I need the header to go up along with the list items when scrolling.

I tried to make a negative margin-top header on the onScroll event, but it looks clumsy, besides, the speed of leaving the header is different from the scrolling speed of the list. In general, not an option.

How can this be done? I will be grateful for your ideas!

Answer 1

I wrote down an example of how this can be implemented using Animated and a couple of crutches:
https://github.com/davidnum/FlatListExample