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.

So lets begin 😄

Pre-Requisites

We are using React Native 0.55.2 version and React navigation 2.0.0

Follow the getting started guide from here to create a new react native app from scratch and then create a routes file similar to the one mentioned below.

Getting Started · React Native_This page will help you install and build your first React Native app. If you already have React Native installed, you…_facebook.github.io

Alternatively you can also install create-react-native package.

Your route file should look like the following gist:

[createStackNavigator](https://reactnavigation.org/docs/en/hello-react-navigation.html) is a function that returns a React component. It takes a route configuration object and, optionally, an options object

Approach

In this section, I have put down all the FAQs about customizing the header.We will use the solution for each of them to create our customized header.

How do I use a custom header for my React navigation?

Solution: Inside the options object of _createStackNavigator_, we have _navigationOptions_.Inside this object we can specify our custom header like this.

header: props => <CustomHeader {...props} />

Also this won’t work unless you also make the background transparent for the react navigation header with this line of code:-

headerStyle: {backgroundColor: "transparent"}

Finally, after adding the custom header, our code will look like the following gist:

And the CustomHeader.js file in my case looked like this:

What if I do not want a custom header and just want to style my header?

Solution:- Use **headerStyle**

How do I style my header title?

Solution: Use **headerTitleStyle**

How do I change the color of the back arrow?

Solution: Use **headerTintColor**

headerTintColor: “#fff”

How do I hide the back arrow?

Solution:- Use **headerLeft** and set it to **null**

headerLeft: null

What if I do not want to show a header for some screens?

Solution: Set **header** to **null**

header: null

The final code after all the changes would look like this:

That pretty much should solve most of the customization regarding custom header. Up next is if I am using a TabNavigator for bottom tab navigation, how do I style the header for tabs and the bottom navigation?

With TabNavigation and Header, the process is slightly complicated. You cannot have this tab approach if you wish to have different headerTitle for your header with respect to each tab.

So the solution here is putting each of your tab screen inside a stackNavigator.

For example:-

Frequently Asked Questions about Bottom TabBar?

How do I put a custom bottom navigation bar for React navigation?

Solution: React Navigation TabNavigator accepts a property**tabBarComponent**.

We can specify our custom component here.

tabBarComponent: CustomTabBarBottom

How do I style my bottom TabBar?

Solution: Use **tabBarOptions** object and the **style** property to style your bottom tab bar.

How do I add icons to my bottom navbar?

Solution: Use **navigationOptions** object **tabBarIcon** property.

How do I hide the bottom tab bar for some detailed screens which are sub screen’s of a parent tab?

For example you might have a movie tab which shows a list of movies and on clicking on any of those you would want to show the details of that movie and would want to hide the bottom navbar and disable swiping as well.

In all such cases, here is what you need to do:

1. From your parent tab when you navigate to the details page, send it a param of **hideTabBar: true**

this.props.navigation.navigate('DetailsScreen', {hideTabBar: true});

2. Now inside **navigationOptions** of your **TabNavigator**, have code like this:

Finally after all the changes, the tab router looks like this:

Conclusion

Hopefully this article saves someone’s time while getting started with React Native. React native is fun to play around and to create cool apps 😍 ✨

Give this article a clap if you found it helpful!

And do share the amazing apps that you all have created or are working on in the comments section. Let’s all learn together… 😃

You can follow me on twitter @VivekNayyar09 for more updates on what I am experimenting with.

For further reading, please refer to the following links:-

• React Native getting started
• fluent-conf-restaurant-app
• React Navigation
• Custom Header Github Issue(this helped me a lot to debug my issues)