React Native Tab Navigation Component

In this article, we are going to see how to implement Tab Navigation in react-native. For this, we are going to use createBottomTabNavigator component. It is basically used for navigation from one page to another. These days mobile apps are made up of a single screen, so create various navigation components in React Native. We want to use React Navigation.

Syntax:

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

Props in Tab Navigation:

Now let’s start with the implementation.

Step-by-Step Implementation

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

Then, the application will display a QR code.

• For the Android users,
  • For the Android Emulator, press "a" as mentioned in the image below.
  • For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
• For iOS users, simply scan the QR code using the Camera app.
• If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Working with App.js

Example: Now let's implement Tab Navigation.

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';

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:

• Image:

• Video: