React Native Create Material Top Tab Navigator

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 Development, Coding Ninjas Studio Problems, Coding Ninjas Studio Interview Bundle, Coding Ninjas Studio Interview Experiences, Coding Ninjas Courses, Coding Ninjas Studio Contests, and Coding Ninjas Studio Test Series. Do upvote our blog to help other ninjas grow.

 Happy Coding!