React Native Collapsible Expandable Animated Header on ScrollView

Collapsible Expandable Animated Header is a type of application header(Title Bar-Action bar) used to automatically expandable when user scrolls down the ScrollView and also it would automatically Collapsible when user scrolls up inside the application. So in this tutorial we would going to create a react native app with Collapsible Expandable Animated Header on ScrollView in both Android and iOS applications and we would also change the Header background color when user scrolls down or scrolls up. See the below .GIF file to know how this header would work 🙂 .

Screenshot :

Collapsible Expandable Animated Header

Content in this project Collapsible Expandable Animated Header on ScrollView in React Native app :

1. Import ScrollView, StyleSheet, View, Animated, Text and Platform component in your project.

2. Create 2 constant variables named as Header_Maximum_Height and Header_Minimum_Height.

Header_Maximum_Height : This is the Maximum height of animated header.

Header_Minimum_Height : This is the minimum height of animated header.

3. Create constructor() in your project’s class. Now we would create a animated value object using this.AnimatedHeaderValue and assign the animated value to zero.

4. Create a const in render’s block named as AnimateHeaderBackgroundColor and assign the this.AnimatedHeaderValue.interpolate method on it. This block of code is used to smoothly change the background color of Header when user scrolls up or scrolls down.

extrapolate: ‘clamp’ : Is used to stop the animation beyond the output defined range.

5. Create another const named as AnimateHeaderHeight in render’s block and assign the this.AnimatedHeaderValue.interpolate method on it. This block of code is used to animated the Header height when user scrolls down or scrolls up.

6. Create a Root View in render’s return block. This would be our main View.

7. Create a ScrollView component inside the Root View and call the Animated.event method on onScroll event. I am also adding 20 Text boxes in ScrollView just to explain how it will work. You can put your own component inside the ScrollView.

8. Creating Animated.View component after ScrollView closed. This would be our Animated Header View. We are also creating a Text component inside the Animated View.

9. Create CSS style classes for Root View, Animated header and header inside Text and all common Text boxes.

10. Complete source code for App.js File :

Screenshot in Android device :

Screenshots in iOS device :

8 Comments

  1. How do I add a curved bottom instead of a rectangular bottom?

  2. HI,
    Thanks for the help, it works good in all devices, for the rounded corner, i mean when i scroll down i want left and right border radius, but when i scroll up , it should be the rectangle (second screenshot of android and IOS), is it possible?

    Thanks for prompt reply.

    • Ash it is possible but it will be more lengthy for your project but you can make the rounded corners before scroll down and up like as default .

Leave a Reply

Your email address will not be published. Required fields are marked *