Material Top Tabs
@react-navigation/material-top-tabs
Demo
A navigator that lets you switch between different routes by tapping the tabs or swiping horizontally.
Installation
Install @react-navigation/material-top-tabs dependencies
npx expo install @react-navigation/material-top-tabs react-native-tab-view react-native-pager-viewCopy/paste the following code to a _layout.tsx file and adjust all the MaterialTopTabs.Screen to your project’s screens:
import type { MaterialTopTabNavigationEventMap, MaterialTopTabNavigationOptions,} from '@react-navigation/material-top-tabs';import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';import { useTheme, type ParamListBase, type TabNavigationState,} from '@react-navigation/native';import { withLayoutContext } from 'expo-router';
const { Navigator } = createMaterialTopTabNavigator();
const MaterialTopTabs = withLayoutContext< MaterialTopTabNavigationOptions, typeof Navigator, TabNavigationState<ParamListBase>, MaterialTopTabNavigationEventMap>(Navigator);
export default function MaterialTopTabsLayout() { const { colors } = useTheme(); return ( <MaterialTopTabs initialRouteName='index' screenOptions={{ tabBarActiveTintColor: colors.text, tabBarInactiveTintColor: 'grey', tabBarLabelStyle: { fontSize: 14, textTransform: 'capitalize', fontWeight: 'bold', }, tabBarIndicatorStyle: { backgroundColor: colors.text, }, tabBarScrollEnabled: true, tabBarItemStyle: { width: 'auto', minWidth: 100 }, }} > <MaterialTopTabs.Screen name='index' options={{ title: 'Blue', }} /> <MaterialTopTabs.Screen name='red' options={{ title: 'Red', }} /> <MaterialTopTabs.Screen name='green' options={{ title: 'Green', }} /> <MaterialTopTabs.Screen name='purple' options={{ title: 'Purple', }} /> </MaterialTopTabs> );}Just as other navigators with expo-router, the default exported components in the same folder will be their own screen in the navigator.