Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to add icon and image in you react navigation bottom tabs, here we are using React navigation 6.

Want React Navigation stack and bottom tabs combine example?

https://infinitbility.github.io/how-to-create-stack-navigation-with-tab-navigation-in-react-navigation

Let start today tutorial How to add icon in bottom tab navigation react native?

BottomTabNavigator with image

First, we will see how can we use in react navigation bottom tabs.

import React from "react";
import { Image } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import { HomeStackNavigator, ContactStackNavigator } from "./StackNavigator";

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
    return (
        <Tab.Navigator screenOptions={{ headerShown: false }}>
            <Tab.Screen
                name="Home"
                component={HomeStackNavigator}
                options={{
                    tabBarIcon: () => (<Image source={require("./../assets/icons/home-outline-svg.png")} style={{width: 20, height: 20}} />)
                }}
                 />
            <Tab.Screen 
                name="Contact" 
                component={ContactStackNavigator}
                options={{
                    tabBarIcon: () => (<Image source={require("./../assets/icons/people-outline-svg.png")} style={{width: 20, height: 20}} />)
                }}
            />
        </Tab.Navigator>
    );
};

export default BottomTabNavigator;

BottomTabNavigator with react-native-vector-icons

Want use icons in react navigation bottom tabs then first you have to install react-native-vector-icons package.

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Icon from 'react-native-vector-icons/FontAwesome';

import { HomeStackNavigator, ContactStackNavigator } from "./StackNavigator";

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
    return (
        <Tab.Navigator screenOptions={{ headerShown: false }}>
            <Tab.Screen
                name="Home"
                component={HomeStackNavigator}
                options={{
                    tabBarIcon: ({size, color}) => (<Icon name={"Home"} color={color} size={size} />)
                }}
            />
            <Tab.Screen 
                name="Contact" 
                component={ContactStackNavigator}
                options={{
                    tabBarIcon: ({size, color}) => (<Icon name={"User"} color={color} size={size} />)
                }}
            />
        </Tab.Navigator>
    );
};

export default BottomTabNavigator;

Thanks for reading…