React Native — Tab Navigation
With React Navigation

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:


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:

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:

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:

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:

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.

