How to Add Icons at the Bottom of Tab Navigation in React Native ?

13 Jul, 2021
Adding Icons at the Bottom of Tab Navigation in React Native is a fairly easy task. In this article, we will implement a basic application to learn to use icons in our tab navigation. For this, we first need to set up the application and install some packages.
Implementation: Now let’s start with the implementation:
Step 1: Open your terminal and install expo-cli by the following command.npm install -g expo-cli
Step 1: Open your terminal and install expo-cli by the following command.
npm install -g expo-cli
Step 2: Now create a project by the following command.expo init tab-navigation-icons
Step 2: Now create a project by the following command.
expo init tab-navigation-icons
 
Step 3: Now go into your project folder i.e. tab-navigation-iconscd tab-navigation-icons
Step 3: Now go into your project folder i.e. tab-navigation-icons
cd tab-navigation-icons
Step 4: Install the required packages using the following command:
npm install --save react-navigation react-native-gesture-handler 
npm install --save react-native-vector-icons  
Project Structure: It will look like the following.
Example: Now, let’s set up the Tab Navigator and add icons, along with some basic CSS styles to make the icons look presentable. There will be 3 screens in our demo application, namely- Home Screen, User Screen, and Settings Screen. Thus, we will have 3 tabs to navigate between these 3 screens, with our Home Screen being the default Screen.
App.js
import React from "react";import { Ionicons } from "@expo/vector-icons";import { createAppContainer } from "react-navigation";import { createBottomTabNavigator } from "react-navigation-tabs";  import HomeScreen from "./screens/HomeScreen";import UserScreen from "./screens/UserScreen";import SettingScreen from "./screens/SettingScreen";  const TabNavigator = createBottomTabNavigator({  Home: {    screen: HomeScreen,    navigationOptions: {      tabBarLabel: "Home",      tabBarOptions: {        activeTintColor: "#006600",      },      tabBarIcon: (tabInfo) => {        return (          <Ionicons            name="md-home"            size={24}            color={tabInfo.focused ? "#006600" : "#8e8e93"}          />        );      },    },  },  User: {    screen: UserScreen,    navigationOptions: {      tabBarLabel: "User",      tabBarOptions: {        activeTintColor: "#006600",      },      tabBarIcon: (tabInfo) => {        return (          <Ionicons            name="md-person-circle-outline"            size={24}            color={tabInfo.focused ? "#006600" : "#8e8e93"}          />        );      },    },  },  Setting: {    screen: SettingScreen,    navigationOptions: {      tabBarLabel: "Setting",      tabBarOptions: {        activeTintColor: "#006600",      },      tabBarIcon: (tabInfo) => {        return (          <Ionicons            name="md-settings-outline"            size={24}            color={tabInfo.focused ? "#006600" : "#8e8e93"}          />        );      },    },  },});  const Navigator = createAppContainer(TabNavigator);  export default function App() {  return (    <Navigator>      <HomeScreen />    </Navigator>  );}
The above code contains the logic for our Tab Navigator with icons at the Bottom of Tab Navigation. Now, we need the screens we need to navigate to.
HomeScreen.js
import React from "react";import { Text, View } from "react-native";import { Ionicons } from "@expo/vector-icons";  const Home = () => {  return (    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>      <Text style={{ color: "#006600", fontSize: 40 }}>Home Screen!</Text>      <Ionicons name="md-home" size={80} color="#006600" />    </View>  );};  export default Home;
UserScreen
import React from "react";import { Text, View } from "react-native";import { Ionicons } from "@expo/vector-icons";  const User = () => {  return (    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>      <Text style={{ color: "#006600", fontSize: 40 }}>User Screen!</Text>      <Ionicons name="md-person-circle-outline" size={80} color="#006600" />    </View>  );};  export default User;
SettingsScreen.js
import React from "react";import { Text, View } from "react-native";import { Ionicons } from "@expo/vector-icons";  const Settings = () => {  return (    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>      <Text style={{ color: "#006600", fontSize: 40 }}>Settings Screen!</Text>      <Ionicons name="md-settings-outline" size={80} color="#006600" />    </View>  );};  export default Settings;
Start the server by using the following command.
npm run android
Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.
Reference: https://reactnavigation.org/docs/tab-based-navigation/
Picked
React-Native
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
REST API (Introduction)
Difference Between PUT and PATCH Request
ReactJS | Router
How to float three div side by side using CSS?
Design a Tribute Page using HTML & CSS
Roadmap to Learn JavaScript For Beginners