React-Native Animated Header using Animated and ScrollView

React-Native Animated Header with ScrollView

The animation is an important and integral element for creating a great user experience for mobile apps. Its critical challenge is to explain 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 article we’ll have following output:

Final Result

How it works?

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

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

Let’s Code

We are using Interpolate for changing position, size, 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:

Initialise the state scrollY with animated value from 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:

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 send 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 its time to animate the profile image to animate from middle of the screen to 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 change 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 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 user scroll 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 for Image border width, Image border color, title opacity etc. all the methods working on the same principle of scrolling position mapping. you can find whole source code here:

rutvikbhatt9/react-native-header-animation

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

React-Native Animated Header using Animated and ScrollView was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.