React Native
Material Top Tabs
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.
Exercise 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>.
Show example 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.
Test yourself
-
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
- Only Bottom Tabs works
- Only Material Top Tabs supports icons
Show answer
The tab position (top vs bottom) and swiping — Material Top Tabs is at the top, Bottom Tabs at the bottom; Material Top Tabs supports swiping.
-
Import createMaterialTopTabNavigator
import { ____ } from "@react-navigation/material-top-tabs";
Show answer
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
-
Match the concept to its role
- Material Top Tabs
- Top tabs
- createMaterialTopTabNavigator
- Builds the Tab object
- swipe
- Tab switch
- Tab.Navigator
- Tab container
Next lesson: Tab badge
