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: