How to create a Bottom Tab Navigator using react-navigation in React Native
Tags: reactnative, javascript, react
Published: 2023-02-09 10:10:42

Have you ever used a mobile application without a navigation tab? Chances are, the answer is no. Navigation tabs are crucial components in mobile applications, as they offer a straightforward and organized method for navigating through various sections. In the case of cross-platform mobile applications, such as React Native apps, navigation tabs can be developed using the react-navigation library. This library simplifies the creation of navigation tabs, resulting in navigation tabs that are both efficient and functional.

This article outlines a step-by-step guide on how to use the react-navigation library to create bottom tab navigation in React Native apps.

## **Prerequisite**

* Basic understanding of React Native.
    
* Node.js v14 or greater installed
    
* NPM v7 or greater installed
    
* A code editor (I’ll be using VS Code)
    
* A physical mobile device or emulator
    

## **Getting started with React Native**

React Native is a cross-platform framework for building mobile apps that can run on both iOS and Android. It allows developers to build fast-responsive apps using familiar technologies such as HTML, CSS, and JavaScript.

Think of React Native as building a house. Just like how you need different components, such as bricks, roofing sheets, doors, and paint, to build a physical house, you also need various prebuilt components in React Native to create your mobile app. These native components handle everything from basic tasks such as displaying text to complex features such as integrating maps and charts. As a result, React Native apps tend to have a more native look and feel compared to other cross-platform development frameworks that rely on web view to display a mobile app.

Thanks to React Native's wide range of customizable components and its large open-source community, which constantly contributes to its development. React Native has become an attractive option for developers and the go-to option for major companies such as Facebook, Airbnb, Tesla, and Uber.

## **What is react-navigation?**

React-Navigation is a third-party library of React Native that allows you to add to your application various navigation patterns such as stack navigation, drawer navigation, tab-based navigation, and more.

One of the best parts of React-Navigation is that it is written entirely in JavaScript, providing a single API for building navigation across both iOS and Android. This means that you don't have to worry about the different native navigation components for each individual platform, but instead, you can focus on the navigation logic and customization of your app.

The react-navigation library provides the ability to create a bottom tab navigation, which is a navigation pattern that allows users to quickly and easily access the major sections of your application through a series of icons with labels located at the bottom of the screen. Placing the tabs at the bottom of the screen, below the app's main content, makes the icons easily accessible with a simple thumb gesture. Each icon represents a different section of the application, and tapping on the icon navigates the user to that section.

Now that we've covered a basic overview of React Native and the react-navigation library, let's get started with building a bottom-tab navigation using the react-navigation library. Here is a quick outline of the process we will take:

1. Create project and install relevant libraries
2. Set up navigator screens  
3. Build bottom tab navigation component
4. Export component and run application
5. Customize the bottom tab navigation
    

Each of the processes has a series of steps you have to follow. Alright then, let's get started.

## **Create project and install relevant libraries**

### **Step 1: Requirements**

The easiest way to get started with building a React Native app is by using Expo Go. Expo is a powerful set of tools and services that make it easier to develop, test and deploy React Native apps on both iOS and Android devices.

To get started, we'll need the following:

