React Native — Tab Navigation

With React Navigation

Sean Watters
Nov 8, 2019 · 4 min read
Image for post
Image for post
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

Image for post
Image for post

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 and files are set like this:

Image for post
Image for post
Link to: GitHub gist
Image for post
Image for post
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 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: . To import the component from , we will add the following line to the top of our file:

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

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

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

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

Image for post
Image for post

When we use the component, we need to give it a value for , , and .

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

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

Image for post
Image for post
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 configuration.

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

static navigationOptions = {
tabBarIcon: TabIcon
};

Your file should now look like this:

Image for post
Image for post
Link to: GitHub gist

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

Image for post
Image for post

In the file, we can add similar changes to add a Screen Two icon. In this case we will add the icon from the library.

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

The file should now look like this:

Image for post
Image for post
Link to: GitHub gist

And your app:

Image for post
Image for post

2. Remove Labels

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

With our current view, the file looks like this:

Image for post
Image for post

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

Image for post
Image for post

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

tabBarOptions: {
showLabel: false
}

Your file should now look like this:

Image for post
Image for post
Link to: GitHub gist

Your app:

Image for post
Image for post

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

For a list of all the , if there is additional functionality you’re looking for that we don’t have here, a link to React Navigation’s documentation on 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 +734K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store