How to use a Custom Header and Custom bottom tab bar for React Native with React Navigation?

I finally started working on a React native app last week and to be honest I have been thinking of doing so since an year now, but always lacked the motivation to start.

A few weeks back I was reading this book “The Subtle Art of Not Giving a F*ck” and I came across this quote which gave me a final push to start writing a React Native App.

The quote is:

Action isn’t just the effect of motivation; it’s also the cause of it.

And with that thought, let’s begin.

Intent

This article is about how to have a custom component for header, bottom tab navigation when you are using React-Navigation and how to style it since it took me one complete day to figure out all of it! It really took a lot of research, google search and reading all the github solutions by others, of which some did work and some did not.

Here is how the final screen with custom header and tab look like:

The entire code can be found here and can be tested with expo.