Bouncy headers in React Native

I think most iOS users will have seen this bouncy/parallax header effect:

Parallax scrolling and bouncy headers in React Native

The header image zooms when pulled down, and parallaxes behind the content when scrolled up.

In our React Native app, we use these in a few places, with different sizes, different content, etc. so we have written some helpers to make this easy.

The helpers are in two parts, but both accept an Animated Value. One function captureScroll drives the value, and another getSpoingyTransform consumes it.

Helpers for bouncy headers

These helpers are then used like this (React Hooks version):

Using the helpers

It’s as simple as that.

This helper uses the “native driver” in React Native, meaning that these effects run on the Native UI thread at a smooth 60fps, rather than the JS thread. The scaling and offset calculations on the header ensure that the zoomed image pins the top and bottom of the image exactly to the top of the scroll view and top of the following content block. This satisfies me 😀 much more than the “over-zooming” I see in some apps.