Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
React Native Tab Navigation
2.1.
Props of Tab Navigation
2.2.
Example
3.
Frequently Asked Questions
3.1.
What is the use of react-navigation?
3.2.
What is the purpose of the initialRouteName prop?
3.3.
What will happen if you set the value of lazy prop to false?
4.
Conclusion 
Last Updated: Mar 27, 2024
Easy

React Native Tab Navigation

Author Pradeep Kumar
0 upvote
Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

In this blog, we will look into React Native Tab Navigation. The most often used navigation style in mobile apps is React Native Tab Navigation. Tab Navigation can be found at the bottom of the screen, above the header, or as a header. It is used to change between route screens.

If you are new to React Native and are yet to set up your environment for the language, you can check out this React Native Development.

React Native Tab Navigation

It is the most commonly used tab navigation style to switch between different routes on the same screen. We will utilize the createBottomTabNavigator component to implement tab navigation. It is primarily used to go from one page to the next. 

Props of Tab Navigation

  • order: It determines the order in which the tabs will be placed.
  • lazy: When set to true, the tab is rendered when it is first activated. The default value of lazy is set to true.
  • paths: It determines how the route screen is mapped to the path configuration.
  • tabBarComponent: It is an optional prop that overrides the tab bar component.
  • tabBarOptions: It is a collection of properties such as tabStyle, style, showLabel, etc.

Example

Now that we have learned what Tab Navigation is, let's see the implementation of the same with the help of an example.

To run the program, you first need to install expo-cli.

npm install -g expo-cli

Now create a new project using the following command:

expo init tabNavigationApp

Now go to the project directory.

cd tabNavigationApp

Add react-navigation to your project now. Use the following command to install it:

npm install @react-navigation/native

To run the react native tab navigation, install the following dependencies:

npm install react-native-screens react-native-gesture-handler react-native-safe-area-context react-native-reanimated @react-native-community/masked-view

Now install the bottom-tabs library using the following command:

npm install @react-navigation/bottom-tabs

We will build an application with two tabs, the Main tab and an additional tab in this example. The Main tab contains the text "Hello Ninjas!" and the second tab contains the text "Welcome to Coding Ninjas". Some CSS styles have also been added to the text on both tabs to make the text look better. The code for the App.js file is as follows:

App.js

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
/*
This application has two tabs: the main tab and an auxiliary tab. The words "Hello Ninjas!" appears on the main tab, and "Welcome to Coding Ninjas" appears on the second tab. To improve the text look on both tabs, certain CSS styles have been applied.
*/

/*This is the function for the Main Tab
It contains the text that is to be displayed on the screen and its respective styling.
The text has a font size of 40 and is of Orange Color. These styles can be modified as per your requirements.

The text is wrapped inside a view with styles as the center for both justify-content and align-items. This has been done to locate the text in the center from horizontal and vertical positions.
*/
function Main() {
return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
  <Text style = {{fontSize: 40, color: 'orange'}}>Hello Ninjas!</Text>
  </View>
);
}
 
/*This is the function for the Tab2
It contains the text that is to be displayed on the screen and its respective styling.
The text has a font size of 25 and is of black color. These styles can be modified as per your requirements.
*/
function Tab2() {
return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  <Text style = {{fontSize: 25, color: 'black'}}>Welcome to Coding Ninjas</Text>
  </View>
);
}
 
// Initialising the bottom tab navigator
const Tab = createBottomTabNavigator();
 
// Set the initial Route to the Main Tab
export default function App() {
return (
  <NavigationContainer >
  <Tab.Navigator initialRouteName={Main} >
    <Tab.Screen name="Main" component={Main} />
    <Tab.Screen name="Tab2" component={Tab2} />
  </Tab.Navigator>
  </NavigationContainer>
);
}

Output:                          

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Frequently Asked Questions

What is the use of react-navigation?

React Navigation is used to go from one page to the next. 

What is the purpose of the initialRouteName prop?

As the name suggests, it gives the default route that is opened when the page loads.

What will happen if you set the value of lazy prop to false?

Upon setting the value of lazy prop to false, all the tabs are rendered immediately.

Conclusion 

In this article, we have extensively discussed React Native Tab NavigationWe hope that this blog has helped you enhance your knowledge regarding React Native Tab Navigation, and to learn more, check out our other article on React Native SwitchAnd also, check out the awesome content on the Coding Ninjas Website,
Android DevelopmentCoding Ninjas Studio ProblemsCoding Ninjas Studio Interview BundleCoding Ninjas Studio Interview ExperiencesCoding Ninjas CoursesCoding Ninjas Studio Contests, and Coding Ninjas Studio Test SeriesDo upvote our blog to help other ninjas grow. Happy Coding!

Live masterclass