Skip to main content

Tabs

Expo Router adds an additional href screen option which can only be used with screen options that are an object (e.g. screenOptions={{ href: "/path" }}) and cannot be used simultaneously with tabBarButton.

Hiding a tab

Sometimes you want a route to exist but not show up in the tab bar, you can pass href: null to disable the button:

import { Tabs } from "expo-router";

export default function AppLayout() {
return (
<Tabs>
<Tabs.Screen
// Name of the route to hide.
name="index"
options={{
// This tab will no longer show up in the tab bar.
href: null,
}}
/>
</Tabs>
);
}

Dynamic routes

You may want to use a dynamic route in your tab bar (for example a profile tab). For this case, you'll want the button to always link to a specific href.

import { Link, Tabs } from "expo-router";

export default function AppLayout() {
return (
<Tabs>
<Tabs.Screen
// Name of the dynamic route.
name="[user]"
options={{
// Ensure the tab always links to the same href.
href: "/evanbacon",

// OR you can use the Href object:
href: {
pathname: "/[user]",
params: {
user: "evanbacon",
},
},
}}
/>
</Tabs>
);
}