How to create a Sticky Header in React Native and React Navigation

We will use react-navigation-collapsible to make react navigation header collapsible. The use case that we are trying to replicate is sometime similar to Spotify search page UI.

We will use react-native-collapsible sticky header to get the desired effect of the header.

Let us start by creating Search screen

Setup

Install required packages using yarn or npm

npm install react-navigation-collapsible

SearchScreen.tsx

Create App.js

Wrap the root component with NavigationContainer and make sure to include SearchScreen inside a navigation stack.

The resulting application should display sticky header.

References:

Link to the sample project: Serenity Music Player

Link to the library: https://github.com/benevbright/react-navigation-collapsible