React Native Tab Navigation Component

The Tab Navigation component in React Native allows users to move between different screens using a tab-based interface. It helps organize multiple views in a clean and user-friendly way.

• Displays multiple screens where each screen is represented by a separate tab.
• Allows users to switch between screens without leaving the current navigation flow.
• Supports both top tab and bottom tab layouts depending on design needs.
• Improves app usability by providing quick and clear navigation options.

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { NavigationContainer } from '@react-navigation/native';

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

• Creates a top tab navigator for switching between screens.
• Each Tab.Screen represents one selectable tab view.

Syntax:

1. Top Tab Navigator: Tabs appear at the top of the screen, often used for categorized or swipeable content.

const Tab = createMaterialTopTabNavigator();
<Tab.Navigator >
    <Tab.Screen/> 
</Tab.Navigator>

2. Bottom Tab Navigator: Tabs appear at the bottom of the screen, commonly used for main app navigation.

const Tab = createBottomTabNavigator();
<Tab.Navigator >
   <Tab.Screen/>
</Tab.Navigator>

Props for Tab Navigation Component

These props control how the top tab navigation behaves, loads screens, and displays the tab bar.

• initialRouteName: Sets the first tab that opens when the app loads.
• order: Defines the sequence in which the tabs appear.: Maps route screens to specific URL paths.
• lazy: Loads a tab only when it is opened for the first time.
• tabBarComponent: Allows replacing the default tab bar with a custom one.
• tabBarOptions: Contains styling and display settings for the tab bar.

Implementing Tab Navigation Component

It involves configuring multiple screens to be displayed and switched using tabs in a React Native navigation setup.

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

This will launch the Expo DevTools and display a QR code in the terminal and browser.

How to run the app:

• Android Emulator: Press a in the terminal to open the app in the Android emulator.
• Android Physical Device: Install Expo Go from the Play Store, open it, tap Scan QR Code, and scan the QR code to run the app.
• iOS Device: Open the Camera app and scan the QR code to launch the app.
• Web Browser: Click the localhost link shown in the terminal or browser to run the app in the web.

Step 3: Working with App.js

Now let's implement Tab Navigation in App.js file.

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } 
         from '@react-navigation/native';
import { createBottomTabNavigator } 
         from '@react-navigation/bottom-tabs';

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

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

function Notification() {
  return (
    <View style={{ flex: 1, justifyContent: 'center',
                   alignItems: 'center'}}>
      <Text>Notifications!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer >
      <Tab.Navigator initialRouteName={Home} >
        <Tab.Screen name="Home" component={Home}  />
        <Tab.Screen name="Notifications" 
                    component={Notification} />
        <Tab.Screen name="Settings" component={Setting} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Output: