How to create tabs with React Navigation v5 + BONUS

In this tutorial, we will be walking through setup of the React Navigation, Bottom Tab Navigator, adding nice icons etc.

So let’s start with the basics, if you already created a project, first step will be to add react navigation to the bare project, otherwise use the command line below to create a new project.

Step 1. Create bare React Native project

Open terminal in the working directory and run

npx react-native init ReactNativeTabs

Step 2. Install required dependencies

After creating a project, we need to add react navigation to it. In this case we will use yarn, but feel free to use npm also.

yarn add @react-navigation/native

And react navigation is added, but there are some dependencies we also need to add it inside our projects in order to get everything working properly.

So let’s do it.

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

The libraries we’ve installed so far are the building blocks and shared foundations for navigators, and each navigator in React Navigation lives in its own library.

So far what we have installed is the foundation for navigation using React Navigation. However, in order to start using tabs we will need to install other navigators depending on how we want to navigate (tabs in our case).

Step 3. Add tabs from React Navigation

There are 3 common navigators you can use it.

  1. Stack Navigator
  2. Drawer Navigator (As the name suggests, it provides a navigation drawer navigator)
  3. BottomTabs (Provides bottom tabbed navigation).

We need to add BottomTabs in our projects, so let’s add it.

yarn add @react-navigation/bottom-tabs

If you are on Mac and developing iOS app, you need to install the pods (via Cocoapods) to complete the linking.

npx pod-install ios

Step 4. Building our tabs navigation

Let’s get started by creating a structure for our tabs navigation.

mkdir src && cd srcmkdir navigation screens cd navigation && touch TabsNavigator.jscd .. && cd screens && touch Home.js  Profile.js Contacts.js

Next step is to open our App.js and add the following code to create a tab navigator.

import * as React from 'react';
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import TabsNavigator from './src/navigation/TabsNavigator.js';
const App = () => {
return (
<NavigationContainer>
<TabsNavigator />
</NavigationContainer>
);
};
export default App;

Be sure to wrap your navigator with NavigationContainer. Next is to define TabsNavigator.js and our screens.

import * as React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Home from '../screens/Home';
import Profile from '../screens/Profile';
import Contacts from '../screens/Contacts';
const Tab = createBottomTabNavigator();const TabsNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Profile" component={Profile} />
<Tab.Screen name="Contacts" component={Contacts} />
</Tab.Navigator>
);
};
export default TabsNavigator;

And that’s it, you can re-run your app and it works! If you follow our directions, you will get example like this.

BONUS: Add icons for each tab

To add icons to the Tab Navigator bar, we are going to use the library: react-native-vector-icons. Full list of fonts you can find here.

First, let’s install the package:

yarn add react-native-vector-icons

Again, if you are using CocoaPods, run:

npx pod-install

If you are getting this error Unrecognized font family “Feather”, you need to run line below:

react-native link

Still getting the error? If it’s this one “warning: duplicate output file”, follow the step below the image.

  1. Open your project.xcworkspace with Xcode
  2. Click on your project
  3. Open “Build Phases”
  4. Toggle “Copy Bundle Resources” and delete all .ttf files

Re-run the app and voila.

Installation is done, let’s use it. We will use Feather fonts, and to import it in our app, we need to use this:

import Icon from 'react-native-vector-icons/Feather';

To add in our navigator, navigate to TabsNavigator.js and add it like this:

<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({color}) => <Icon name="home" color={color} size={22} />,
}}
/>

In options, we provided tabBarIcon which returns Icon component where we define name, color, size.

That’s it guys, here is the result.

--

--

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