Custom bottom tab navigator bar in React Native

A bottom tab bar is one of the most used types of navigation inside apps. It offers an easy and user intuitive way of moving through screens. But how do we customize it?

In this example, we will be creating a simple app for money management. The bottom tab bar will consist of 5 buttons, where 4 of them represent one screen. The middle one opens up a custom modal window.

Bottom tab navigator for Money management app Scrooge

Let’s get straight to business. Given that you are reading this I expect that you already know how to set up a new app.

For us to add a tab navigator install this packages in your project folder.

npm i @react-navigation/native @react-navigation/bottom-tabs @react-navigation/stack react-native-gesture-handler

If required install other packages as well.

Before we continue adding our navigation code, let’s create screens “home”, “analytics”, “notes” and “settings”. Here the code does not need to be anything special.

Simple function screen

Lets then create a new file called navigator.tsx. This file will contain everything your app needs for navigation. After we import everything that we need we move on to creating our HomeTabs function. How tab navigator works and how we add it to our app is very well explained on the official react-navigation website: https://reactnavigation.org/docs/bottom-tab-navigator/.

After we did all this our code looks something like:

Navigator with simple bottom tabs navigator

Now that we have set all this up let’s create our custom bottom tab navigator.

Function component tabBar.tsx receives “state”, “descriptors” and “navigation” as props. Under state.routes we have all the “routes” or. screens we need to map as buttons in our tab navigator.

Customer bottom tab navigator

But what about the middle button? Well, that will be a little tricky. For our “custom middle button” to be displayed we need to map it. But the problem is that only components added in the tab navigator get mapped to buttons. So how to add another button without adding another screen? We create a placeholder tab screen. After adding the custom tab bar to the “tabBar” prop in Tab.Navigator our HomeTabs function look something like this:

Bottom tab navigator after adding custom tab bar and Placeholder screen.

3 things to note:

1. Dont forget to add props to our custom TabBar,
2. Add “PlaceholderScreen” where you want it to render.
3. Why does “PlaceholderScreen” still have a component prop and why is the same as “home”. Well, this it is a mandatory prop, but it does not matter at the end because we don't navigate to it in our custom TabBar component. So you could add any component that you wanted.

The last thing left for us to do is to add the new “PlaceholderScreen” button to our TabBar code. This is simply done with an if statement where we ask if route.name equals “PlaceholderScreen” then return this View.

if(route.name =="PlaceholderScreen"){
   return (
      <View key={index} style={styles.mainItemContainer}>
         <SelectWheel />
      </View>
   );
}

Finished tab bar component:

Tab bar with custom middle button

And this is it! We have created a bottom tab navigator with a special middle button. You can customise what this button does as much as you want. In my case, it displays two additional buttons that enable the user to quickly add an expense or additional funds.

Select wheel

If you have any questions regarding this tutorial please leave a comment.

See my latest article here.