Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Adding Icons to the Navbar
2.1.
Example Application
3.
Frequently Asked Questions
3.1.
What is the purpose of React Native Vector Icons?
3.2.
Are icons customizable?
3.3.
How can we use icons as buttons?
4.
Conclusion 
Last Updated: Mar 27, 2024

React Native Icons at Bottom Tab Navigation

Author Pradeep Kumar
1 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

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 navigationIcons 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

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Frequently Asked Questions

What is the purpose of React Native Vector Icons?

React Native Vector Icons are quite popular icons that are perfect for buttons, tab bar icons, etc. They are easy to extend and style.

Are icons customizable?

Yes, you can customize an icon according to your requirements. Properties such as color,  size, background color, border property, etc., can be modified to make the icon look more interactive. 

How can we use icons as buttons?

Icon.button is used for making icons that can be used as buttons. The onPress property of an Icon.button can be used to indicate what should happen when a button is pressed.

Conclusion 

In this article, we have extensively discussed how to add Icons to Bottom Tab NavigatorWe hope that this blog has helped you enhance your knowledge regarding creating and adding icons to the navbar; to learn more, check out our other article on React Native SwitchAnd also, check out the awesome content on the Coding Ninjas Website,
Android DevelopmentCoding Ninjas Studio ProblemsCoding Ninjas Studio Interview BundleCoding Ninjas Studio Interview ExperiencesCoding Ninjas CoursesCoding Ninjas Studio Contests, and Coding Ninjas Studio Test Series. Do upvote our blog to help other ninjas grow. 
Happy Coding!

Previous article
React Native Tab Navigation
Next article
React-native-safe-area-context
Live masterclass