Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Jul 8, 2024
Difficulty: Easy

React Native Create Material Top Tab Navigator

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction 

As the name suggests, a material top tab navigator is what we shall find on the top of the screen that lets us switch among various sections simply by tapping on the tabs provided. We can do this task by swiping the pages horizontally in many cases. While moving from one section to the other, we see animated transitions that are by default a part of the navigator.

To create a top tab navigator, we must use the createMaterialTopTabNavigator function available in the React navigation library. We design it using the Material Theme tab bar at the top of the screen. 

This discussion would have given you a brief idea about the top tab navigator. Let us now learn more about this topic and understand how we make it.

The React Navigation library's createMaterialTopTabNavigator function makes it easy to implement a top tab navigator. It provides the ability to build and display multi-screen routers. The tab screen component expands when it is focused. As discussed earlier, we can switch between different tabs by tapping or swiping horizontally on the top tab navigator. Standard transition animations are available. 

We can write the code as follows:

createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig);

Props in Top Tab Navigator

When we create a component in React Native, we need to adjust its properties according to us. The set of these properties is called props. Let us have a look at all such properties one by one.

  1. initialRouteName: The initialRouteName is a prop used to pass the name rendered when the navigator is first loaded.
  2.  screenOptions: screenOptions are React Native props that we use as the default options for navigator screens. We use the default options to implement all screen navigators.  
  3. tabBarPosition: This type of prop is used to set the position of the tab bar in the tab view. The default is "top."
  4.  Lazy: We use Lazy props to see if a Boolean value indicates if the screen is lazy. By default, we display the screen in the viewport experience.
  5. lazyPlaceholder:  lazyPlaceholder supports React Native functions that return React elements that we provide for routes that haven't been used yet. By default, the render value is zero.
  6. removeClippedSubviews:  We use removeClippedSubviewsa to improve the Memory Hierarchy. It takes a Boolean value that indicates whether We need to hide views from the view hierarchy. 
  7. KeyboardDismissMode: We use this property to get a string value that indicates whether to close the keyboard in response to a drag gesture. Other values ​​for keyboard release mode are automatic, on-drag, and none.
  8. timingConfig: timingConfig sets the timing of the configuration object used for the timing animation that occurs when we press the tab. The other properties of TimingConfig are duration and count. 
  9. Position: We use the animation value to listen for position updates. It changes from time to time when the user presses a tab.
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Events in Top Tab Navigator

The events in the top tab navigator define what happens when the user has access to the navigator button and is using it. Here are the two properties enlisted for it.

  1. tabPress: We put the tabPress event set in motion when the user presses the tab button on the current screen of the tab bar section. By default, we use it when scrolling up.
  2. tabLongPress: An event that occurs when the user presses the tab button on the current screen of the tab bar for a long time.

Helpers in Top Tab Navigator

jumpTo: The jumpTo helper is used to execute functions that navigate the existing screens of the tab navigator. This function takes a name and parameters as arguments. Where name is a string and params are objects.

Options in Top Tab Navigator

We use the  React Native option for configuration purposes. We perform the settings when you set the image in the navigator. 

  1. title: We typically use the title option as a fallback for header title and tabBarLabel.
  2. tabBarIcon: The tabBarIcon option returns React.A node.
  3. tabBarLabel: tabBarLabel of the tab title string displayed in the tab bar section of the widget on the  React Native screen.
  4. tabBarAccessibilityLabel: This option acts as an accessibility label that is read by screen readers when the user presses a tab. 
  5. tabBarTestID: The tabBarTestID option can be the ID used to find this tab button in the test. 

Making the Top Tab Navigator

Now, we shall learn how to make the top tab navigator. To do so, we have to follow the below-mentioned steps. The command for implementing each step is enlisted.

Step 1. Install expo-cli after opening your terminal. The command to be used is as follows:

Npm install -g expo-cli


Step 2. Create a project using  the command: 

expo init top-tab-navigator-demo


Step3. Go to the top-tab-navigator-demo folder 

cd top-tab-navigator-demo


Step4. Install the packages required by you.

npm install-save react-navigation react-naviagtion-tabs react-native-paper                                 
react-native-vector-icons

Example Application

Let us now understand how we shall do a project after following the steps.

We’ll put the following code in App.js file

App.js

{
  "expo": {
    "name": "spontaneous-milkshake",
    "slug": "snack-70101921-0ae3-4a9a-a37d-72c64f9ccdfe",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

 

We’ll make a screens folder in which we will keep three screens namely ImageScreen, ProfileScreen  and VideoScreen.


ProfileScreen.js

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";


const Profile = () => {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text style={{ color: "#FFA500", fontSize: 40 }}>Hey I am Ninja 1</Text>
<Ionicons name="ios-person-circle-outline" size={80} color="#FFA500" />
</View>
);
};


export default Profile;


ImageScreen.js

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";


const Profile = () => {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text style={{ color: "#FFA500", fontSize: 40 }}>Hey I am Ninja 2</Text>
<Ionicons name="ios-person-circle-outline" size={80} color="#FFA500" />
</View>
);
};


export default Profile;


VideoScreen.js

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";


const Profile = () => {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text style={{ color: "#FFA500", fontSize: 40 }}>Hey I am Ninja 3</Text>
<Ionicons name="ios-person-circle-outline" size={80} color="#FFA500" />
</View>
);
};

export default Profile

Output:


Click on the following link to read further: Hooks in React JS

Also see,  React Native Reanimated

Frequently Asked Questions

In which library is the createMaterialTopTabNavigator function available?

The createMaterialTopTabNavigator function is available in the React-navigation library to create a top tab navigator.

What are props in react native?

The set of properties that we have defined for any component in react-native is called props. 

Conclusion

In this article, we have extensively discussed the createMaterialTopTabNavigator in React Native. We hope that this blog has helped you enhance your knowledge regarding the create material top navigator bar to learn more, check out our other article on Dart Operators.

And also, check out the awesome content on the Coding Ninjas Website,
Android DevelopmentCoding Ninjas Studio ProblemsCoding Ninjas Studio Interview BundleCoding Ninjas Studio Interview ExperiencesCoding Ninjas CoursesCoding Ninjas Studio Contests, and Coding Ninjas Studio Test SeriesDo upvote our blog to help other ninjas grow.

 Happy Coding!

 

Topics covered
1.
Introduction 
2.
Props in Top Tab Navigator
3.
Events in Top Tab Navigator
4.
Helpers in Top Tab Navigator
5.
Options in Top Tab Navigator
6.
Making the Top Tab Navigator
7.
Example Application
8.
Frequently Asked Questions
8.1.
In which library is the createMaterialTopTabNavigator function available?
8.2.
What are props in react native?
9.
Conclusion