{"id":122,"date":"2025-09-26T14:49:53","date_gmt":"2025-09-26T14:49:53","guid":{"rendered":"https:\/\/blog.vyomscode.com\/?p=122"},"modified":"2025-09-26T15:01:25","modified_gmt":"2025-09-26T15:01:25","slug":"creating-top-navigation-tabs-in-expo-router-with-react-navigation","status":"publish","type":"post","link":"https:\/\/blog.vyomscode.com\/index.php\/2025\/09\/26\/creating-top-navigation-tabs-in-expo-router-with-react-navigation\/","title":{"rendered":"Creating Top Navigation Tabs in Expo Router with React Navigation"},"content":{"rendered":"\n

When building apps, navigation plays a huge role in the overall user experience. If your app involves bookings, tasks, or other segmented data, top navigation tabs<\/strong> (sliders) can help users switch between views effortlessly.<\/p>\n\n\n\n

In this blog, we\u2019ll walk through how to implement top navigation tabs in an Expo Router project using React Navigation\u2019s Material Top Tabs<\/strong>. By the end, you\u2019ll have a working setup where users can toggle between Active<\/strong> and History<\/strong> bookings.<\/p>\n\n\n\n

\n\n\n\n

Step 1 \u2013 Install the Required Package<\/h4>\n\n\n\n

First, install the @react-navigation\/material-top-tabs<\/code> package:<\/p>\n\n\n\n

npm i @react-navigation\/material-top-tabs<\/em><\/strong><\/p>\n\n\n\n

Step 2 \u2013 Set Up the Folder Structure<\/h4>\n\n\n\n

Assume your project is structured like this:<\/p>\n\n\n\n

src\/app\/(user)\/
\u251c\u2500\u2500 _layout.tsx
\u251c\u2500\u2500 index.tsx
\u2514\u2500\u2500 bookings.tsx<\/strong><\/p>\n\n\n\n

We want to create top tabs inside bookings.tsx<\/code>. For that, let\u2019s make a new folder book<\/code> inside (user)<\/code> and create the following files:<\/p>\n\n\n\n

src\/app\/(user)\/book\/_layout.tsx
src\/app\/(user)\/book\/index.tsx
src\/app\/(user)\/book\/history.tsx<\/strong><\/p>\n\n\n\n

Step 3 \u2013 Redirect the Old Bookings Page<\/h4>\n\n\n\n

Since we moved bookings into the book<\/code> folder, we\u2019ll redirect the old bookings.tsx<\/code> to point to the new setup.<\/p>\n\n\n\n

Update src\/app\/(user)\/bookings.tsx<\/code><\/strong>:<\/p>\n\n\n\n

import { Redirect } from 'expo-router'; \n\nexport default function BtwoBIndex() {\n  return <Redirect href={'home'} \/>;\n}\n<\/em><\/strong><\/code><\/pre>\n\n\n\n
Step 4 \u2013 Add the Top Tabs Layout<\/h4>\n\n\n\n
Now, let\u2019s configure the top tabs inside src\/app\/(user)\/book\/_layout.tsx<\/code>.<\/p>\n\n\n\n
import { createMaterialTopTabNavigator } from '@react-navigation\/material-top-tabs';\nimport React from 'react'; \nimport { StyleSheet } from 'react-native';  \nimport NewBooking from '.\/index';\nimport CabDuty from '.\/cabDuty'; \nimport HotelDuty from '.\/hotelDuty'; \n\nconst Tab = createMaterialTopTabNavigator(); \n\nexport default function Specialroute() {\n  return ( \n    <Tab.Navigator\n      screenOptions={{\n        tabBarScrollEnabled: true,\n        tabBarItemStyle: { width: 'auto' },\n        tabBarLabelStyle: { \n          textTransform: 'none',\n          flexShrink: 1 \n        }\n      }}\n      style={styles.tabContainer}\n    > \n      <Tab.Screen name=\"index\" component={NewBooking} options={{ tabBarLabel: 'New Booking' }} \/>  \n      <Tab.Screen name=\"cabDuty\" component={CabDuty} options={{ tabBarLabel: \"Cab Duty\" }} \/>   \n      <Tab.Screen name=\"hotelDuty\" component={HotelDuty} options={{ tabBarLabel: \"Hotel Duty\" }} \/>   \n    <\/Tab.Navigator> \n  );\n}\n\nconst styles = StyleSheet.create({\n  tabContainer: { \n    flex: 1, \n  },  \n});<\/em><\/strong><\/code><\/pre>\n\n\n\n
\ud83d\udc49 With this structure, you can add as many pages as you want to the top tabs. If they overflow, they\u2019ll automatically become scrollable horizontally<\/strong>.<\/p>\n\n\n\n
Step 5 \u2013 Build the Active & History Screens<\/h4>\n\n\n\n
Inside the book<\/code> folder, add content for the two tabs:<\/p>\n\n\n\n
src\/app\/(user)\/book\/index.tsx<\/code> (Active Bookings):<\/strong><\/p>\n\n\n\n
import { StyleSheet } from 'react-native'; \nimport { Text, View } from '@\/src\/components\/Themed';\n\nexport default function ActiveBooking() {\n  return (\n    <View style={styles.container}>\n      <Text style={styles.title}>Active<\/Text> \n    <\/View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  title: {\n    fontSize: 20,\n    fontWeight: 'bold',\n  }, \n});<\/em><\/strong><\/code><\/pre>\n\n\n\n
src\/app\/(user)\/book\/history.tsx<\/code> (History Bookings):<\/p>\n\n\n\n
import { StyleSheet } from 'react-native'; \r\nimport { Text, View } from '@\/src\/components\/Themed';\r\n\r\nexport default function HistoryBooking() {\r\n  return (\r\n    <View style={styles.container}>\r\n      <Text style={styles.title}>History<\/Text> \r\n    <\/View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  title: {\r\n    fontSize: 20,\r\n    fontWeight: 'bold',\r\n  }, \r\n});\r\n<\/em><\/strong><\/code><\/pre>\n\n\n\n
Step 6 \u2013 Improve the Bottom Tabs<\/h4>\n\n\n\n
Finally, let\u2019s update the main src\/app\/(user)\/_layout.tsx<\/code><\/strong> to add a clean bottom tab navigation experience.<\/p>\n\n\n\n
Inside the TabLayout()<\/code> return, modify like this:<\/p>\n\n\n\n
return (
<Tabs>
   {\/* Hide old Bookings tab *\/}
   {\/* New Bookings tab *\/}
   <Tabs.Screen
      name=”book”
      options={{
         title: ‘Bookings’,
         tabBarIcon: ({ color }) => <TabBarIcon name=”book” color={color} \/>, 
       }}
    \/>
<\/Tabs>
);<\/em><\/strong><\/p>\n\n\n\n
Final Thoughts<\/h4>\n\n\n\n
With this setup:<\/p>\n\n\n\n