Material Top Tabs
- React Native course
- Intermediate
- Lesson 50/116
- 5 min
Learn the Material Top Tabs navigator.
Material Top Tabs
Material Top Tabs is a navigation pattern that shows tabs at the top of the screen. Like WhatsApp's "Chats / Status / Calls" tabs. The user taps a tab or swipes with a finger.
React Navigation provides this through createMaterialTopTabNavigator. The usage is similar to Bottom Tabs: const Tab = createMaterialTopTabNavigator();, then <Tab.Navigator><Tab.Screen ... /></Tab.Navigator>. The difference is that tabs appear at the top and the user can swipe between them. This pattern fits categorized content: an activity feed with "All / Likes / Comments" tabs for example. The tab bar is customizable: color, active tab color, indicator style. Material Top Tabs gives a structure that makes the swipe feel natural on mobile.
Practice Write Material Top Tabs
Import createMaterialTopTabNavigator from @react-navigation/material-top-tabs and assign to Tab. HomeScreen and ProfileScreen should be simple components. In the App component return <Tab.Navigator><Tab.Screen name="Home" component={HomeScreen} /><Tab.Screen name="Profile" component={ProfileScreen} /></Tab.Navigator>.
Starter code
// Import the top tab navigator; assign to Tab
// Import Text from react-native
// Write HomeScreen and ProfileScreen
// Write the App component; put two Tab.Screen inside Tab.NavigatorSample solution
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import { Text } from "react-native";
const Tab = createMaterialTopTabNavigator();
function HomeScreen() { return <Text>Home</Text>; }
function ProfileScreen() { return <Text>Profile</Text>; }
function App() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
);
}When to use it?
Material Top Tabs and Bottom Tabs fit different purposes. Material Top Tabs is good for categorized content: an activity feed's categories, a profile's tabs. Bottom Tabs is for main sections: home, search, profile and so on.
Using both together is also common: main sections at the bottom (Bottom Tabs), categories inside a section (Material Top Tabs). This is seen in WhatsApp: "Chats / Status / Calls" at the top (Material Top Tabs) and main app sections (Stack or Bottom Tabs). The right choice depends on your content structure. Think about whether users will navigate between main sections or between categories. This decides which pattern to pick.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the main difference between Material Top Tabs and Bottom Tabs?
<Tab.Navigator>...</Tab.Navigator>- There is no difference
- The tab position (top vs bottom) and swiping Correct answer
- Only Bottom Tabs works
- Only Material Top Tabs supports icons
Explanation: Material Top Tabs is at the top, Bottom Tabs at the bottom; Material Top Tabs supports swiping.
2 Import createMaterialTopTabNavigator
import { ____ } from "@react-navigation/material-top-tabs";import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";Explanation: createMaterialTopTabNavigator comes from @react-navigation/material-top-tabs.
3 Match the concept to its role
| Term | Meaning |
|---|---|
Material Top Tabs |
Top tabs |
createMaterialTopTabNavigator |
Builds the Tab object |
swipe |
Tab switch |
Tab.Navigator |
Tab container |