React Native Top Tab Navigator

Last Updated : 12 Nov, 2021

To create a Top Tab Navigator, we need to use the createMaterialTopTabNavigator function available in the react-navigation library. It is designed with the material theme tab bar on the top of the screen. It allows switching between various tabs by tapping them or swiping horizontally. Default transition animations are available.

Props: In React Native the when components are created they must be customized according to the need that properties are called props.

initialRouteName: initialRouteName is the props that are used to route the name that is rendered on the initial load of the navigator.
screenOptions: screenOptions are the props in the React Native that are used as default options for the screens inside the navigator. The default option is used to apply all the screen navigators.
tabBarPosition: This type of prop is used to set the position of the tab bar in tab view with the default value being set on the ‘top’.
lazy: The lazy props are used to check whether the boolean value indicating whether the screens will be lazily rendered or not. By default, the screen is shown in the viewport experience.
lazyPlaceholder: The lazyPlaceholder props in React Native a function that returns a React element to be rendered for those routes that have not been rendered yet. By default, the render value is Null.
removeClippedSubviews: The removeClippedSubviewsa is used to improve the memory hierarchy. It takes the boolean value which indicates whether to remove invisible views from the view hierarchy.
keyboardDismissMode: This prop is used to take the string value which indicates whether the keyboard gets dismissed as a response to the drag gesture. The other values in keyboard Dismiss mode are auto,on-drag, none.
timingConfig: timingConfig the props timing a configuration object used for the timing animation, which occurs when tabs are pressed. The other properties of timingConfig are duration and number.
position: an animated value used to listen to the position updates. From time to time, it will change when the user presses the tabs.

Options: The options in React Native are used for configuration purposes. Configuration is executed when configuring the screens in the navigator.

title: The option title is generally used as a fallback for the headerTitle and tabBarLabel.
tabBarIcon: The tabBarIcon options return React.A node that is used to display in the tab bar section is color: string in reacts Native widget.
tabBarLabel:The tabBarLabel in the title string of a tab that is displayed in the tab bar section of the widget of the screen in React Native.
tabBarAccessibilityLabel: It is an options can be an accessibility label that is read by the screen reader when the user presses the tab.
tabBarTestID:The tabBarTestID option can be an ID used to locate this tab button in tests.

Events:

tabPress: the tabPress event set goes off when the user presses the current screen’s tab button in the tab bar section. By default, it is used when we scroll it to the top .
tabLongPress: the event which is fired when the user presses the current screen’s tab button in the tab bar for a long duration of a time .

Helpers:

jumpTo: The Helpers jumpTo is used to execute a function to navigate an existing screen in the tab navigator, which accepts names and params as its arguments, where name is string and params is an object .

Now let’s see how to create a Top Tab Navigator:

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 top-tab-navigator-demo
```
Step 3: Now go into your project folder i.e. top-tab-navigator-demo
```
cd top-tab-navigator-demo
```
Step 4: Install the required packages using the following command:

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

Project Structure: The project directory should look like the following:

Example:

Now, let’s set up our Top Tab Navigator in our App.js file. There will be 3 screens in our demo application: Home Screen, User Screen, and Settings Screen. Thus, we will have 3 tabs to navigate between these 3 screens.

Example: First, we will add our App.js file which will hold the Material Bottom Tab Navigator logic. Along with the basic information regarding the screen and label, we will also add icons and basic styles while setting it up.

App.js

import React from "react"; 
import { Ionicons } from "@expo/vector-icons"; 
import { createAppContainer } from "react-navigation"; 
import { createMaterialTopTabNavigator } from "react-navigation-tabs"; 
  
import ProfileScreen from "./screens/ProfileScreen"; 
import ImagesScreen from "./screens/ImagesScreen"; 
import VideoScreen from "./screens/VideosScreen"; 
  
const TabNavigator = createMaterialTopTabNavigator( 
  { 
    Profile: { 
      screen: ProfileScreen, 
      navigationOptions: { 
        tabBarLabel: "Profile", 
        showLabel: ({ focused }) => { 
          console.log(focused); 
          return focused ? true : false; 
        }, 
        tabBarIcon: (tabInfo) => ( 
          <Ionicons 
            name="ios-person-circle-outline"
            size={tabInfo.focused ? 25 : 20} 
            color={tabInfo.tintColor} 
          /> 
        ), 
      }, 
    }, 
    Images: { 
      screen: ImagesScreen, 
      navigationOptions: { 
        tabBarLabel: "Images", 
        tabBarIcon: (tabInfo) => ( 
          <Ionicons 
            name="ios-images-outline"
            size={tabInfo.focused ? 24 : 20} 
            color={tabInfo.tintColor} 
          /> 
        ), 
      }, 
    }, 
    Video: { 
      screen: VideoScreen, 
      navigationOptions: { 
        tabBarLabel: "Videos", 
        tabBarIcon: (tabInfo) => ( 
          <Ionicons 
            name="ios-videocam-outline"
            size={tabInfo.focused ? 25 : 20} 
            color={tabInfo.tintColor} 
          /> 
        ), 
      }, 
    }, 
  }, 
  { 
    tabBarOptions: { 
      showIcon: true, 
  
      style: { 
        backgroundColor: "#006600", 
        marginTop: 28, 
      }, 
    }, 
  } 
); 
  
const Navigator = createAppContainer(TabNavigator); 
  
export default function App() { 
  return ( 
    <Navigator> 
      <ProfileScreen /> 
    </Navigator> 
  ); 
} 

Profile.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: "#006600", fontSize: 40 }}>Profile Screen!</Text> 
      <Ionicons name="ios-person-circle-outline" size={80} color="#006600" /> 
    </View> 
  ); 
}; 
  
export default Profile; 

Images.js

import React from "react"; 
import { Text, View } from "react-native"; 
import { Ionicons } from "@expo/vector-icons"; 
  
const Images = () => { 
  return ( 
    <View style={{ flex: 1,  
                   alignItems: "center",  
                   justifyContent: "center" }}> 
      <Text style={{ color: "#006600", fontSize: 40 }}> 
        Images Screen! 
      </Text> 
      <Ionicons name="ios-images-outline" 
                size={80} color="#006600" /> 
    </View> 
  ); 
}; 
  
export default Images;

Videos.js

import React from "react"; 
import { Text, View } from "react-native"; 
import { Ionicons } from "@expo/vector-icons"; 
  
const Videos = () => { 
  return ( 
    <View style={{ flex: 1,  
                   alignItems: "center", 
                   justifyContent: "center" }}> 
      <Text style={{ color: "#006600", fontSize: 40 }}> 
         Videos Screen! 
      </Text> 
      <Ionicons name="ios-videocam-outline" 
                size={80} color="#006600" /> 
    </View> 
  ); 
}; 
  
export default Videos; 