Javatpoint Logo
Javatpoint Logo

React Native Top Tab Navigator
(createMaterialTopTabNavigator)

The material style createMaterialTopTabNavigator is used to create tab navigator on the top of the screen. It provides functionality to create and display multiple screens routers. These screens are switches between each other by tapping route or swiping horizontally. The tab screen components are mounted when they are focused.

The createMaterialTopTabNavigator function of react-navigation library facilitates us to implement top tab navigator.

React Native Top Tab Navigator Example

Let's create a top tab navigator with custom status bar and header section. In this example, we will create three different screens for "Home", "Profile" and "Settings" router. Each router screens are created in separate files.

React Native Top Tab Navigator

The directory structure of the application

Create a src directory in your route project. Inside the src directory create index.js file and two other directories lib and screens. In the screens directory, we place three screens file index.js (HomeScreen), profile.js (ProfileScreen), and settings.js (SettingsScreen). In the lib directory, we implement createMaterialTopTabNavigator to create top tab navigator.

React Native Top Tab Navigator

topNavigation/index.js

Make the few changes in the topNavigation/index.js file (replace './App' with './src').

Create the classes and import Icon from 'react-native-vector-icons/Ionicons' package. Implement tabBarIcon and add Icon tag in it.

src/screens/index.js

src/screens/profile.js

src/screens/settings.js

src/lib/router.js

In router.js file, import createMaterialTopTabNavigator and createAppContainer functions of 'react-navigation' library. Also import all the routers classes in it and place them in such sequence as we want to display them on the top of tab navigator.

  • activeTintColor: sets the mention color to the active router.
  • showIcon: show {true} and hide {false} the icon of routers.
  • showLabel: show {true} and hide {false} the title of routers. By default it is true.

src/index.js

Import AppNavigator from './lib/router' and assign the AppNavigator in a const AppIndex in this file. Customize the status bar using StatusBar tag and add header on the top of tab navigator.

Output:

React Native Top Tab Navigator




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA