Custom Collapsible Toolbar in React Native

Collapsible Toolbar was introduced in Google’s Material Design Framework and it’s being a part of the Android builtin component through the material components. However, the React-Native framework doesn't provide such components. Though there may be third party libraries to provide such components they will have limitations and might not suit each and everyone's need. They lack customization options making developers life tough :)

In this tutorial, we will learn to create a collapsible toolbar component all from scratch. Let's get started!!

Create a new Component CollapsibleToolbar which will be a stateful component. We will use props to customize the component which will help us reuse the component across the project.

There will be two types of props being passed to our component

1. Direct props: These props will be passed directly using keys for an eg title, headerColor, etc and will be accessible using this.props.key_name in the component
2. Child props: These props will be passed as children props and will be accessible using this.props.children in the component.

iOS

If we take a look at the design above we will try to figure out the props passed to the component

1. title
2. image
3. headerColor (header background color)
4. headerColorDark (statusBarDark color)
5. children (List in this case)

In order to enable transitions on a scroll, we will use the Animated API provided by the react-native package. In CollaspibleToolbar user can scroll up and down and the toolbar will change its size accordingly. Since there is only up&down its only Y-axis scroll and all our interpolations will be related to the Y-axis scroll value.

Consider we need to change the height of our header on scroll. Our Initial expanded height is 150 and our Collapsed height is 56.

Now we need a function to provide a dynamic height which is dependent on the amount of Y-axis scroll in a particular direction(up/down). We will use the interpolate function which takes in parameters like input range, output range, and the extrapolate function.

This will basically change the headerHeight value between the provided ranges on the user scroll. We can use these values to update our view.

Now we need to change the positioning, size & opacity of Title on up & down scroll.

1. headerSlide is used to slide the title across X-axis

2. hearderTitleSize is used to change the textSize of title

3. hearderTitleOpacity is used to change the opacity of title and bring in the fade-out effect

Similarly, we can use the interpolate function to change the opacity, change the left/right padding of an element to bring up transitions for our elements if needed.

In order to use these interpolated values for our elements, we need to use elements provided by Animated API. For eg for the text, we should use Animated.Text instead of Text, Animated.View instead of Animated.View, Animated.Image instead of Animated.Image and so on...

Our Complete CollapsibleToolbar Component will finally look like this:

We can use this component in our App.js now

Here we are passing FlatList as the child prop for our CollapsibleToolbar component. We can customize the title, color, the image of the collapsible toolbar using the direct props.

Finally, it's ready!!! You can test this on both Android & iOS and it will give an exact similar user experience.

You can refer full code at this Github Repository Link

In the next tutorial, we will learn how to create Collapsible Toolbar with Tabs in React Native