Как сделать, чтобы header во flatlist не уходил вниз при pull-to-refresh?

Question

[TAnonim]

Приветствую. У меня есть FlatList с header'ом. Когда тянешь вниз для обновления, хедер уходит вниз вместе с элементами списка:


Но я хочу, чтобы хедер оставался наверху, а вниз уходили только элементы:


Это можно было бы сделать, если вынести хедер из списка и поставить его просто перед flatlist. Но тогда header всегда будет оставаться наверху, а мне нужно, чтобы при скролле хедер уходил наверх вместе с элементами списка.

Я пробовал делать отрицательный margin-top header'у на событие onScroll, но это выглядит топорно, к тому же скорость ухода header отличается от скорости скролла списка. В общем, не вариант.

Как можно сделать подобное? Буду благодарен за ваши идеи!

Answer 1

[davidnum95]

Запилил пример как это можно реализовать с помощью Animated и парочки костылей:
https://github.com/davidnum/FlatListExample

Comments

[TAnonim]

Спасибо большое! Совсем не ожидал увидеть готовое решение. Буду разбираться, очень помогло.

Тоже думал в сторону animated, скрывать-показывать хедер при достижении верха.

Ещё была идея попробовать абсолютное позиционирование, но я пока не пробовал. Типа когда достигаем верха, вешаем на хедер абсолютное позиционирование, top 0, при прокрутке вниз убираем.