Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

React Native Tab Navigation Component

  • Last Updated : 14 Jun, 2021

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :