React Native Tab Navigation Component

0 0 2 minutes read

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:

initialRouteName: It is the initial route that opens when the application loads.
order: It basically sets the order of the tabs.
paths: It controls the mapping of the route screen to path config.
lazy: If its value is true, then the tab is rendered when it becomes active for the first time. Its default value is true.
tabBarComponent: It is an optional prop. It overrides the component which is used as a tab bar.
tabBarOptions: It is an object of many properties like tabStyle , showLabel, showIcon, style, etc…

Now let’s start with the implementation:

Step 1: Open your terminal and install expo-cli by the following command.
```
npm install -g expo-cli
```
Step 2: Now create a project by the following command.
```
expo init myapp
```
Step 3: Now go into your project folder i.e. myapp
```
cd myapp
```
Step 4: Now install react-navigation into your project. React Navigation is used to navigate between one page to another. Install it by using the following command.
```
npm install @react-navigation/native
```
Step 5: Now install dependencies into your react-native project by using the following command.

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

Step 6: Now install bottom-tabs from react-navigation.
```
npm install @react-navigation/bottom-tabs
```

For React Tab Navigation: This can be used in React Native as well

https://reactnavigation.org/docs/tab-based-navigation/

Project Structure:

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> 
  ); 
}

Start the server by using the following command.

npm run android

Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.

Reference: https://reactnative.dev/docs/navigation#react-navigation

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!