Navigate back to the homepage

How to add icon in bottom tab navigation react native?

Infinitbility
React Native, React Navigation
November 12th, 2021 · 1 min read
How to add icon in bottom tab navigation react native?

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

1import React from "react";
2import { Image } from "react-native";
3import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
4
5import { HomeStackNavigator, ContactStackNavigator } from "./StackNavigator";
6
7const Tab = createBottomTabNavigator();
8
9const BottomTabNavigator = () => {
10 return (
11 <Tab.Navigator screenOptions={{ headerShown: false }}>
12 <Tab.Screen
13 name="Home"
14 component={HomeStackNavigator}
15 options={{
16 tabBarIcon: () => (<Image source={require("./../assets/icons/home-outline-svg.png")} style={{width: 20, height: 20}} />)
17 }}
18 />
19 <Tab.Screen
20 name="Contact"
21 component={ContactStackNavigator}
22 options={{
23 tabBarIcon: () => (<Image source={require("./../assets/icons/people-outline-svg.png")} style={{width: 20, height: 20}} />)
24 }}
25 />
26 </Tab.Navigator>
27 );
28};
29
30export 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.

1import React from "react";
2import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
3import Icon from 'react-native-vector-icons/FontAwesome';
4
5import { HomeStackNavigator, ContactStackNavigator } from "./StackNavigator";
6
7const Tab = createBottomTabNavigator();
8
9const BottomTabNavigator = () => {
10 return (
11 <Tab.Navigator screenOptions={{ headerShown: false }}>
12 <Tab.Screen
13 name="Home"
14 component={HomeStackNavigator}
15 options={{
16 tabBarIcon: ({size, color}) => (<Icon name={"Home"} color={color} size={size} />)
17 }}
18 />
19 <Tab.Screen
20 name="Contact"
21 component={ContactStackNavigator}
22 options={{
23 tabBarIcon: ({size, color}) => (<Icon name={"User"} color={color} size={size} />)
24 }}
25 />
26 </Tab.Navigator>
27 );
28};
29
30export default BottomTabNavigator;

Thanks for reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to remove back button in react navigation?

How to remove back button in react navigation?

React Navigation remove back button from stack mavigation screen example.

November 11th, 2021 · 1 min read
How to create stack navigation with tab navigation in react navigation?

How to create stack navigation with tab navigation in react navigation?

Stack navigator with tab navigator in react navigation example

November 10th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]