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

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

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.

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/