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 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. React-Navigation 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 0.55.2 version and 2.0.0 React Native React navigation 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. _This page will help you install and build your first React Native app. If you already have React Native installed, you…_facebook.github.io Getting Started · React Native Alternatively you can also install package. create-react-native Your route file should look like the following gist: is a function that returns a React component. It takes and, optionally, [createStackNavigator](https://reactnavigation.org/docs/en/hello-react-navigation.html) a route configuration object 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 , we have .Inside this object we can specify our custom header like this. _createStackNavigator_ _navigationOptions_ 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 and set it to **headerLeft** **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 for bottom tab navigation, how do I style the header for tabs and the bottom navigation? TabNavigator 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 object and the property to style your bottom tab bar. **tabBarOptions** **style** How do I add icons to my bottom navbar? Solution: Use object property. **navigationOptions** **tabBarIcon** 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: 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 of your , have code like this: **navigationOptions** **TabNavigator** 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 for more updates on what I am experimenting with. @VivekNayyar09 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)

Facebook

Google

Twitter

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

E2E Testing of Excel Downloads with Cypress

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

E2E Testing of Excel Downloads with Cypress

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps