How to shrink header instead of just moving it up?

[dan-fein]

I'm currently using this package to display your standard profile header and on-scroll the header shifts up and out of screen until it reaches its minimum header height. This is really nice, but I would like to take it to the next level. Instead of the header moving out of screen, I would like to animate its height as the entire thing moves. This is a fairly common pattern and typically looks like this:

Notice the text moves itself to the center, rather than just scrolling up.

How would you guys approach this given the use of this package? Like how would you grab the current positions in such a way you can feed it into your header?

[alexpchin]

@danielfein I might be remembering wrong but believe the original version of this package that @PedroBern put together had something similar that got removed. Have you seen:

• https://www.youtube.com/watch?v=pNw8lPdD4H4
• https://github.com/wcandillon/can-it-be-done-in-react-native/tree/master/season2/spotify-header
• https://github.com/netguru/sticky-parallax-header

What exactly do you want to achieve? Shrinking the header whilst keeping the text centred? Or animating the background colour too? Scaling a background image? Or changing the opacity too?

I think there are a number of ideas that can be looked at after v4 is rock solid. However, I suggest we finalize v4 and then move onto individual feature improvements.

[PedroBern]

@danielfein it can be achieved by interpolating the translateY from any absolute positioned element inside the header with the scrollYCurrent or accDiffClamp from the context. I will try to add an example soon.

Basically everything that @alexpchin said can be done this way.

[PedroBern]

@danielfein checkout https://github.com/PedroBern/react-native-collapsible-tab-view/pull/121/commits/4b160c55f8c285823b23f7e53bb60179cfad8d45