Cyburst.io

Any fool can know. The point is to understand

React-Native Animated Header with ScrollView

Animation is an important and integral element for creating a great user experience for mobile apps. Its critical challenge is to explain to users the app logic, but the common mistake is a reckless use of animation which negates the whole point of improving the user experience. To make an app great, not just good or mediocre, the animation must be integrated correctly and shouldn’t be superfluous.

In this article, you’ll read about how to create header animation with ScrollView and react-native’s Animated API. after the end of the article we’ll have the following output:

Animation Preview - React-Native
Animation Preview – React-Native

How does it work?

Render a header over the ScrollView and set the position top of the ScrollView to offset for the header. Then we can simply interpolate the header using the ScrollView scroll position. So let’s get understand.

“Any fool can know. The point is to understand.” -  Albert Einstein

Let’s Code

We are using Interpolate it for changing position, size, and colors and Animated.event() to map the ScrollView position with animated state value. You can read more details about Interpolate and Animated.event.

Always set useNativeDriver:true in your animation configurations. It will make your animations smooth by skipping the back-and-forth over the bridge between JS code and native code for every rendered frame.

useNativeDriver currently does not support the position absolute due to React-Native limitations. so for that we use transform property. For top we use translateY and for left we are using translateX.

Let’s understand the code now:

Initialize the state scrollY with the animated value from the constructor like below:

Now we don’t want the component to re-render so we don’t use setState() method. We use ScrollView's onScroll prop to map the state with scroll position:

Animation Preview
Animation Preview

Animated.event() method map the state scrollY with ScrollView's Y offset means Vertical offset.

scrollEventThrottle controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number yields better accuracy for code that is tracking the scroll position but can lead to scroll performance problems due to the volume of information being sent over the bridge. You will not notice a difference between values set between 1–16 as the JS run loop is synced to the screen refresh rate.

Now it’s time to animate the profile image to animate from the middle of the screen to the header left with help of Interpolation.

Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.

Here, from input range 0–80 our image changes the position from 30 to 38 relative to device width, and from 80–140 it will be from 38 to 10 relatively.

interpolate method called when the state value is changed from ScrollView's onScroll mapping that we have done before.

Same as position left we set position top, Image height, and width as per ScrollView's scroll position. Now set these values in the style of Animated.Image as below:

Now when the user scrolls the ScrollView the onScroll method will call and our state scrollY will change and when the stateY changed interpolate will call and the beautiful animation is done.

In the current example, I have used many interpolate values like Image border width, Image border color, title opacity, etc. all the methods working on the same principle of scrolling position mapping. you can find the whole source code here:

Hope you like the article. If you have any issues while implementing, feel free to contact me on Twitter & LinkedIn.

Cyburst Logo

Don’t miss the latest posts!

We don’t spam! Read our privacy policy for more info.

Rutvik Bhatt

Experienced mobile app developer with a demonstrated history of working in the information technology and services industry. Skilled in Android, React-Native, Flutter, Dialog Flow, Firebase, Cloud Functions. Focused in mobile technologies and software development.

Back to top