React Native Icons at Bottom Tab Navigation

Introduction

In this blog, we will see how to add icons at the bottom of tab navigation. Adding icons creates a better and more interactive user interface. Icons can be added using the React Native Vector Icons library. In the next section, we will look at how icons can be used in the navigation bar to make the UI feel richer.

If you are new to React Native and are yet to set up your environment for the language, you can check out this React Native Development.

Adding Icons to the Navbar

In this section, we will see how to add icons at the bottom of tab navigation. Icons make the application look more user-friendly and interactive. Besides the navigation bar, Icons can be used with buttons, logos, etc. 

Now we will look at an example explaining how icons can be added to the navigation bar. We will be using bottom tab navigation to create the navigator, so if you are not familiar with a bottom tab navigation, I suggest reading this article before moving forward. 

Before writing the application, follow the below steps to create a new project and add the necessary libraries to your program. 

Step 1: To run the program, you first need to install expo-cli.

npm install -g expo-cli

Step 2: Now create a new project using the following command:

expo init tabNavigationApp

Step 3: Now go to the project directory.

cd tabNavigationApp

Step 4: Add react-navigation to your project now. Use the following command to install it:

npm install @react-navigation/native

Step 5: Now install the following packages, using the command:

npm install --save react-navigation react-navigation-tabs react-native-gesture-handler react-native-reanimated react-native-screens react-native-vector-icons  

Step 6: Now install the bottom-tabs library using the following command:

npm install @react-navigation/bottom-tabs

Example Application

We'll now build up the Tab Navigator and add icons, as well as some basic CSS styles to make the icons look more appealing. Our example program will have two screens: a Home Screen and a Profile Screen. As a result, we'll have two tabs to switch between these two panels. The Home screen is the default screen.

Create a new folder in the root directory named "pages." And inside this folder, make a new file (HomePage.js) and add the following code inside the file.

HomePage.js

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";

// This the function for Home Page
// It contains the text that is to be displayed on the screen and their respective styling.
const Home = () => {
return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  <Text style = {{fontSize: 40, color: 'orange'}}>Hello Ninjas!</Text>
  <Text style = {{fontSize: 25, color: 'black'}}>Welcome to Coding Ninjas</Text>
  </View>
);
};

// exporting home page
export default Home;

Create one more file (ProfilePage.js) inside the pages folder, and paste the below code inside the file.

ProfilePage.js

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";

// This the function for Profile Page
// It contains the text that will be displayed on the screen as well as the styling for that content.
const Profile = () => {
return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  <Text style = {{fontSize: 40, color: 'orange'}}>Profile Page</Text>
  </View>
);
};

// exporting profile
export default Profile;

Now paste the below code inside the App.js file. This code contains the logic for adding a navigator and icons to the tabs.

App.js

// Importing react
import React from "react";
// Import Iconicons, which will be used to display the icons
import { Ionicons } from "@expo/vector-icons";
import { createAppContainer } from "react-navigation";
// Importing bottom tab navigator from react-navigation-tabs
import { createBottomTabNavigator } from "react-navigation-tabs";

// Import Home Page and Profile Page
import HomePage from "./pages/HomePage";
import ProfilePage from "./pages/ProfilePage";

// Creating a tab navigator and adding two tabs
const TabNavigator = createBottomTabNavigator({
// Home Tab
Home: {
  screen: HomePage, // here the screen is the HomePage
  navigationOptions: {
  tabBarLabel: "Home", // lablel of the tab
  tabBarIcon: () => { // Setting icon of the tab
    return (
    <Ionicons name="md-home" size={28} color = "#344953"/>
    );
  },
  },
},

// Profile Tab
Profile: {
  screen: ProfilePage, // use Profile Page as the screen
  navigationOptions: {
  tabBarLabel: "Profile", // set label of tab to "Profile"
  tabBarIcon: () => { // setting the icon of the tab
    return (
    <Ionicons name="md-person" size={28} color = "#344953" />
    );
  },
  },
},
});

// creating navigator
const Navigator = createAppContainer(TabNavigator);

// Default Function App
export default function App() {
return (
  <Navigator> <HomePage /> </Navigator>
);
}

Output:

Click on the following link to read further: Hooks in React JS