Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 984 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Build a Collapsible React Native Header Bar

4:27 React lesson by

In this lesson we'll create a collapsible header bar. This technique is used to show additional information or actions but hide when the user scrolls to expose more of the information they are looking at.
We'll use a combination of ScrollView, onScroll, and the Animated.event function to update our Animated.Value every time the user scrolls. Then with a series of interpolate calls we can define a scroll threshold to show/hide pieces of information, as well as shrink the fontSize of our title.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson we'll create a collapsible header bar. This technique is used to show additional information or actions but hide when the user scrolls to expose more of the information they are looking at.
We'll use a combination of ScrollView, onScroll, and the Animated.event function to update our Animated.Value every time the user scrolls. Then with a series of interpolate calls we can define a scroll threshold to show/hide pieces of information, as well as shrink the fontSize of our title.

We'll start with a pretty basic setup, we'll have a scroll view here with a few buttons, a title, and an image of your company. To get started, we'll create a new animated value and assign it to this.animated, and we'll set the default to 0.

We want this to be controlled off of the scroll event on our ScrollView, so we'll come down to our ScrollView, we'll say scrollEventThrottle of 60 milliseconds so our onScroll event will be called every 60 milliseconds.

Then add an onScroll, and we'll use the animated.events which is the helper function that will traverse whatever we provide it. What we're after is the first event, the first argument that's passed to this function, will go to native event, we'll get the content offset, and then we'll get the Y and apply it to this.animated.

Now that the onScroll is updated our animation, we'll go set up a series of interpolations. The first one will be for the image, so say const hideImageInterpolate = this.animated.interpolate(). Let's take an input range of 0, and then it will be a threshold of the scroll that we want, so we'll say 250.

Once they scroll 250 down, it will hide the image. We'll say outputRange on our picture is 50 to the start, and go to 0, and we'll need an extrapolate:'clamp' here, otherwise once we scroll farther than 250 our output range will go below 0.

We'll now go ahead and create the style, so we say const imageStyle, we'll do width, and hideImageInterpolate, as well the height hideImageInterpolate. We can immediately apply this to our image, and then when we refresh and scroll, we can see that as we scroll down, and then scroll back, the image grows and shrinks.

When we scroll, we not only want to hide the image, but we also want to increase our title size. Come up here, and we'll create const fontInterpolate = this.animated.interpolate() do our input range which will be the same of 0 to 250, and our output range will be a starting font, we'll say 24, and then we'll go all the way up to 30.

Now we'll create const titleStyle and do fontSize, pass in our fontInterpolate, and now we can apply this to our title. Now if we refresh this and we scroll up, we can see that the image is shrinking and our font size is increasing, and when we scroll back it does the reverse.

Finally, we'll also want to hide our buttons, so we'll create two. One will be for fading, and one will be for collapsing the height. We'll say const opacityInterpolate = this.animated.interpolate(), then input range of 0 to 250, and an output range of 1 to 0.

Now additionally, we'll do a collapse of our height, so say const collapseInterpolate = this.animated.interpolate(), input range of 0 to 250, and finally we'll do an output range of 50,which will give our buttons 50 height, and 0, which means it will collapse them, and then I will also do extrapolate:'clamp' here, so it doesn't go for the negative and we'll also do extrapolate:'clamp' here.

Now we can go ahead and create our fade button style. So fadeButtonStyle, do opacity, do our opacityInterpolate, and finally our height, and we'll pass in our collapseInterpolate.

Now we can apply the fade button style, and we'll refresh, we can scroll up and see that our buttons fade out, and our font size increases, and when we scroll back down, everything reappears back to its original form.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?