React Native — Tab Navigation

With React Navigation

Sean Watters
Nov 8 · 4 min read
Photo by Annie Theby on Unsplash

In this tutorial, we will be walking through the primary features and setup of the React Navigation, Bottom Tab Navigator.

Before reading through this tutorial — if you haven’t already, I recommend taking a look at Intro to React Navigation. It will cover the initial configuration and set up for this project.


Currently, we have a view that looks like this:

Source code: here

Right now we have no styling, icons, or customization of any kind. In the last tutorial, Intro to React Navigation, we created our screens without any navigation options.

In addition to the app view, our ScreenOne.js and BottomTabNavigator.js files are set like this:

Link to: GitHub gist
Link to: GitHub gist

1. Add Icons

To view your application in it’s current state, in the simulator (from Intro to React Navigation), run expo start in the terminal.

To add icons to the Tab Navigator bar, we are going to use the icon library that expo projects are created with: @expo/vector-icons. To import the Ionicon component from @expo/vector-icons , we will add the following line to the top of our ScreenOne.js file:

import { Ionicons } from '@expo/vector-icons';

Now we will actually need to create the icon that will be set in the navigationOptions . Outside of the ScreenOne class, in our ScreenOne.js file, we will add:

const TabIcon = (props) => (
<Ionicons
name={'md-home'}
size={35}
color={props.focused ? 'grey' : 'darkgrey'}
/>
)

Here we are creating the TabIcon component to be rendered as this screen’s navigation icon. The top of your ScreenOne.js file should now look like this:

When we use the <Ionicons /> component, we need to give it a value for name , size , and color .

Note: props.focused is what indicates whether or not the page has been selected.

For name , we have given it the value of md-home so that Ionicons knows to render the home icon from its library. The md-home icon will look like this:

Expo Vector Icons Directory

A link to the full directory is here.

Now that we have created our icon, we need to add it to the navigationOptions configuration.

In the main class componenent, ScreenOne , we will need to add the following property to the navigation options:

static navigationOptions = {
tabBarIcon: TabIcon
};

Your ScreenOne.js file should now look like this:

Link to: GitHub gist

And the Screen One view on your app should now look like this:

In the ScreenTwo.js file, we can add similar changes to add a Screen Two icon. In this case we will add the md-apps icon from the Ionicons library.

const TabIcon = (props) => (
<Ionicons
name={'md-apps'}
size={35}
color={props.focused ? 'grey' : 'darkgrey'}
/>
)
// and...static navigationOptions = {
tabBarIcon: TabIcon
};

The ScreenTwo.js file should now look like this:

Link to: GitHub gist

And your app:

2. Remove Labels

In order to remove the icon labels and give our app a cleaner feel, we will have to configure the tabBarOptions in the BottomTabNavigator.js file where we create the Tab Navigator.

With our current view, the BottomTabNavigator.js file looks like this:

React Navigation provides us with the option to configure the Tab Bar options, with (you guessed it) tabBarOptions . To configure this, we add the options where we create the Bottom Tab Navigator:

To remove the Tab Icon labels, we simply add the following option:

tabBarOptions: {
showLabel: false
}

Your BottomTabNavigator.js file should now look like this:

Link to: GitHub gist

Your app:

Now our Tab Navigation looks clean and we have the bones of an excellent application established!

For a list of all the tabBarOptions, if there is additional functionality you’re looking for that we don’t have here, a link to React Navigation’s documentation on createBottomTabNavigator is here.

In addition to the GitHub gists provided below each of the code snippets, the full repository is here.


The Startup

Medium's largest active publication, followed by +542K people. Follow to join our community.

Sean Watters

Written by

software engineer seanwatters.io

The Startup

Medium's largest active publication, followed by +542K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade