Support more refresh control scenarios

[songispm]

How to make header image animation like Twitter Or bluesky app?

The header is bigger when pull down, with loading

[songispm]

If this library can perfectly implement a Twitter personal feed page, that would be particularly cool.

include header image animation, pull refresh, scrollable tabs with sticky, tabs view with FlashList or LegendList

[pawicao]

Hey! Check out the progressExtrapolation property the library exposes as a HeaderMotion component prop (example of usage here: https://github.com/pawicao/react-native-header-motion/blob/main/example/src/app/overscroll.tsx). It allows you to animate the header also for negative progress (so for something like pull to refresh). Not sure about the loading indicator though, seems like some custom component for that would be needed for this.

If you happen to try this prop out, please do let me know your findings, thank you! And I'll think a bit how to support the loading indicator in this case.

[pawicao]

Hello, I was looking at the refresh control for pull refresh and I expanded support for it to work well with our offsetted scroll views, but that is still far from the header image animation on pull-to-refresh.

The refresh control logic is natively tied to the scroll view so it's not possible to do this out-of-the-box and I'm trying to be careful with custom scenarios like this.

As v1 sees the light of day in a few days, as a follow up I will try to make such custom refresh control happen - if not via a new API in the library, then at least via an example code in the repo here.

Thanks!

[nick87kelly]

React Native Collapsible Tab View has a feature built into it for this purpose called allowHeaderOverscroll. I'd like to move away from that lib in favor of this one since its not actively maintained but a similar functionality to that here would be great!

I was messing around with the overscroll earlier and was able to achieve something similar by applying the overscroll progress to the header in order to translate it down with the list. However, I could only activate the overscroll from dragging the list downward, giving the "pannable" prop to the header and dragging down there wouldn't activate the overscroll which is something I would've expected it to do.

As for the loading indicator it remained just above the list and not above the list + header.

[pawicao]

hello @nick87kelly thank you for the suggestion!

I have a few ideas of how this could be handled here and I'll for sure explore APIs of other libs, like the one you linked, to see what will fit here best.

As soon as I have some time to work more on this feature here I will for sure keep you updated in this thread here, thanks!