* A recent version of Node.js installed on your computer. The latest version can be downloaded from the official website ([https://nodejs.org/](https://nodejs.org/)).
    
* A physical mobile device or an emulator with the Expo Go app installed from either the Google Play Store or the iOS App Store respectively.
    


### **Step 2: Install Expo Command Line Interface (CLI)**

The Expo CLI is required to create and run React Native projects, as it provides a set of tools and services for building, testing, and deploying applications. It also includes additional features such as live reloading and easy access to native APIs.

To install the `Expo CLI`, open your terminal and run the following command:

```javascript
npm install -g expo-cli
```


### **Step 3: Create a React Native Project**

In this step, we'll create a new React Native project using the Expo CLI we just installed.

1. To create a new project named “BottomTabApp”, run the following command in your terminal:
    
    ```javascript
    npx create-expo-app BottomTabApp
    ```
    
2. Once the project is created, change to the project directory by running the following command in the terminal:
    
    ```javascript
    cd BottomTabApp
    ```
    

Changing the directory enables you to run the command to start the development server for your React Native project in that specific project’s environment.


### **Step 4: Install the Required Packages**

In this step, we’ll install the required dependencies to ensure that your React Native project runs smoothly. These dependencies include `npm` packages and the `@react-navigation/bottom-tabs package`, which is required to add the bottom tab navigation to your project.

1. To install the `npm` packages, run the following command in your terminal:
    
    ```javascript
    npm install
    ```
    

2. To install the `@react-navigation/bottom-tabs` package, also run the following command in your terminal:
    
    ```javascript
    npm install @react-navigation/bottom-tabs
    ```
    

### **Step 5: Explore the Project Structure**

Your project directory structure should look like the following:


![Project Directory Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejlz6mhssdrzzoepdlln.png)


### **Step 6: Run the development server**

1. Finally, start the project server by running the following command:
    
    ```javascript
    npx expo start
    ```
    

2. After starting the development server, you will get the following output from your terminal.
    
  
![Terminal out](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3mxgasgxe5vt1tfoxa1q.png)
    
This confirms that you should now be able to preview the app on an emulator or physical device.
    

3. To view the app on your physical Android or iOS device:
    
 * Make sure the device is connected to the same network as your laptop.
        
 * For Android, open the Expo Go app and scan the QR code displayed in your terminal.
        
 * For iOS, use the default iOS camera app to scan the QR code in your terminal
        
    
    Alternatively, if you have an emulator installed on your laptop, you can view the app by:
    
    * Typing "a" if it's an Android emulator.
        
    * Typing "i" if it's an iOS emulator.
        

Expo Go will automatically reload when changes are made, so you can quickly see the results of your changes.


## **Set up navigator screens**

In the following steps, we will be creating and setting up the required screens for each of the tabs in our bottom tab navigation.


### **Step 7: Create tabs pages**

Within the `BottomTabApp` directory, create a new file for each tab you want in your app. In this example, we'll create three files: `Home.js`, `Settings.js`, and `Profile.js`. Once you have created these files, your new project directory structure should look like this:


![Project Directory Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3oeg4fsvp6n5qr9fgvk4.png)


### **Step 8: Import Page Components in Home.js:**

Import the required `React`, `View`, and `Text` components from the `react-native` library in the `Home.js` file. Importing these components allows you to construct the user interface for the screen.

```javascript
import React from 'react';
import { View, Text } from 'react-native';
```


### **Step 9: Create a functional component in Home.js**

Create a functional component named `Home` that returns a `View` component with `styles` to center both its horizontal and vertical alignments. Inside the `View`, place a `Text` component that displays the text "This is the Home Page".

Finally, export the component using the `export default` statement to make it available for use in other parts of the application.

```javascript
const Home = () => {
    return (
        <View style={{alignItems:'center', justifyContent:'center', flex:1}}>
            <Text>This is the Home Page</Text>
        </View>
    )
}

export default Home
```

### **Step 10: Import and create component in Settings.js**

In the `Settings.js` file, repeat the same process as in steps 8 and 9, but create a functional component named `Settings` with a `Text` component inside displaying the text "This is the Settings Page".

```javascript
import React from 'react'
import { View, Text } from 'react-native';


const Settings = () => {
    return (
        <View style={{alignItems:'center', justifyContent:'center', flex:1}}>
            <Text>This is the Settings Page</Text>
        </View>
    )
}

export default Settings
```

### **Step 11: Import and create components in Profil.js**

In the `Profile.js` file, repeat the same process as in steps 8 and 9, but create a functional component named `Profile` with a `Text` component inside displaying the text "This is the Profile Page".

```javascript
import React from 'react'
import { View, Text } from 'react-native';


const Profile = () => {
    return (
        <View style={{alignItems:'center', justifyContent:'center', flex:1}}>
            <Text>This is the Profile Page</Text>
        </View>
    )
}

export default Profile
```

## **Build bottom tab navigation component**

### **Step 12: Create the navigation page**

Within the `BottomTabApp` directory, create a new file to serve as the main navigation component for the app. This helps to keep the code organized and easier to maintain. The new file structure should now look like the following:


![File structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0n29m5u4nrvs0cdyvtan.png)

### **Step 13: Import the necessary libraries**

In the `BottomNavigation.js` file, import the required libraries including `React`, `createBottomTabNavigator`, `NavigationContainer`, and the `Home`, `Settings`, and `Profile` components created in previous steps.

```javascript
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import Home from './Home';
import Settings from './Settings';
import Profile from './Profile';
```

The `createBottomTabNavigator` creates a bottom tab navigation structure, while the `NavigationContainer` acts as a container for the navigation structure, providing the necessary context for the navigation to work.

### **Step 14: Define the bottom tab navigator function**

Create the bottom tab navigator using the `createBottomTabNavigator` function.

```javascript
const Tab = createBottomTabNavigator();
```

Using `const` instead of `function` is a matter of preference, but `const` is commonly used when defining variables that won't be changed throughout the program, while `function` is used for defining reusable blocks of code that return a value.

### **Step 15: Define and import screen components as constants**

In this step, we will define the individual screen components for the bottom tab navigator, which in our case includes the `HomeScreen`, `SettingsScreen`, and `ProfileScreen`. Each component returns a React component as its JSX expression: `Home`, `Settings`, and `Profile`, respectively. These components represent the UI for each of the different screens in your tab-based navigation system.

```javascript
const HomeScreen = () => {
  return <Home />;
};

const SettingsScreen= () => {
  return <Settings />;
};

const ProfileScreen= () => {
  return <Profile />;
}
```

### **Step 16: Create the Bottom Tab Screens Navigator**

Next, we will create a constant `App` component that will contain the bottom tab navigator, which is responsible for rendering the different screens (Home, Settings, and Profile) in the tab-based navigation system.

```javascript
const App = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
};
```

The `Tab.Navigator` component defines the bottom tab navigator. The `Tab.Screen` components define each of the individual screens. The `name` property specifies the name of the screen, and the `component` property specifies the React component that should be rendered for the screen.

### **Step 17:** Wrap App Component in Navigation Container and Export it as Default

Define the `BottomNavigation` component and export it as a React functional component. The component should returns a `NavigationContainer` component that wraps the `App` component defined in the previous code.

```javascript
export default BottomNavigation = () => {
  return (
    <NavigationContainer>
      <App />
    </NavigationContainer>
  );
};
```

The `NavigationContainer` component manages the navigation state and dispatches the navigation actions. While exporting `BottomNavigation` as the default component makes it easily importable in other parts of the application to render the bottom tab navigation system.

## Render component and run the application

### **Step 18: Import necessary libraries and components in App.js**

Open the `App.js` file, and import the required libraries and components including `React`, `View`, `StatusBar`, as well as the navigation component `BottomNavigation.`

```javascript
import React from 'react';
import { View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import BottomNavigation from './BottomNavigation';
```

Note: The `StatusBar` component from `expo-status-bar` is used to display the status bar of the device, which shows the battery level, network status, and other information.

### Step 19: Export App Component

Finally, in this step, the `App` component is defined as a default export function. The component returns a `View` component that takes up the full screen of the device and contains two nested components: `StatusBar` and `BottomNavigation` defined earlier.

```javascript
export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <StatusBar style="auto" />
      <BottomNavigation />
    </View>
  );
}
```

Congratulations! By following these steps, you have successfully created a bottom tab navigation using the react-navigation library for a React Native app. The end result should be a functional bottom tab navigation in your app that allows you to easily navigate between the different tabs or screens.

Outcome:


![BottomTab Navigation App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qm4kr6s6bs3ewrgkij7h.gif)

## **Customizing the bottom tab navigation**

Let’s go further and customize the tab. You can customize the tab by passing additional options to the `Tab.Screen` component in the `BottomNavigation.js` file.

### **Step 20: Change the active icon tint color**

Let’s change the default active icon color from blue to red. To achieve this, pass an object with `tabBarOptions` key to the `Tab.Navigator` component. The `tabBarOptions` object will then have an `activeTintColor` key with the desired color value.

```javascript
<Tab.Navigator
     tabBarOptions={{
       activeTintColor: 'red',
     }}>
       <Tab.Screen name="Home" component={HomeScreen} />
       <Tab.Screen name="Settings" component={SettingsScreen} />
       <Tab.Screen name="Profile" component={ProfileScreen} />
     </Tab.Navigator>
```

### **Step 22: Next, let’s customize the icons**

1. Import an icon library. For this example, we will be using the `Ionicons` library. The use of "Ionicons" is of personal preference. Other libraries such as the MaterialCommunityIcons library can also provide icons for your app.
    
    ```javascript
    import Ionicons from 'react-native-vector-icons/Ionicons'
    ```
    
2. Pass the icons using the `tabBarIcon` key in the `Tab.Screen` component for each of the screens. A list of available icons can be gotten from the [Ionic official website](https://ionic.io/ionicons/)
    
    ```javascript
    <Tab.Navigator
          tabBarOptions={{
            activeTintColor: 'red',
          }}
        >
          <Tab.Screen
            name="Home"
            component={HomeScreen}
            options={{
              headerShown: false,
              tabBarIcon: ({ color, size }) => (
                <Ionicons name="ios-home" color={color} size={size} />
              ),
            }}
          />
          <Tab.Screen
            name="Settings"
            component={SettingsScreen}
            options={{
              tabBarIcon: ({ color, size }) => (
                <Ionicons name="ios-settings" color={color} size={size} />
              ),
            }}
          />
          <Tab.Screen
            name="Profile"
            component={ProfileScreen}
            options={{
              tabBarIcon: ({ color, size }) => (
                <Ionicons name="ios-person" color={color} size={size} />
              ),
            }}
          />
    </Tab.Navigator>
    ```
    

##  **Congratulations once again!**
    
You have successfully customized the bottom tab navigation, changing the icon as well as its active tint color.
    
Output:

![Customized bottom tab navigator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nhqrkbusz4vtx6ew08b.gif)
    
  
    

## **Conclusion**

By following this step-by-step guide, we have successfully created a bottom tab navigation using the react-navigation library for React Native apps. You also learned how to customize the bottom tab navigation by changing the active tint color and adding icons to the tabs. The end result should be a functional bottom tab navigation system within your app, which allows for easy navigation between the different screens.

If you encounter any issues or errors, don't hesitate to refer back to the instructions and double-check your code. It's also a good idea to check the official documentation for the [react-navigation](https://reactnavigation.org/docs/getting-started/) library for additional information and resources.