How to Create a Collapsing Tab Header Using React Native

Collapsing header and swipeable tabs are one of the most common UI elements in mobile apps. Such a pattern is widely used on profile screens on Social Media apps like Instagram or Twitter, for example.

In this article, we are going to create a screen with a collapsing header and multiple swipeable tabs below step-by-step using the extensive experience of our React Native app development company. This behavior can be achieved easily with the help of React Native Reanimated and React Navigation libraries.

Starting point of creating React Native collapsible tab

This simple tab screen will be the starting point of our journey. It’s just 2 tabs created using material top tab navigator from React Navigation. Each tab contains a FlatList with some mocked data.

Nothing special about the implementation of the ConnectionList, except for a reference forwarding. We’ll need to use this technique in the future, so let’s prepare it in advance.

Simple static header

To implement collapsing behavior, we’ll need to place the header above our screen and add a corresponding offset to the list and tab components.

Animating the Header

After we’ve created a static header, it’s time to spice it up with some animations.

React Native Reanimated has been recently upgraded to v2, which brings a brand new imperative animation API. At Stormotion, we always try to be up to date with the new technologies and approaches, so we definitely wanted to give it a go 🚀

The point of animation here is to make more space for the main content by collapsing the header and making the tabs stick to the top as the user scrolls.

Before starting to work on animations, we’d like to provide a simple way to determine the scroll length required to collapse the header.

Scroll syncing

This example already looks pretty good, but it isn't completely ready yet since we wanted to have more than 1 list. In this case, we have to synchronize the header position between the two tabs. Otherwise, the header will jump while switching the tab.