Animated Collapsible Header Using React Native Reanimated 2

Creating butter smooth and powerful animations in mobile apps to give the best user experience is nothing more than showing magic. In react-native to create smooth 60 frames per second animations and to provide the best user experience, we will use react-native-reanimated as our magic wand.

Reason for using react-native-reanimated:-

We can achieve animation with the built-in Animated functionality in react-native but the performance becomes dull in low-end Android devices due to frame drops.

The reason we see frame drops by using react-native’s built-in Animated API is because of the bridge, when we create an animation the information of the frame has to be shared between the javascript thread and the UI thread, and the app logic run on the JavaScript thread so if communication between the bridge increases then it causes the animation-delay which in turn ruins the user experience.

Reanimated 2 handles it by running animation logic on the UI thread which helps to give smooth and powerful animation in 60fps.

What we will be building:-

Let’s start to create this magic with our trick

First, let’s set up our react-native project by using this command.

We will use typescript in our project

Now install and setup react-native-reanimated in our project by following the instructions on this given link

After we are done with the setup, let’s get our hands dirty by writing some code.

First, we write the below code in our App.tsx and will understand what all the necessary piece of code does.

First, we have imported all the necessary functions and hooks from the react-native-reanimated module

Before moving forward you should know what these three important hooks do here.

useSharedValue hook makes it possible to maintain a reference to mutable data that can be read and modified securely, it’s just like Animated.Value from React Native Animated API.
Shared Value objects serve as references to pieces of shared data that can be accessed and modified using their .value property.

useAnimatedStyle hook in this hook we gonna write our dynamic CSS for a particular component which will help us to animate that component.

useAnimatedScrollHandler This is a convenience hook that returns an event handler reference which can be used with React Native’s scrollable components.

We are going to decide the minimum height and the maximum height of the header which will remain constant in our code.
We will use Dimension library from react-native to get our screen height

In our example, we have used FlatList instead of ScrollView because if you add this animation in some bigger project with lots of data and API calls to show content then FlatList will show better performance.

To create the custom animated FlatList we have written this line of code, we have used Animated.createAnimatedComponent() to create this.

Now we will use the useShared hook to store the scroll position which eventually will help us to create animation for other components. To store scroll position in the shared value we will pass this handleScroll function in our AnimatedFlatList onScroll props

Now we will create a dynamic style using the useAnimatedStyle for our header to increase or decrease its height on the basis of scroll position, just like shown below.
Inside interpolate we pass the input range of the scrollPosition and on the basis of that the output range of our header, and extrapolate as clamp it will clamp the input value to the range.

Now similarly we will add dynamic style to all of the other components that we need to animate in our example
imgViewStyle helps to style our image view and bring it to the left and at the top when the user scrolls

textStyle helps to show the name john doe as shown in the example when header size reduces to its minimum next to the profile image. For that, we make the opacity of the text to 1 from 0 when the header reduces to its minimum size.

imgStyle helps to increase/decrease the size of the image on scroll.

nameStyle helps to reduce the opacity of the profile name when the user scrolls.

And Aabra Ka Dabra and these secret tricks will help us to achieve what we want to 🪄🎩