Build a Collapsible React Native Header Bar
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.
[00:00] 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 0We 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.
[00:32] 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.
[00:56] 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 0and then it will be a threshold of the scroll that we want, so we'll say 250.
[01:21] 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 0and we'll need an extrapolate:'clamp' here, otherwise once we scroll farther than 250 our output range will go below 0We'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.
[02:08] 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 0to 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.
[02:33] 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.
[02:57] 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 0to 250, and an output range of 1 to 0Now additionally, we'll do a collapse of our height, so say const collapseInterpolate = this.animated.interpolate(), input range of 0to 250, and finally we'll do an output range of 50,which will give our buttons 50 height, and 0which 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.
[03:53] 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.
[04:11] 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.