React-Native Adding Icons at Bottom of Tab Navigation

Syntax

The bottom tab navigation in React-Native can be customized with icons as follows:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused ? 'home-sharp' : 'home-outline';
          } else if (route.name === 'Settings') {
            iconName = focused ? 'settings-sharp' : 'settings-outline';
          }

          // You can return any component that you like here!
          return <Ionicons name={iconName} size={size} color={color} />;
        },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Example

import React from 'react';
import { View, Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings Screen</Text>
    </View>
  );
}

export default function App() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused ? 'home-sharp' : 'home-outline';
          } else if (route.name === 'Settings') {
            iconName = focused ? 'settings-sharp' : 'settings-outline';
          }

          // You can return any component that you like here!
          return <Ionicons name={iconName} size={size} color={color} />;
        },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Output

The output of this code will be a bottom tab navigation with icons for Home and Settings screens.

Explanation

We are using the createBottomTabNavigator from @react-navigation/bottom-tabs to create a bottom tab navigation. We are then using the tabBarIcon option in the screenOptions prop to customize the icon for each route. Here, we are using the Ionicons library from @expo/vector-icons to display the icons.

In the screenOptions method, we are checking the route.name to determine which icon to display. We are passing the iconName, size, and color to the Ionicons component as props.

Use

The bottom tab navigation with icons is a common UI pattern in mobile applications. Using icons can make it easier for users to quickly navigate to the screen they want.

Important Points

• Make sure to install the @react-navigation/bottom-tabs and @expo/vector-icons packages to use this feature.
• The tabBarIcon option is optional. If no icon is provided, a default icon will be displayed.

Summary

In this article, we learned how to add icons to the bottom tab navigation in React-Native using the tabBarIcon option in createBottomTabNavigator. This can help make our mobile applications more user-friendly and easier to navigate.